If you’re a blog owner then you must know the importance of interaction between blogger and readers.
Although, there are a number of ways to interact with your readers but one of the most easiest and effective way is through a simple contact form of WordPress.
Hold on! Do you know customizable forms can be quickly created with form builder tools?
Take a look at a list of some 5 best online form builder software.
There are some good and straightforward plugins like Contact Form 7, Fast Secure Contact Form, Custom Contact Form available in WordPress for creating forms.
For creating a simple contact form with common fields like name, email, message etc, these plugins are good enough to get the job done.
But if you need some extra functionality or need a customized form other than a regular contact form then these plugins will fall short.
You may use a premium form building solution like FormGet, Gravity Forms or create your own custom form if you have some PHP knowledge.
Here, I’ll show you the process that will help you to create custom WordPress Forms.
For that, you are required to have the following knowledge-
- Basic WordPress functionality
- Basic HTML
- JavaScript
- PHP
- MySQL
Steps To Create Customized WordPress Form
A simple WordPress form may have 3 parts-
1) Form design i.e. Front end
2) Server side scripts i.e. Back end
3) Success page.
1. Form Design
You can create a page template and use it as front end or you can write HTML code in WordPress page. As the second option is simpler, I’m using this method in this tutorial.
You can create a form in WordPress page by following these steps-
- Go to Pages -> Add New option given under your WordPress dashboard.
- Give the title of the page you want, like ‘Customer Details’.
- Now navigate to the ‘HTML’ tab to write HTML code.
- Create the form you want.
While creating the form, keep your requirements in mind.
I have simply chosen fields like customer name, email, sex and age with some basic JavaScript validations.
- Add a <form> of “POST” method, give it a name “customer_details”
- Add a function “form_validation” in the onsubmit property to add some JavaScript validations later and give the action.
- Action is the PHP file which will be executed when the form will be submitted.
Now, add some fields in the form like name, email, sex, age etc and close the form. The final code will look like :
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>
After designing the form it’s time to validate the form.
Never trust user data, always validate the data collected from user submission, before inserting into database.
You can validate from both frontend and backend, I’m giving an example of frontend data validation using JavaScript.
Open a script tag <script type=”text/javascript”>, add a function called “form_validation” which you’ve mentioned in the onsubmit property of the <form>.
Write down the validation code and close the script. So, the validation code will look like-
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 will check and validate customer name and email address. Add this code after </form>. So, the complete code in the WordPress will look like-
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>
Publish the page.
Note: JavaScript validation is not perfect and anyone can bypass this checking by disabling JavaScript.
2. Server Side Scripts
It’s now time for some action. Remember action=”../customer-details.php” we added in the HTML form?
We’ll now create the customer-details.php to make the form working.
Open Notepad or your favorite text editor and write down the code explained below and save the file as customer-details.php in your desktop.
First, declare some variables named $customer_name, $customer_email, $customer_sex, $customer_age and assign the values to respective fields submitted by the HTML form.
E.g. $customer_name = $_POST[“customer_name”] will catch the value from the HTML form by POST method and assign it to the variable $customer_name.
Connect the PHP file with database using mysqli_connect.
If you don’t remember database configuration, you can find these settings from your WordPress installation.
Download the wp-config.php from your WordPress installation to your desktop using your favorite FTP client like FileZilla.
Open the wp-config.php using your favorite text editor like Notepad and you’ll find required database settings.
After database connection, insert the data collected from the form into the WordPress database using mysqli_query.
There is an optional step in this PHP code.
If you want to show some message to the user after the form submission or want to redirect the user to another page you may add header (“Location: “) to the code. You’ll need to create a success page for this later.
So, the complete customer-details.php will look like
// Get data
$customer_name = $_POST[“customer_name”];
$customer_email = $_POST[“customer_email”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// Database connection
$conn = mysqli_connect(“Database Host”,”Database Username”,”Database Password”,”Database Name”);
if(!$conn) {
die(‘Problem in database connection: ‘ . mysql_error());
}// Data insertion into database
$query = “INSERT INTO ‘Database Name’.’Table Name’ ( ‘customer_name’, ‘customer_email’, ‘customer_sex’, ‘customer_age’ ) VALUES ( $customer_name, $customer_email, $customer_sex, $customer_age )”;
mysqli_query($conn, $query);// Redirection to the success page
header(“Location: “);
?>
Upload this customer-details.php file to theme folder using your favorite FTP client
3. Success Page
Success page is the page you can use to show some message after form submission. You can use WordPress page for this purpose. Create a WordPress page, give it a title like “Success Page”, be sure to match the page slug to ‘success-page’ or whatever you’ve given in the header(“Location”).
Write a message you want like “Thanks for your cooperation.” and publish it.
This was a simple straightforward tutorial to help you create your first custom form in WordPress using PHP.
Do you have any question about this tutorial? In case you have, you can ask it freely.
If you know any other method to create custom WordPress form please do share it.
