I have never used an ajax contact form before but I think it is best suited for this site: https://lj.digital
I’m not a php developer or js so I am stuck. I would like to get this site advertised on FB & Li ASAP as I have lost my job due to furlough and COVID 19 and have decided to set up my own business.
Any help would be appreciated. @mzur
Here is the HTML code for the form I would like to setup:
<!-- partial:index.partial.html -->
<div class='form-overlay'></div>
<div class='icon fa fa-pencil' id='form-container'>
<span class='icon fa fa-close' id='form-close'></span>
<div id='form-content'>
<div id='form-head'>
<h1 class='pre'>Are you ready? Let's go!</h1>
<h1 class='post'>Thanks!</h1>
<p class='post'>I'll be in touch ASAP</p>
</div>
<form>
<input class='input name' name='user_name' placeholder='Your Name' type='text' value=''>
<input class='input email' name='user_email' placeholder='Email' type='text' value=''>
<input class='input phone' name='user_phone' placeholder='Phone' type='text' value=''>
<select class='input select' name='subject'>
<option disabled=''>What shall we talk about?</option>
<option selected=''>About a new project</option>
<option selected=''>Got a question</option>
<option selected=''>Strategy retainers</option>
<option>Let's do this over a brew</option>
</select>
<textarea class='input message' placeholder='How can I assist you?'></textarea>
<input class='input submit' type='submit' value='Send Message'>
</form>
</div>
</div>
<!-- partial -->
This is the JS to make it work:
<script>var formContainer = $('#form-container');
bindFormClick();
//Opening the form
function bindFormClick(){
$(formContainer).on('click', function(e) {
e.preventDefault();
toggleForm();
//Ensure container doesn't togleForm when open
$(this).off();
});
}
//Closing the form
$('#form-close, .form-overlay').click(function(e) {
e.stopPropagation();
e.preventDefault();
toggleForm();
bindFormClick();
});
function toggleForm(){
$(formContainer).toggleClass('expand');
$(formContainer).children().toggleClass('expand');
$('body').toggleClass('show-form-overlay');
$('.form-submitted').removeClass('form-submitted');
}
//Form validation
$('form').submit(function() {
var form = $(this);
form.find('.form-error').removeClass('form-error');
var formError = false;
form.find('.input').each(function() {
if ($(this).val() == '') {
$(this).addClass('form-error');
$(this).select();
formError = true;
return false;
}
else if ($(this).hasClass('email') && !isValidEmail($(this).val())) {
$(this).addClass('form-error');
$(this).select();
formError = true;
return false;
}
});
if (!formError) {
$('body').addClass('form-submitted');
$('#form-head').addClass('form-submitted');
setTimeout(function(){
$(form).trigger("reset");
}, 1000);
}
return false;
});
function isValidEmail(email) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(email);
};
</script>