When it comes to contact forms, validating the information submitted by your visitors is key.

With proper form validation, we can help cut down fraudulent submissions and keep you relatively free from spam submissions as well. Below, I’ve gathered one of the simplest methods for validating your contact forms to keep your collected data valid and useful.

I’ve used javascript to validate my webform. You may copy and paste the code below to your site or application, but be sure to update the dependent code to match your web site.

One thing to remember is to invoke the javascript validation of your form with the ‘onSubmit’ tag.

I’ve Included 3 snippets of code to get your web form functioning and validating properly.  Although, the form is validated with javascript, I’ve used PHP to process the mailing function, so that your form sends on submit.

Part 1: The Contact Web Form

The form I’ve provided here is a very simple 4 field form to collect data for you web site or application. Here we’re gathering the basic information we need to gather from a visitor to contact them further regarding their inquiry. Here, we’re collecting Name, Email, Phone Number and their message or question.

<form class="form-container" name="myForm" method="post" onsubmit="return validateForm()" action="sendmail.php">
<div class="frm-element-lg fl">
<input type="text" name="name" id="name" class="icon-1" placeholder="Name*"></div>
<div class="frm-element-lg fl">
<input type="text" name="email" id="email" class="icon-3" placeholder="Email*"></div>
<div class="frm-element-lg fl">
<input type="text" name="phone" id="phone" class="icon-4" placeholder="Phone*" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');"></div>
<div class="frm-element-lg fl">
<input type="text" name="message" id="message" class="icon-5" placeholder="Message*"></div>
<div style="clear:both;"></div>
<input type="submit" value="Submit" class="submit-btn">
</form>

Part 2: The Form Validation

As stated above, we’re using javascript to validate our form submissions. Here, we set a javascript alert box to pop up on submission if a user has submitted incomplete form fields and we have set our email input field to confirm that the visitor is submitting a correctly formatted email address as well.

There are also 3rd party services you may integrate into your validation to confirm that the email provided is, in fact, a ‘real’ email as well, but that’s getting ahead of ourselves regarding our simple validation here.

<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
if (x == "") {
alert("Email Address must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
var x = document.forms["myForm"]["phone"].value;
if (x == "") {
alert("Phone number must be filled out");
return false;
}
var x = document.forms["myForm"]["message"].value;
if (x == "") {
alert("Message must be filled out");
return false;
}
}
</script>

Part 3: The Send Function

I’ve included the send function, as well, below. Here we use PHP to ‘send’ the email once the form is filled out by your site visitor and they click submit. You may take the code below and create a ‘sendmail.php’ file that is included in the form code above as the form action.

Be sure that all of your variables and form input name match correctly so that your send function operate correctly.

<?php $email_to = "your@email.com";
$name = $_POST["name"];
$email_from = $_POST["email"];
$message = $_POST["message"];
$phone = $_POST["phone"];
$email_subject = "Feedback from website"; $headers = "From: " . $email_from . "\n";
$headers .= "Reply-To: " . $email_from . "\n"; $message = "Name: ". $name . "\r\nEmail: " . $email_from . "\r\nMessage: " . $message . "\r\nPhone: " . $phone;
ini_set("sendmail_from", $email_from);
$sent = mail($email_to, $email_subject, $message, $headers, "-f" .$email_from);
if ($sent) { header("Location: http://yoursite.com/thankyou.php"); }
else { echo "There has been an error sending your comments. Please try later."; }
?>

There’s several ways available to validate and send your web forms. The method above, I’ve found, is the lightest and simplest way to achieve web form validation. I hope this helps and enjoy.

Configuring your WordPress site to send your web form submissions correctly is a must. Time and time again this small, yet vital, aspect of WordPress is overlooked. The potential to lose data with a misconfigured web contact form is undeniable. Lost data means lost leads means lost revenue.

The Gmail SMTP WordPress plugin will configure your wordpress installation to send email using Gmail’s OAuth 2.0 protocol to authorize access to the Gmail API and takes out the uncertainty of losing your vital communications and leads generating from your site’s web contact form.

The process is quick and fairly painless. With a few clicks you will be using Gmail’s SMTP servers to send emails routed through your site’s web contact form.

Gmail SMTP Basic Setup

• Go to the plugin settings (Settings->Gmail SMTP).
• Create a new web application using the link.
• Set the Authorized Redirect URL of the application as the one shown in the settings.
• Copy the Client ID and Client secret and paste into the settings area.
• Enter your OAuth Email, From Email and From name.
• Select an encryption.
• Enter a port number.
• Save the settings.
• Now you can authorize your application to access the Gmail API by clicking on the Grant Permission button.
• Once the application has been authorized Gmail SMTP plugin will be able to take control of all outgoing email.

Gmail SMTP
>>> Download the plugin here <<<

Installation of Gmail SMTP Plugin
>>> Documentation <<<

Google Console for API Key
>>> Link here <<<

I’ve installed Gmail SMTP WordPress plugin on all of my client’s sites and it’s been smooth sailing since. Gmail SMTP is secure, solid and easy to use. It’s received over 10,000 downloads from the WordPress plugin library.

Connect to Gmail SMTP server to automatically send email from your WordPress site. Configure wp_mail() to use SMTP with OAuth 2.0 authentication.