PHP contact form script with validation

This tutorial gives you guidance to create the PHP contact form script with validation. In the previous post, we have guide developing the PHP code to send email from contact form and have successfully created a simple contact form. But this contact form lacks the data validation step. As you know, the form you create will include a lot type of inputs such as text fields, radio buttons, a multiple-option select list, a checkbox, and a submit button. You need to validate those fields to ensure that customers enter a valid value. This article will help you to add validation to the PHP form

There have 2 ways to validate fields: using HTML 5 and using Javascript.

Validation contact form using HTML 5

When using HTML 5, a warning message will appear if a customer clicks on the Submit button while they do not fill in value for the required fields.

PHP contact form script with validation

You need to add this code into input tag: required=”” aria-required=”true”. Please refer to the below screenshot:

PHP contact form script with validation
Code HTML


<div class="contact-wapper">
<h2 class="title"><strong>Contact</strong> Us</h2>
<form id="contactForm" action="php/contact-form.php" method="POST" >
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" maxlength="100" class="form-control" name="name" id="name" required="" aria-required="true">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" maxlength="100" class="form-control" name="email" id="email" required="" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" maxlength="100" class="form-control" name="subject" id="subject" required="" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<textarea maxlength="5000" rows="10" class="form-control" name="message" id="message" required="" aria-required="true"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Send Message" class="btn btn-primary btn-lg mb-xlg" />
</div>
</div>
</form>
</div>

Validate contact form using javascript

Developers usually use javascript for creating the PHP contact form script with validation because of multiple advantages. The data validation and processing are faster than using HTML 5 because it reduces the number of requests to the server. Besides, developers can easily add/remove classes and javascript event. An example of using javascript is as below contact form:

 

PHP contact form script with validation

In the HTML file, please add these codes:

PHP contact form script with validation

The content of the warning message can be put after the msg-error= code.

Please refer to the below code html


<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" msg-error="Please enter your name here." maxlength="100" class="form-control" name="name" id="name" required="" aria-required="true">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" msg-error="Please enter your email address here." maxlength="100" class="form-control" name="email" id="email" required="" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" msg-error="Please enter your subject here" maxlength="100" class="form-control" name="subject" id="subject" required="" aria-required="true">
</div>
</div>
</div>

 

 

This is code javaScrip


jQuery('.btn-primary').click(function(){
  jQuery("#contactForm input").each(function() {
    if (jQuery(this).val() =="" ){
      jQuery(this).parent().append('<div class="red">'+jQuery(this).attr('msg-error')+'</div>');
   }
  });
})

Download code PHP contact form script with validation via html5  dowload code contact form here

Download code php contact form validation via javascript: php-code-to-send-email-from-contact-form-via-javascrip

 

Enjoy this blog? Please spread the word :)