How to Create a Custom Contact Form in WordPress? (A step-by-step guide)
How to create a custom contact form in WordPress and add it to your website? Why contact form is needed? Let’s explore.
If you want to collect the email addresses of your visitors and leads to grow your website, you need a contact form on your website. Visitors will contact you by filling out this form. In this article, we’ll explain the easy steps to create a custom contact form for your site.
Why do you need to create a Contact Form?
Some of the benefits of adding a contact form to your site are as follows:
Let’s have a detailed look at every aspect.
Communication:
Through the contact form, you can quickly and easily communicate with the readers of your content.
Security:
Spammers can easily steal your email and then add it to their junk mail lists. However, the contact form does not show your email address, so you are safe from spammers.
Organization:
The contact form helps you in the organization of your email marketing services. It helps you in the automation of marketing your services. It simplifies your email automation process.
Information:
Through the contact form, you can gather all the required information, you want from your visitors. You can add all the relevant fields for the required information. This will cut down the time on back-and-forth emails between you and your clients.
Income Potential:
Studies have shown that 77% of your website visitors will leave without a trace and never return. Thanks to the contact form, it helps you to capture leads. You can send them an email campaign and it will help you to land them again on your website.
After exploring the benefits of a contact form, let’s create a custom contact form. Be aware, you are an expert in the following technologies.
- Basic functionality of WordPress
- HTML
- JavaScript
- PHP
- My SQL
steps to create a custom contact form:
A simple form built-in WordPress must have 3 following steps.
Let’s explain each.
Form Design:
Crafting your unique form in WordPress is like painting a masterpiece! Choose vibrant colors for fields, add playful fonts for labels, and let your creativity flow. Your form will be an expression of your personality, inviting visitors to engage with your website effortlessly.
Steps to Create a Custom Contact Form:
The following steps are needed to create a form in WordPress:
- Navigate to pages –> Click the Add New option displayed in the WordPress dashboard.
- Always give a title to the page, like “Customer details”
- Navigate to the HTML tab. Here, you will write the code.
- Create a form of your choice.
Always keep in mind the requirements of your contact form page when you create it. In this tutorial, we will choose the customer’s name, email, sex, and age with some of the basic JavaScript validations.
- Add
<form>of the“POST”method. Properly name it like“customer_details” - To add JavaScript validations later and give the action to it, add a function
“form_validation”in the
onsubmitproperty of it. - When a contact form is submitted, a PHP file “action” executes.
Add fields like name, sex, email, age, etc. in the form and then close the form. The final code will look like this:
<form name=”customer_details” method=”POST” onsubmit=”return form_validation()” action=”../customer-details.php”> Your Name: <input type=”text” id=”customer_name” name=”customer_name” /><br /> Your Email: <input type=”text” id=”customer_email” name=”customer_email” /><br /> Sex: <input type=”radio” name=”customer_sex” value=”male”>Male <input type=”radio” name=”customer_sex” value=”female”>Female<br /> Your Age: <input type=”text” id=”customer_age” name=”customer_age” /><br /> <input type=”submit” value=”Submit”/> </form>
Always validate the form after completion of its design. You should not trust user data. It is your responsibility to validate the data before insertion into the database that the user submitted. This can be validated from 2 ends, front-end and back-end. Take this example of validation of front-end data using JavaScript.
After opening the script tag, type <script type=”text/javascript”>and then add a function “form_validation”. This function is in the onsubmitproperty of the <form>
After this, write the validation code, and it will look like this:
<script type=”text/javascript”>
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}/* Check the Customer Email for invalid format */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position<at_position+2 || dot_position+2>=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
</script>
This code will not only check the name and email of the customer but will also validate these credentials. Always add this code after </form>. After adding this code, the complete code in WordPress will be like this:
<form name=”customer_details” method=”POST” onsubmit=”return form_validation()” action=”../customer-details.php”>
Your Name: <input type=”text” id=”customer_name” name=”customer_name” /><br />
Your Email: <input type=”text” id=”customer_email” name=”customer_email” /><br />
Sex: <input type=”radio” name=”customer_sex” value=”male”>Male <input type=”radio” name=”customer_sex” value=”female”>Female<br />
Your Age: <input type=”text” id=”customer_age” name=”customer_age” /><br />
<input type=”submit” value=”Submit”/>
</form><script type=”text/javascript”>
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}/* Check the Customer Email for invalid format */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position<at_position+2 || dot_position+2>=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
</script>
Now simply publish the page. Remember that JavaScript validation is not perfect. One can simply bypass it by disabling JavaScript.
Server Side Scripting:
In the HTML form, you had added action=”../customer-details.php”. But this file is not created yet. Now we have to create this to make our custom form work.
For this, you need to open Notepad or any other text editor of your choice. I will guide you through the complete process, and which variables you need to create for this. First, save a file on your computer named customer-details.php
Declare $customer_name, $customer_email, $customer_sex, $customer_agein this file. After declaring, assign the values to the respective fields that are submitted by the HTML form.
Example: $customer_name = $_POST[“customer_name”]. It will collect the value from the HTML form by the POSTmethod. Then it will assign this to the variable $customer_name.
Then you need to connect this file with the database by the mysqli_connectmethod. Find the database configuration settings from your WordPress installation in case you have forgotten.
After this, you need to download a wp-config.php file from the WordPress installation to your desktop. You can do this by using an FTP client like FileZilla. Then open this file with the text editor. Here, you will find the database settings that you require.
After setting a database connection, you can insert the data collected through your contact form into the database of your WordPress. This can be done using mysqli_query
When a customer submits a contact form, you can lead him to another page by adding a header (“Location:”). This is an optional step. For this, you have to create an additional page.
The complete customer-details.php file should look like this:
<form name=”customer_details” method=”POST” onsubmit=”return form_validation()” action=”../customer-details.php”>
Your Name: <input type=”text” id=”customer_name” name=”customer_name” /><br />
Your Email: <input type=”text” id=”customer_email” name=”customer_email” /><br />
Sex: <input type=”radio” name=”customer_sex” value=”male”>Male <input type=”radio” name=”customer_sex” value=”female”>Female<br />
Your Age: <input type=”text” id=”customer_age” name=”customer_age” /><br />
<input type=”submit” value=”Submit”/>
</form><script type=”text/javascript”>
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}/* Check the Customer Email for invalid format */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position<at_position+2 || dot_position+2>=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
</script>
By using the FTP client, you have to upload customer-details.php to the theme folder.
A Success Page:
When a customer/visitor submits a form, the page you show to him after the successful submission is called the success page. A success page can be created in WordPress.
Add a new page and give it the title “Success Page”. Be advised that you match the page slug to “success-page” or any other name that you have given in the header (“location”). You can type a message of your choice like “Your info has been successfully submitted”.
I hope this article will help you in the creation of your first custom form in WordPress using PHP.
