Tag Archives: php

PHP Forms in WordPress

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 it’s done.

STEP #1

Front-end [HTML]

speaker-nomination-tedxceg

> Open dashboard.

> Create a new page.

> Go to HTML mode.

> Create a form just like this:

1
2
3
4
<form action="../process.php" method="post" name="myForm">
Name <input id="name" type="text" name="name" />
Email <input id="email" type="text" name="email" />
<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 you’ve created.

> Add a script tag:

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

> Create a validation function:

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

STEP #3

Back-end [PHP]

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

> Get the submitted form elements:

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

> Connect to your database:

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

> Insert the form values into the database:

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

> 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
2
3
4
<?php
//Redirects to the specified page
header("Location: http://your-success-page-url");
?>

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!