Código Javascript:
Ver original
var sm_contactForm = function (sel) { var name_pattern = /^[a-zA-Z\s]+$/; var email_pattern = /(.+)@(.+){2,}\.(.+){2,}/; var number_pattern = /^-?\d+\.?\d*$/; var $sel = $(sel); var $form = $sel.find('form'); var $name_input = $form.find('.name'); var $email_input = $form.find('.email'); var $phone_input = $form.find('.phone'); var $company_input = $form.find('.company'); var $message_input = $form.find('.message'); var $errorMsg = $form.find('.errorMsg'); $form.on('submit', function(e) { e.preventDefault(); if (!name_pattern.test($name_input.val())) { $errorMsg.text('Por favor escribe tu nombre.'); } else if (!email_pattern.test($email_input.val())) { $errorMsg.text('Por favor escribe tu correo electrónico.'); } else if (!number_pattern.test($phone_input.val())) { $errorMsg.text('Por favor escribe tu telefono.'); } else if (!$message_input.val()) { $errorMsg.text('Por favor escribe tu mensaje.'); } else { $.ajax({ type: 'POST', url: 'php/contact.php', data: $("#smForm-1").serialize() + "name=" + name_input + "&email=" + email_input + "&company=" + company_input + "&phone=" + phone_input + "&message=" + message_input, success: function() { var $title = $form.parent().find('.title'); var $p = $form.parent().find('p'); var $close = $form.parent().find('.close'); var titleInitText = $title.text(); var pInitText = $p.text(); var closeInitText = $close.text(); $errorMsg.text(''); $title.text('Gracias.'); $p.text('hasta luego.'); $close.text('Ocultar formulario.').css('margin-top', '20px'); $form.slideUp(); setTimeout(function(){ $sel.SlickModals('closePopup'); setTimeout(function () { $title.text(titleInitText); $p.text(pInitText); $close.text(closeInitText); $form.slideDown(); }, 2000); }, 4000); // Auto close timeout in milliseconds }, error: function() { $errorMsg.text('Algo salió mal. Inténtalo de nuevo.'); } }); } }) };
Código HTML:
<form name="smForm-1" id="smForm-1"> <input type="text" id="name" class="field name" placeholder="Nombre" minlength="3" /> <input type="email" id="email" class="field email" placeholder="Correo electrónico" /> <input type="tel" id="phone" class="field phone" placeholder="Teléfono" /> <input type="text" id="company" class="field phone" placeholder="Nombre de tu empresa" /> <input type="text" id="message" class="field message" placeholder="Mensaje" /> <input type="submit" id="form-submit" class="send cta" value="Enviar mensaje" /> <div class="errorMsg"></div> </form>