How to Create a Custom Contact Form

How to create custom contact form

Written by - Mazhar Iqbal

May 17, 2021

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 in order to grow your website, you need a contact form on your site. Visitors will contact you by filling this form. In this article, we’ll explain easy steps to create a WordPress contact form for your site.

Why do you need to create a Contact Form in WordPress?

If you are a newbie, you may wonder, why you need to create a contact form for your website.

You may ask yourself, what is the difference between providing an email address at your site vs making a contact form for your visitors to be in contact with you?

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 contact form, you can quickly and easily communicate with the readers of your content.

Security:

Spammers can easily steal your email and then can add it to their junk mail lists. But 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 definitely 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

Parts of a custom WordPress form:

A simple form built-in WordPress must have 3 following aspects.

Let’s explain each.

Form Design:

You can design a form by creating a page template, then can use it as the front–end. Alternatively, you can write HTML code in the new page section of WordPress. We will be using the WordPress page option as it is simpler than the other method.

Steps to Create Custom Form:

Following steps are needed to create a form in WordPress:

  • Navigate to pages –> Click Add New option displayed in the WordPress dashboard.
  • Always give a title to the page, like “Customers 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 customer 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 onsubmit property 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 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 working.

For this, you need to open Notepad or any other text editor of your choice. I will guide you through the complete process, 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 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 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 FTP client, you have to upload customer-details.php to the theme folder.

A Success Page:

When a customer submits a form, the page you show to him after the successful submission is called the success page. Success page can be created in WordPress.

Add a new page and give it the title of “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.

You May Also Like…

0 Comments