Contact us form php with validation and captcha

Contact us form php with validation and captcha  Contact form with Google reCAPTCHA code will be effective and efficient way of validating the user against bots. As we know already, the captcha is a concept specially for validating genuine human users against bots. Check out the best contact form Iris that is built for high conversion to improve your sales. It is optimised for frictionless UI/UX and will result in increases enquiries. It includes numerous features like Google reCAPTCHA, multiple attachments and more.

Usage:

• Press the download button above. The zip file contains all the code you need for the form.
• Unzip the file php-contact-form-with-validation-and-recaptcha
• Open the file named “handler.php”
• Look for sendEmailTo add the email addresses to receive the form submissions.
• Upload the whole folder to your website
• Open the formpage.html in your browser and test

The HTML Code

<script src='https://www.google.com/recaptcha/api.js'></script>

<div class="form-container">
<h1>Contact Us</h1>

<form method="post" id="reused_form" >
<label for="name">Your Name:</label>
<input id="name" type="text" name="Name" required maxlength="50">

<label for="email">Email Address:</label>
<input id="email" type="email" name="Email" required maxlength="50">

<label for="message">Message:</label>
<textarea id="message" name="Message" rows="10" maxlength="6000" required></textarea>

<div class="g-recaptcha" data-sitekey="Insert your recaptcha site key here"></div>

<button class="button-primary" type="submit" >Post</button>
</form>
<div id="success_message" style="display:none">
<h3>Submitted the form successfully!</h3>
<p>
We will get back to you soon.
</p>
</div>
<div id="error_message"
style="width:100%; height:100%; display:none; ">
<h3>Error</h3>
Sorry there was an error sending your form.

</div>
</div>

CSS Styling

The following extra CSS styling is used to make the form look better

<link rel="stylesheet" href="form.css" >

jQuery Form submission handling

<script>
$(function()
{
function after_form_submitted(data)
{
if(data.result == 'success')
{
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
else
{
$('#error_message').append('<ul></ul>');

jQuery.each(data.errors,function(key,val)
{
$('#error_message ul').append('<li>'+key+':'+val+'</li>');
});
$('#success_message').hide();
$('#error_message').show();

//reverse the response on the button
$('button[type="button"]', $form).each(function()
{
$btn = $(this);
label = $btn.prop('orig_label');
if(label)
{
$btn.prop('type','submit' );
$btn.text(label);
$btn.prop('orig_label','');
}
});

}//else
}

$('#reused_form').submit(function(e)
{
e.preventDefault();

$form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function()
{
$btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});

$.ajax({
type: "POST",
url: 'handler.php',
data: $form.serialize(),
success: after_form_submitted,
dataType: 'json'
});

});
});
</script>

Form Validations

HTML5 validations are used. For example, the Name and Email fields have ‘required’ validation and the email field is of input type ’email’.

<input type="email" class="form-control" id="email" name="email" required>

Similarly, the message field (textarea) allows a max length of 6000 characters

<textarea  name="Message"  maxlength="6000" required></textarea>

Download File