Total Followers 132,503
I am sure that almost everyone can agree on the importance of contact forms for use on everything from static HTML websites, to WordPress powered websites. I found myself many times creating custom PHP contact forms for clients and always changing things around to suit the needs of the client.
After going through this article you should have a better understanding of creating custom PHP contact forms. These can be really useful in your own projects, as well as projects for clients. I have used these for basic contact forms, surveys, and even to create simple help desk ticket systems for clients. The list is endless, just be creative. I will discuss everything that you will need to know to make your own custom HTML and PHP forms.
Update 2013: free contact form in HTML5 and CSS3
First things first – To create a form in our HTML document, we will need to select the location we will be placing the form. Generally, most forms will start with:
<form>
and end with the closing tag of:
</form>
The form action will tell this form what to look for when the submit button is pressed. In this example we will be working with below, this is a second file that we will be creating called mail.php
The beginning line of our code that begins our form shows our action of mail.php – and the method of POST – which will trigger the php script to send the email when the forms is filled out, and the submit button is pressed.
<form action="mail.php" method="POST">
The last thing we will need to understand before starting our 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 we will later use PHP to send via email. Each one of these areas we create on our form will be given a NAME that we will also be using on our PHP document to mark the information being sent.
Now let’s begin our example. We 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 us started. Here is the basic HTML that we will use to create our form.
<form action="mail.php" method="POST"> <p>Name</p> <input type="text" name="name"> <p>Email</p> <input type="text" name="email"> <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br /> <input type="submit" value="Send"><input type="reset" value="Clear"> </form>
Using the code above – You can insert this directly into your html document to create the form itself. Later we will look at modifying this more and creating something a little more custom.
Now, to make our form work, we will need to use a little php. This part is actually easier than most people think. We will be using the PHP $_POST funtion, and creating labels for each name that we have created in our form. This will allow us to further customize the form later on as well.
Now we will create our mail.php file – This is what will generate the email from the form and actually mail it:
<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
Notice our three name tags we have created. We have Name, Email, and Message. These are the three that we created in our form. This is the information that will be sent from our contact form via email.
The $recipient area will need to be modified to fit YOUR email address where you wish to have the email sent to. You can also modify the other information as needed such as the subject, and success message. We will get more into these later when we begin customizing the form even more.
Now since we have the basic idea of the html form, and tieing it together with our PHP to create a basic contact form, I will begin to go a step further and now show how you can customize this form even more to fit your needs for your project. I will show how to add a dropdown option box, and explain adding checkboxes or radio buttons for selection items to be chosen, and emailed from the form.
To add a dropdown box we will need to add the section within our HTML code to create the area for the form, as well as add the proper code to our PHP to recognize the input from the HTML, and be able to send it.
Here is a simple example HTML dropdown box:
<p>Dropdown Box</p> <select name="dropdown" size="1"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <br />
In the example above, we have created a dropdown box with options 1 through 4. The option value will be what is actually submitted, and the Text within the will be what the user actually sees when making a selection. Remember that this will need to be inserted into your html document within the form fields.
Here is an example of the completed HTML form we have created with the dropdown box included:
<form action="mail.php" method="POST"> <p>Name</p> <input type="text" name="name"> <p>Email</p> <input type="text" name="email"> <p>Phone</p> <input type="text" name="phone"> <p>Dropdown Box</p> <select name="dropdown" size="1"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <br /> <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br /> <input type="submit" value="Send"><input type="reset" value="Clear"> </form>
Now we will need to change our PHP to make sure the information from the HTML form is rendered and submitted to the provided email address.
Let’s take a look at our modified PHP that will now have the dropdown box readable.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$dropdown = $POST['dropdown'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
Notice that we 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
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.
TO add Radio Buttons and Checkboxes the same will apply as the above. We will need to add it within our HTML code, and then modify the PHP to take the input from the HTML form and properly send it.
Here is an example of the HTML code for adding Checkboxes:
<p>Request Phone Call:</p> Yes:<input type="checkbox" value="Yes" name="call"><br /> No:<input type="checkbox" value="No" name="call"><br />
For this example I have changed some of the names to we can create a custom contact form for our completed example now that we have a basic understanding of the way it works.
Our HTML Form
<form action="mail.php" method="POST"> <p>Name</p> <input type="text" name="name"> <p>Email</p> <input type="text" name="email"> <p>Phone</p> <input type="text" name="phone"> <p>Request Phone Call:</p> Yes:<input type="checkbox" value="Yes" name="call"><br /> No:<input type="checkbox" value="No" name="call"><br /> <p>Website</p> <input type="text" name="website"> <p>Priority</p> <select name="priority" size="1"> <option value="Low">Low</option> <option value="Normal">Normal</option> <option value="High">High</option> <option value="Emergency">Emergency</option> </select> <br /> <p>Type</p> <select name="type" size="1"> <option value="update">Website Update</option> <option value="change">Information Change</option> <option value="addition">Information Addition</option> <option value="new">New Products</option> </select> <br /> <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br /> <input type="submit" value="Send"><input type="reset" value="Clear"> </form>
And again, our PHP that will correspond with this HTML form to make it work:
Our completed PHP
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$call = $_POST['call'];
$website = $_POST['website'];
$priority = $_POST['priority'];
$type = $_POST['type'];
$message = $_POST['message'];
$formcontent=" From: $name \n Phone: $phone \n Call Back: $call \n Website: $website \n Priority: $priority \n Type: $type \n Message: $message";
$recipient = "youremail@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
Now for the final part of this tutorial I will explain how to customize the very last line of our PHP script we have created. The basic way will just echo “Thank You” on our screen, but we need to make a better way so our viewers can easily have a way to get back to another page. This will be useful in creating a custom page redirect, or a link to bring the user to a different area after completing the form. Remember that when working with PHP, some of the HTML will be different as to not disrupt our PHP code.
We will need to use single quotes ‘ instead of double quotes ” within this one, so we don’t end our php arg.
We will be adding a space after the “thank you” message, and adding a link back to our “form.html” document (Or whatever link you wish to create) – and also changing the color of the link using inline styles.
Let’s take a look at the modified echo command in our mail.php file:
echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
You can play around with the example above to create your own thank you message for your site. Inline styles are not required, I just used them for this example instead of including a stylesheet. Remember that the echo command is only seen on a successful send of the message. Otherwise, the error message is sent.
I am providing the download for the completed form for you to play with. Feel free to use it any way you wish, and customize it for your own projects. There are still many other things that can be done with PHP for your contact forms. One that you might want to consider is CAPTCHA, which prevents spam email. You can also customize the other portions of the form and create your own! Have fun, and I hope that everyone has enjoyed the article and finds it useful for their own needs. You can download the example files by clicking [HERE]
Note: I have included a few styling examples using CSS in the demo download. This will allow you to see the forms styled and understand how to style them using CSS.
Get The Only Freelancer crash course you will ever need to read!
My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.
Monday, May 14th, 2012 19:01
I am so glad you created this help file! You really helped me to resolve some issues I had on getting my form to work for my web design class! Thank you! Only one question I have is with checkboxes: When all 6 boxes are selected, I only get the last value, not all of them. I used $interested_in = $_POST['interested_in'];
Is there some other consideration when multiple values can be selected? How do I make sure all values are successfully transmitted? Thanks.
-Katie
Saturday, April 28th, 2012 12:45
Awesome tutorial, thanks!
Also, if you want to redirect user who send email, simply put this code in mail.php just behind “$mailheader” line:
header("Location: email-send.php");
This will redirect user to page “email-send.php”, where you can put your “thank you page” ;)
Monday, March 26th, 2012 13:36
Hello,
To contact an advert owner, the users will have to fill a contact form which will be send to the owner email(hotmail,yahoo,…), but the php script is hardcoded so how i will be able to do it?is it possible to write a script which can be use for all the contact form without modifying it each time a user is contacting different Ads owner?please can anybody help me out!!!…
Thank you.
Friday, March 23rd, 2012 04:35
Thank you for sharing this!!! It really helped me out. I did however run into a problem. My form has about 15 fields and 5 of them are drop down menus. Well after I loaded the files to my server all the drop downs went missing. If i hover over where they use to be and click the drop down menu re-appears. How would I make them reappear permanently? Thanks again!
Eric
Saturday, March 17th, 2012 08:32
Thanks for posting this. It helped with a client’s site. You rock!
Wednesday, March 14th, 2012 22:25
Hey, great tutorial. However, I have a problem: When I try to submit the form, instead of emailing me and providing the thank you message, it downloads the php page. When I run the .html page in my browser, it shows up fine but when I click send it downloads mail.php, instead of working.
Any suggestions?
Monday, March 5th, 2012 19:39
I can’t get the drop down menus to show correctly in the email body. The new line seems to be ignored and they just appear in one long line, any ideas?
Monday, March 5th, 2012 09:39
This tutorial is very useful for me
Friday, March 2nd, 2012 11:49
Hi how would you change the script to include a copy of the form being sent to the person who filled in the form?????????
Thanks
Wednesday, February 22nd, 2012 20:26
ALWAYS, I mean ALWAYS, literally *always* sanitize user input. If somebody decides to store this in any other way besides sending via e-mail (@ESTEBAN pointed out correctly, that wp_mail() is available), or echo out the thank you message with the $name in it, XSS will become an immensely huge problem. Validation and sanitization of user input should ALWAYS be touched upon when dealing with the topics of forms. Besides, WordPress has great functions such as is_email(), esc_attr(), get_the_content() even, that can be used to sanitize and provide a more secure environment, without rolling their own functions.
Safe!
Wednesday, February 8th, 2012 03:37
This is GREAT!!! THANK YOU THANK YOU!!!!!!!!!!!!!!!!
Thursday, January 26th, 2012 11:43
hey i want to know that where to upload my swf file ,php and logo for contact form active on my blog
Wednesday, January 25th, 2012 22:07
I must be totally stupid I can’t figure this out.. is there anyone that does php scripting that can tell me what I’m doing wrong? Maybe my form is too darn complex.. imagine that LOL
If anyone has any insight to help or if Kevin will email me that’d be friggin awesome!!
Tuesday, January 24th, 2012 21:20
Why not use wp_mail() ?
Wednesday, January 18th, 2012 21:25
This has been a great tutorial, but it seems that I am having trouble actually receiving emails for the form. Additionally the “Thank You” and page redirect are not working.
Thanks for any help you can offer.
Monday, December 19th, 2011 15:05
Hi excellent tutorial, however what if they have what multiple option selection for radio button or check box how do i read in all the values, give each radio box a unique name?, but what if not all radio buttons are checked.
thanks man,
Philio
Monday, December 5th, 2011 22:59
Awesome work.
Very lucid.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
giedrius majauskas
Monday, September 27th, 2010 12:13
I think this is the best way to get your website in multiple black lists.
Why? because this form is superb to spammers. It performs no data sanitization,
And spammers can construct additional headers into message.
This allows them to spam other people USING your webserver without you even knowing it.
Katieful
Friday, October 1st, 2010 03:16
I tried this on my portfolio and when I press submit, I get a blank white page and no email. Do you know what could be the problem? I only have text fields, and I put the following in a separate document called mail.php:
Is it because I’m testing it on a local folder and it needs to be on a server to work?
Kevin Stanley
Saturday, October 2nd, 2010 04:32
PHP needs to be ran online. Unless you are set up for it locally, it will only work when placed online.
Brad Billman
Friday, October 1st, 2010 19:08
It definitely needs to be on a server. Or at least something with php installed. You could use WAMP on your windows machine to run php scripts.
Katie
Monday, October 4th, 2010 01:46
Yeah, I thought that was it. Thanks!
meo;
Thursday, September 30th, 2010 14:59
Great tutorial for a newbie like me.
Commenters highlight that validation, verification and sanitation is absolutely necessary – please could they post links to their tutorials/trusted tutorials detailing the steps?
re1jo
Tuesday, September 28th, 2010 11:12
Unsafe code, don’t use straight without input sanitation.
Kevin Stanley
Thursday, September 30th, 2010 13:00
I have mentioned that already. This tutorial is to show the use of HTML forms and PHP. The code should not be used without some form of sanitation.
Stacy
Tuesday, September 28th, 2010 11:15
Thanks for another really useful tutorial! Just one query – how do you make the input fields mandatory? I know this is possible but can’t find out how to do it.
Kevin Stanley
Thursday, September 30th, 2010 13:02
There is a really good and very simple way using JavaScript to make fields mandatory. Search for it online and I am sure you will find it.
Brad Billman
Friday, October 1st, 2010 19:12
Javascript will be the “prettiest” way to make them required but people can disable javascript so you can just do a check in php like if(!$_POST['example']) or if(!isset($_POST['example']) and if either of these return true then do not finish the submission and return and error like “example is a required field” I suggest repopulating all of the boxes that they did fill in so they don’t have to.
Brad Billman
Friday, October 1st, 2010 19:14
You also want to add http://www.google.com/recaptcha a free captcha so that bots can’t just spam flood your email.
Dave Mellett
Monday, September 27th, 2010 12:58
Nice, clear explanation of how a php contact form works. Hardly kick-ass though, this would have to be seriously upgraded for production.
Bijayswain
Saturday, October 30th, 2010 03:40
How to make some fields mandatory ? Can any one give code to do this in the above example ?
Bijayswain
Saturday, October 30th, 2010 03:43
we have a Local webserver on our interanet using windows2003 server.
and also have a local domino mail server in our interanet. can i use this code to create a form on our local webserver and send forms via local mail server. what are the requirements and how to do it ?
Suzanne
Saturday, November 6th, 2010 17:46
Any recommendations on god validation? The tutorial is great, but having all info in one place would be even better! thanks :)
Bijayswain
Friday, October 29th, 2010 09:51
Great Information. I needed this badly.
Thank U Very Much
PDC
Sunday, October 10th, 2010 21:41
Kevin, great tutorial, and I apologize for all the disparaging comments made by other people. Why they are wasting their time complaining to you about validation and sanitation, I don’t know, if they know enough code to get through this tut then they should be able to tackle those issues by themselves. This isn’t an advanced tutorial (but there isn’t anything wrong with that), and there is a lack of good php form tutorials out there so I’m really thankful you had the patience to put this one together. I just wanted to say thanks a bunch, and keep of the great work!
Christoph
Tuesday, September 28th, 2010 10:11
I find this article very useful for learning the basic techniques behind a php contact form (as mentioned before with the need to add certain features, like validation, spam-protection. etc.). What bothers me is the article’s title… today, everything is “kick-ass”, “awesome”, and “breath-taking”. Of course you get the people’s attention with such titles, but sorry, this is a really nice basic tutorial, but it’s not “kick-ass” :)…
Kevin Stanley
Thursday, September 30th, 2010 13:02
Don’t hold me responsible for the title. It was posted that way, and I just wrote the tutorial :)
Validation is a must, as well as spam protection. This tutorial was meant to show the use of HTML forms and PHP.
Thanks for the comment!
wqs
Monday, September 27th, 2010 21:25
cool yaar…very good looking form
Wong
Monday, September 27th, 2010 14:52
Love it! But can add in a hidden form and check the form for spam too?
Jean-Baptiste
Monday, September 27th, 2010 15:11
What about “labels” before the “input” instead of “p” ?
With of course “for” attributes relative to input’s “id” ?
Whatever, thanks for the tutorial !
Jimmy
Monday, September 27th, 2010 15:29
Hi,
It is imperative to sanitize all input data.
It can be used to evil purposes just by changing the email input to a textarea and typing
some@mail.com \nBcc: someother@mail.com, another@mail.com, more@mail.com, …, ninetyninebottlesof@wineinthewall.com
Nice blue form tho.
Brian Cline
Wednesday, October 6th, 2010 05:36
Sanitizing the email field and validating the fields are filled was the first thought I had when I finished the email.
I believe we are doing any designers or other person building a website a strong disservice when we include code that is said to do exactly what the user needs but includes absolutely no security.