How to create a simple php contact form.

contme

Whether a website built using static HTML or one that uses wordpress (such as this one) a contact form is an amazing way for your customers / visitors to contact you.

After working your way through this article you should have a better understanding of creating custom PHP contact forms. Which you can use in your own projects both old and new.

Are you ready?.. then lets get started!

 

 

 

 

Forms

First things first – To create a form in your HTML document, you will need to decide where to place the form. Generally, most forms will start with:

1 <form>

and end with the closing tag of:

1 </form>

The form action will tell this form what to look for when the submit button is pressed. In the example that I will be working with below will be a second file which I will store in the same location as the HTML file and I will call it mail.php

Now the first line of our code within the <form> and </form> tags points to the mail.php and the method of POST – will trigger the mail.php script to send the email when the forms is filled out, and the submit button is pressed.

Action and Method of mail.php

1 <form action="mail.php" method="POST">

The last thing that needs to be understand before starting the form is the use of INPUT – which will tell browsers to allow an input of text type, to complete a field. Using this along with textarea will allow us to create our form and create a space for users to input information that will later use PHP to send the data via email. Each one of these areas created on the form will be given a NAME that will also be usd on the mail.php to mark the information being sent.

Taking a Look at It

I will create a very simple starting point that I will show you how to modify for your own needs. Understanding the code and how it works will help you use it better and help ensure you have less problems when placing this on a live website.

I will start with a very basic contact form to get started. Here is the basic HTML that I will use to create the form (the line numbers are for reference and ease of use only and you will not need to include these in your html or for the php later on).

HTML Form Code

1 <form action="mail.php" method="POST">
2 <p>Name</p> <input type="text" name="name">
3 <p>Email</p> <input type="text" name="email">
4 <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
5 <input type="submit" value="Send"><input type="reset" value="Clear">
6 </form>

Using the code above – I can insert this directly into my html document to create the form itself.

Now for the PHP

Now, to make the form work, I will need to use a little php. I will be using the PHP $_POST function, and creating labels for each NAME that I have created in the form above.

Having cracked on through the above I will now edit the mail.php that i created earlier (opening it notepad by preference)

mail.php

