<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal" method="post" id="contact_form"> <fieldset> <div calss="row"> <div class="col-md-6"> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Tipologia di contatto</label> <div class="col-md-6"> <select id="topic" name="topic" class="form-control"> <option value="1">Seleziona una tipologia...</option> <option value="2">Vorrei maggiori informazioni</option> <option value="3">Vorrei fissare un'appuntamento</option> <option value="4">Segnala come spam</option> </select> </div> </div> <!-- Text input--> <div class="form-group" style="display: none;"> <label class="col-md-4 control-label" for="textinput">Nome e Cognome</label> <div class="col-md-6"> <input id="to" name="to" placeholder="email" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Nome e Cognome</label> <div class="col-md-6"> <input id="name" name="name" placeholder="Nome e Cognome" class="form-control input-md" required="" type="text"> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="prependedtext">Email</label> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span> <input id="email" name="email" class="form-control" placeholder="Inserici email@" required="" type="text"> </div> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="prependedtext">Telefono</label> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span> <input id="tel" name="tel" class="form-control" placeholder="Inserisci un recapito telefonico" required="" type="text"> </div> </div> </div> </div> <div class="col-md-6"> <!-- Textarea --> <div class="form-group"> <label "control-label" for="textarea">Il tuo messaggio</label> <div> <textarea class="form-control" id="message" name="message">Inserici il tuo messaggio qui. </textarea> </div> </div> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="send_message" name="singlebutton" class="btn btn-block btn-lg btn-success" value="Send Message" type="submit">Invia</button> </div> </div> </fieldset> </form>

$(document).ready(function(){ $('#send_message').click(function(e){ e.preventDefault(); var error = false; var topic = $('#to').val(); var topic = $('#topic').val(); var name = $('#name').val(); var email = $('#email').val(); var tel = $('#telt').val(); var message = $('#message').val(); if(topic.length == 0){ var error = true; $('#topic_error').fadeIn(500); } else { $('#topic_error').fadeOut(500); } if(name.length == 0){ var error = true; $('#name_error').fadeIn(500); } else { $('#name_error').fadeOut(500); } if(email.length == 0 || email.indexOf('@') == '-1'){ var error = true; $('#email_error').fadeIn(500); } else { $('#email_error').fadeOut(500); } if(subject.length == 0){ var error = true; $('#tel_error').fadeIn(500); } else { $('#tel_error').fadeOut(500); } if(message.length == 0){ var error = true; $('#message_error').fadeIn(500); } else { $('#message_error').fadeOut(500); } if(error == false){ $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' }); $.post("send_email.php", $("#contact_form").serialize(),function(result){ if(result == 'sent'){ $('#cf_submit_p').remove(); $('#mail_success').fadeIn(500); } else { $('#mail_fail').fadeIn(500); $('#send_message').removeAttr('disabled').attr('value', 'Send Message'); } }); } }); });