This Contact Form requires at last PHP version 5.5 in your hosting server. Your hosting should allow you to send emails with using the PHP mail() function. You can use SMTP method if the mail() function is not supported.
The ZIP file contains HTML, JavaScript, and PHP files. After extracting the ZIP file you'll see the following files & folders structure.
docs.html
form.html
mailer/
├── contact.form.js
├── contact.form.php
├── validation.form.js
├── PHPMailer/
| ├── PHPMailer.php
| ├── Exception.php
| ├── SMTP.php
| ├── and more...
The Contact Form is very easy to install and works with all templates designed by HTML Codex. Please follow the below instructions step by step.
1. Extract the "contact-form.zip" file. You will see the following files & folders structure.
docs.html
form.html
mailer/
├── contact.form.js
├── contact.form.php
├── validation.form.js
├── PHPMailer/
| ├── PHPMailer.php
| ├── Exception.php
| ├── SMTP.php
| ├── and more...
2. Keep the "mailer" folder in the root directory. After placing the "mailer" folder in the root directory the structure will look like the example below.
template/
├── css/
├── img/
├── js/
├── lib/
├── mailer/
├── index.html
├── contact.html
├── and more HTML files...
3. Copy the below HTML code for the contact form and paste it to your contact page where you want it.
4. Copy the JS files links code below and paste it into the footer area of your contact page (before the closing body tag).
<!-- Contact Form Javascript -->
<script src="mailer/validation.form.js"></script>
<script src="mailer/contact.form.js"></script>
5. Copy the CSS code below and paste it into the header area of your contact page (before the closing head tag). Don't forget to save the file after making the changes.
<style type="text/css">
#contactForm .help-block ul {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
Your Contact Form is now fully installed. Now you need to activate it to make it work. Follow the instructions below step by step.
1. Open the "contact.form.php" file from the "mailer" folder.
2. Change the recipient name and email address and save the file.
// Recipient name. Change this name to your
$recipientName = "Joe User";
// Recipient email. Change this email to your
$recipientEmail = "joe@example.com";
The Contact Form utilizes the PHP mail() function as its default mailing method. However, it also includes a configuration for SMTP in case your hosting doesn't support the PHP mail() function for sending emails. If your hosting doesn't support the PHP mail() or you prefer to use the SMTP system, you'll need to enable it and add your SMTP credentials. Please follow the instructions below for guidance.
1. Open the "contact.form.php" file. Look for the word "useSMTP" and remove the word "false," then type in "true" instead.
// Set mailer to use SMTP or PHP's mail() function
// If you use SMTP, it will be "true". Otherwise, it will be "false"
$useSMTP = true;
2. You need to provide the following SMTP-related information. Don't forget to save the file after making the changes.
// Server settings for SMTP
$mail->isSMTP();
$mail->Host = 'smtp.example.com';
$mail->SMTPAuth = true;
$mail->Username = 'user@example.com';
$mail->Password = 'secret';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
By default, the mobile number field is enabled. If you prefer not to use the mobile field, you can simply remove it.
1. Open the "contact.html" file and remove the HTML code for mobile number field mentioned below.
2. Don't forget to change the CSS class for the subject field from "col-sm-6" to "col-12". See the below example.
To customize the error messages, it's easy to do so. Just open your "contact.html" file, locate the "data-validation-required-message", and customize the error messages as desired.
Although the Contact Form is 100% error-free, it may not work in some cases. If you face any problems while using it, please find your solution in the FAQ below. Please contact us if no solution is found. Our team will try to solve your problem within a short time.
Even if your server supports the mail() function, there may be some reasons why the email is not being sent.
There are a few potential reasons.
The error message "SMTP Error: Could not authenticate" indicates that there was a problem with the authentication process while attempting to send an email through the Simple Mail Transfer Protocol (SMTP). There are a few possible reasons for this issue:
To create an app password, you need 2-Step Verification on your Google Account. Here's a step-by-step guide to generate an app password for Gmail:
Copyright © HTML Codex, All Rights Reserved.