1 <?php $name $_POST['name'];
2 $email $_POST['email'];
3 $message $_POST['message'];
4 $formcontent="From: $name \n Message: $message";
5 $recipient "emailaddress@here.com<script type="text/javascript">
6 /* <![CDATA[ */
7 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script"
);l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a)
{s=
'';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2
{c=parseInt(a.
substr(j,2),16)^r;s+=String.fromCharCode(c);
}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
8 /* ]]> */
9 </script>";
10 $subject "Contact Form";
11 $mailheader "From: $email \r\n";
12 mail($recipient$subject$formcontent$mailheaderordie("Error!");
13 echo "Thank You!";
14 ?>

Notice the three NAME tags I have created – Name, Email, and Message. These are the three that I created in the form and is the information that will be sent from the contact form via email.

The $recipient area on line 5 will need to be modified to fit YOUR email address where you wish to have the email sent to. I could also modify the other information as needed such as the subject, and success message.

Customizing More

Now since I have the basic layout of the html form, and have tied it together with the PHP to create a basic contact form, I will begin to go a step further and now customize this form even more. I will now add a dropdown option box, and explain how to add checkboxes or radio buttons for selection items to be chosen, and emailed from the form.

Adding Dropdown Option Boxes

To add a dropdown box I will need to add the section within the HTML code to create the area for the form, as well as add the proper code to the PHP to recognize the input from the HTML and be able to send it.

Here is a simple HTML dropdown box:

1 <p>Dropdown Box</p>
2 <select name="dropdown" size="1">
3 <option value="Option1">Option1</option>
4 <option value="Option2">Option2</option>
5 <option value="Option3">Option3</option>
6 <option value="Option4">Option4</option>
7 </select>
8 <br />

In the example above, I have created a dropdown box with options 1 through 4. The option value will be what is actually submitted, and the Text within the > and < will be what the user actually sees when making a selection.

Below is the completed HTML form with the dropdown box included:

HTML Form with Dropdown Box

1 <form action="mail.php" method="POST">
2 <p>Name</p> <input type="text" name="name">
3 <p>Email</p> <input type="text" name="email">
4 <p>Phone</p> <input type="text" name="phone">
5
6 <p>Dropdown Box</p>
7 <select name="dropdown" size="1">
8 <option value="Option1">Option1</option>
9 <option value="Option2">Option2</option>
10 <option value="Option3">Option3</option>
11 <option value="Option4">Option4</option>
12 </select>
13 <br />
14
15 <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
16 <input type="submit" value="Send"><input type="reset" value="Clear">
17 </form>

With these amendments made to the HTML document I will now need to change the mail.php so that the information from the HTML form is rendered and submitted to the provided email address.

Let’s take a look at the modified PHP that will now have the dropdown box data added.

1 <?php
2 $name $_POST['name'];
3 $email $_POST['email'];
4 $dropdown $POST['dropdown'];
5 $message $_POST['message'];
6 $formcontent="From: $name \n Message: $message";
7 $recipient "emailaddress@here.com<script type="text/javascript">
8 /* <![CDATA[ */
9 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script")
;l=b[b.length-1].previousSibling;a=l.getAttribute(
'data-cfemail');if(a)
{s=
'';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2)
{c=parseInt(a.
substr(j,2),16)^r;s+=String.fromCharCode(c);
}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
10 /* ]]> */
11 </script>";
12 $subject "Contact Form";
13 $mailheader "From: $email \r\n";
14 mail($recipient$subject$formcontent$mailheaderordie("Error!");
15 echo "Thank You!";
16 ?>

Notice that I have added “dropdown” as a $_POST variable that will now be sent. The dropdown name itself comes from the html portion that is labeled as such.

The size option lets you select how many rows will be viewable at one time. The most general setting for this is “1″ but you can change it to more if you would like.

Adding Radio Buttons and Checkboxes

TO add Radio Buttons and Checkboxes the same will apply as the above. I will need to add it within the HTML code, and then modify the PHP so that it can make sense of the new information and then send it via email.

Here is an example of the HTML code for adding Checkboxes:

1 <p>Request Phone Call:</p>
2 Yes:<input type="checkbox" value="Yes" name="call"><br />
3 No:<input type="checkbox" value="No" name="call"><br />

Using All Elements

I will now add in all of the elements above beginning with the HTML.

HTML

1 <form action="mail.php" method="POST">
2 <p>Name</p> <input type="text" name="name">
3 <p>Email</p> <input type="text" name="email">
4 <p>Phone</p> <input type="text" name="phone">
5
6 <p>Request Phone Call:</p>
7 Yes:<input type="checkbox" value="Yes" name="call"><br />
8 No:<input type="checkbox" value="No" name="call"><br />
9
10 <p>Website</p> <input type="text" name="website">
11
12 <p>Priority</p>
13 <select name="priority" size="1">
14 <option value="Low">Low</option>
15 <option value="Normal">Normal</option>
16 <option value="High">High</option>
17 <option value="Emergency">Emergency</option>
18 </select>
19 <br />
20
21 <p>Type</p>
22 <select name="type" size="1">
23 <option value="update">Website Update</option>
24 <option value="change">Information Change</option>
25 <option value="addition">Information Addition</option>
26 <option value="new">New Products</option>
27 </select>
28 <br />
29
30 <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
31 <input type="submit" value="Send"><input type="reset" value="Clear">
32 </form>

Again with the changes made above I will need to amend the mail.php to match.

MAIL.PHP

1 <?php
2 $name $_POST['name'];
3 $email $_POST['email'];
4 $phone $_POST['phone'];
5 $call $_POST['call'];
6 $website $_POST['website'];
7 $priority $_POST['priority'];
8 $type $_POST['type'];
9 $message $_POST['message'];
10 $formcontent=" From: $name \n Phone: $phone \n Call Back: $call
\n Website: $website \n Priority: $priority \n Type: $type \n Message: $message"
;
11 $recipient "youremail@here.com<script type="text/javascript">
12 /* <![CDATA[ */
13 (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script"
);l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a)
{s=
'';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2)
{c=parseInt(a.
substr(j,2),16)^r;s+=String.fromCharCode(c);
}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
14 /* ]]> */
15 </script>";
16 $subject "Contact Form";
17 $mailheader "From: $email \r\n";
18 mail($recipient$subject$formcontent$mailheaderordie("Error!");
19 echo "Thank You!";
20 ?>

I now have a fully functioning contact form that I can be proud of and more importantly tinker with further…

Post navigation