Your website is designed either in static or in PHP dynamic website, you rarely see the issue of your website contact form not working. And you too frustrated to fix the contact form mail receiving error. Let’s see practical working contact form validation in both PHP and Javascript.
In this article, you will get 100% contact form validation working code in both PHP and javascript and get an example of a working basic contact form.
If you are looking to add additional field options to add in your contact form, check out how to design the contact form with different fields and get the contact form templates which already build.
Simple contact form using HTML and CSS
Sample Contact Form Design in Bootstrap
Validation in PHP
contact form validation in PHP works only with the company domain mail ID. [Ex: info@btadminiot]
Add in the form action tag and the form response to the POST method, as of below.
<form action="sendmail.php" method="POST">
<!-- enter the form design fields -->
</form>Add the below code in the sendmail.php file
<?php
//decelaring variables
$field_name = $_POST['cname']; //name field
$field_email = $_POST['cemail'];
$field_phone = $_POST['cphone'];
$field_subject = $_POST['csubject'];
$field_message = $_POST['cmessage'];
//to which email ID should recevie these mails
$mail_to = 'enquiry@domainname.com';
$subject = 'Message from a site visitor '.$field_name;
//body message to display in your email
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Phone: '.$field_phone."\n";
$body_message .= 'Subject: '.$field_subject."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<!-- if message send successfully redirect to Thank you Page -->
<script language="javascript" type="text/javascript">
alert('Thank you for the message. We will contact you shortly.');
window.location = 'thank-you.html';
</script>
<?php
}
else { ?>
<!-- if message failed redirect page to fill the form again -->
<script language="javascript" type="text/javascript">
alert('Message failed.');
window.location = 'contact.html';
</script>
<?php
}
?>
Validation code in JavaScript
To Validate the contact form in JavaScript you go with the SMPTJS which validates the sent emails from JavaScript.
While using form validation on JavaScript you must add in form tag as
<form onsubmit="sendEmail(); reset(); return false;">
<!-- form fields design -->
</form>First, add the SMPTjs link at bottom of your web page above the closing body tag
<script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>Now add the below code after the above SMPTjs link. Edit the hostname with your server if you using a company domain mail ID or it with “smtp.gmail.com” if you using Gmail to receive emails.
<script type="text/javascript">
function sendEmail(){
Email.send({
Host : "smtp.gmail.com",
Username : "receive@gmail.com", //your email ID
Password : "password", //your email Password
To : 'recevice@gmail.com', //your email to recevice
From : document.getElementById("email").value,
Subject : "This is the subject",
Body : "Name: " + document.getElementById("name").value
+ "<br> Email: " + document.getElementById("email").value
+ "<br> Phone No: " + document.getElementById("phone").value
+ "<br> Email: " + document.getElementById("message").value
}).then(
message => alert("Message Sent Succesfully")
);
}
</script>Remember while validating the contact form:
the minor mistakes you may do while creating validation for your contact form, check the below listed silly mistakes most beginners do it.
- If you using a Gmail id to receive the contact form data use the JavaScript validation code. PHP does not support Gmail ID and works only for domain mail ID [name@cmpanyname.com]
- While using the JavaScript contact form validation code, check properly with SMTP in your account settings.
Conclusion: If you facing any issues still the using above code pre-check for minor areas such as SMTP settings or not entering the proper email ID. Comment below if you have any queries or any help.
