If you have just set up your first blog, then by now, you would know that it comes with a default contact form – most of the premium themes come with one. The point being that contact forms are essential when it comes to your audience seeking to make contact with you for one reason or another.
What’s more, with contact forms, your user engagement should shoot up which is why it is essential that you use one on your blog. But then again, you can also use form plugins such as Contact form 7, fast secure contact form among others to get your users to contact you.
And what’s more, these contact form should enable you to connect with your audience directly and enable you to streamline your marketing as well.
Video Tutorial
The problem though is that most of the default contact forms and even the plugins come with the same stereotype format which is why you may want to opt for something more specialized along the lines of setting up your own contact form on WordPress.
If you happen to be quite skilled in php, then you should be able to do so with ease which is why it is essential that you read the rest of the article so that you can set up your own customized form for your users to utilize, to connect with you.
1. Form design:
You can either create a separate page template or write some HTML code in your WordPress page for this, and as the later is infinitely simpler, it makes more sense to opt for the same.
You can create a custom form in WordPress by following the steps listed below. And as always, remember to back up your information before you begin.
- Go to Pages -> Add New option given under your WordPress dashboard.
- Give the title of the page you want, like ‘Customer information’ or ‘customer details’.
- Now navigate to the ‘HTML’ tab to write HTML code.
- create a custom form in WordPress you want.
- Add a 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.
- At this point, you may want to add some fields in the form like name, email, sex, age etc and close the form.
The final code should look like this
Your Name: <br /> Your Email: <br /> Sex: Male Female<br /> Your Age: <br />
2. Validation:
Now that you have designed the form, it is time to validate the same. Never trust user data ‘as it is’ and always, always validate it before you enter the same into your database.
Just follow the code listed below for some quick validation and that should do the trick. Write down this validation code and close it at the end.
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=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
This will check and validate customer name and email address. Add this code after . So, the complete code in the WordPress will look like-
Your Name: <br />
Your Email: <br />
Sex: Male Female<br />
Your Age: <br />
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=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
Now, all that’s left for you to do is to publish the page and that should effectively do the trick.
3. Server side scripts:
Remember the part where we had mentioned “customer details.php”? Well, it’s time we attended to that part as well.
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.
Now, you need to do the same with other values as well. Now you need to 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.
4. Success:
Success page is the one which an user can view after submitting the form with his details; you can set this page up to display a custom message such as “your details have been submitted successfully” or something similar.
The point being that you can use the code posted below to set up your own success page complete with custom message.
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”). Now write up a message, such as “thank you for your cooperation” or something along those lines and you should be set.
You can always reload your site to check and see if the contact form is working as it is supposed to and in almost all the cases, it should work just fine. However, if you run into a few issues, you can always check it online or get an expert to set up your custom form.
It is important that your contact form does not appear too aggressive or intrusive for that matter, so that it can help to boost up those conversion rates.
What’s more, you can also use these custom forms to gather data and information on your customers which you can further use to streamline your marketing campaigns.
This is one of the main reasons why forms, especially contact forms are essential for all blogs and more importantly, you can use the coding listed here not just to create a custom form in WordPress, but in reality, create any sort of contact form with different parameters.
As suggested earlier, it is always good idea to do a complete back up before you tinker with your core files.
Once you have the form up and running, you should be able to check out whether the form in question validates the data as it is programmed to do so before entering it into your database.
On the whole, contact forms are quite essential to blogs and websites alike, as it helps customers to reach out to you and can lead to better conversion rates in the long run. So make sure that you try out the steps listed above and your custom contact form should work just fine.
The post How to Create a Custom Form in WordPress Website or Blog appeared first on SKT Themes.
0 Commentaires