You are on page 1of 3

9/1/2017 How to create custom forms in WordPress without using plugins?

Shibu Lijack

How to create custom forms in


WordPress without using plugins?
MARCH 18, 2012 / SHIBU LIJACK

Forms are an integral part of a website. While there are lots of wordpress plugins available to create custom
forms, most of them are not up to the task. It is very easy to create a form in WordPress, provided you have
a fair knowledge of php, html and js. Let me show you how its done.

STEP #1

Front-end [HTML]

> Open dashboard.

https://shibulijack.wordpress.com/2012/03/18/create-custom-forms-in-wordpress/ 1/3
9/1/2017 How to create custom forms in WordPress without using plugins? Shibu Lijack

> Create a new page.

> Go to HTML mode.

> Create a form just like this:

1 <form action="../process.php" method="post"


2 Name <input id="name" type="text" name="name"
3 Email <input id="email" type="text" name="email"
4 <input type="submit" value="Submit" /></form

> Specify the backend php script in the action attribute of the form tag. Include as many form fields as you
wish. Specify the method of form submission as post.

> Publish the page.

Bravo! You have successfully completed the front end of the custom form.

STEP #2

Form Validation [JS]

> Include a javascript into the page which youve created.

> Add a script tag:

1 <script type="text/javascript">
2 /* JS validation code here */
3 ...
4 ...
5 </script>
> Create a validation function:

1 function validateForm()
2 {
3 /* Validating name field */
4 var x=document.forms["myForm"]["name"].value;
5 if (x==null || x=="")
6 {
7 alert("Name must be filled out");
8 return false;
9 }
10 /* Validating email field */
11 var x=document.forms["myForm"]["email"].value;
12 var atpos=x.indexOf("@");
13 var dotpos=x.lastIndexOf(".");
14 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
15 {
16 alert("Not a valid e-mail address");
17 return false;
18 }
19 }

https://shibulijack.wordpress.com/2012/03/18/create-custom-forms-in-wordpress/ 2/3
9/1/2017 How to create custom forms in WordPress without using plugins? Shibu Lijack

STEP #3

Back-end [PHP]

> Create a new PHP file in your favourite text editor.

> Get the submitted form elements:

1 <?php
2 //get the form elements and store them in variables
3 $name=$_POST["name"];
4 $email=$_POST["email"];
5 ?>

> Connect to your database:

1 <?php
2 //establish connection
3 $con = mysqli_connect("Host","User name","Password"
4 //on connection failure, throw an error
5 if(!$con) {
6 die('Could not connect: '.mysql_error());
7 }
8 ?>

> Insert the form values into the database:

1 <?php
2 $sql="INSERT INTO `DB name`.`Table name` ( `name` , `email_id` ) VALUES
3 mysqli_query($con,$sql);
4 ?>

> After the database is successfully updated, you need to redirect the user to a page with a success
message(which I have assumed you have created via Dashboard). You can do this by,

1 <?php
2 //Redirects to the specified page
3 header("Location: http://your-success-page-url
4 ?>

Now you have successfully created your php script which will be called in the action attribute. Upload this
php file inside the wordpress directory.
NOTE: In the form action, I have used ../process.php because the php file is one level above the page
which contains the form.

STEP #4

Create a new page with a form successful submission message.


Make sure the URL of this page is the one which is specified in the header() of the php script.

That is it! You have successfully created a custom form and connected it with a database!
https://shibulijack.wordpress.com/2012/03/18/create-custom-forms-in-wordpress/ 3/3

You might also like