Basic Contact Form
For any website having a decent contact form is very important. With hundreds of structured contact forms out there, we barely get a chance to really make the form the way we want. As a designer or a developer, having that freedom is very important because we want to make masterpieces that define who we are and leave traces of ourselves. To help you with that, here is an idiots guide (I’m not calling you an idiot, just describing how simple this tutorial is) to creating a simple php contact form.
Before we even begin, we need to first decide what we want in the contact form. A general contact form has an input field for the senders name, e-mail, website, subject and a text area. Some even have drop-down options for subject field or even to select the priority level of the message you are sending. Once you decide what you want, we can get started.
The PHP processing file
This is a very important file. This php file will be the mastermind in sending/submitting the forms. Let’s call this file process.php. Many would call this the mail.php but why really? The main purpose of this file is to process the submitted information right? So why not name it properly. But if you really like, you can call it whatever you wish.
Now let’s start with the must have for any php file <?php and ?>. In this we will enter the information for all form fields we will have
<?php //Collecting Basic Information $name = $_POST['name']; $email = $_POST['email']; $website= $_POST['website']; $subject= $_POST['subject']; $message= $_POST['message']; //The Form Content $formcontent = "From: $name n E-Mail: $email n Web-Site: $website n Subject: $subject n Message: $message"; //Who is this going to $recipient = "email@example.com"; //Mail Subject $mailheader = "A Message From $name rn"; mail($recipient,$subject,$formcontent,$mailheader) or die ("Error Processing Mail!"); //Message Sent Notice echo "Thank you for contacting me. Your Message has been submitted successfully"; ?>
The content is quite self explanatory but for those that do not understand here’s a brief explanation. At first what we did was get the data from the input field (in this case the posted data). Like I mentioned before, you can always have dropdown options. Dropdowns, luckily, are processed the same way as any input field:
$dropdown = $_POST['dropdown'];
You can also have radio buttons and check buttons for “I agree to the terms and conditions” fields. Next we took that data and compiled it in a format that we would like to see when we receive the email. Next we decided who the recipient is. So please do replace firstname.lastname@example.org with your correct email. Next we went ahead and assigned a custom message header respectively named $mailheader. We always want a message header that is friendly, so why not make it our self right? For those who have more than website in which they have a contact form, I would recommend you put the web-site’s name at the beginning instead of “A Message From.” It makes it a lot easier to keep track of where the message is coming from. The $mailis the main process that handles sending the information. Now for the grand finale, the thank you message. When a guest doesn’t know that their message has been submitted, they will 87% of the time re-submit the form (87 is a number from the top of my head that I think more than likely fits this case). You can always use javascirpt re-direct or place a small link to take the visitor back to the previous page.
Here is the part where you have actual freedom to customize. Thanks to the invention of CSS and (I hate to admit it) Tables, we have been able to customize the look and feel of forms for years. Now primarily using CSS, forms come in many styles, colors and even shapes. Yes I said it shapes. You can check out the styles by simply searching our best friend: Google. I’m not going to waste your time explaining how you can customize your fields, so instead I’ll link you to HTMLForums. Here is a basic look at non-styled form for our simple contact form.
<form action="process.php" method="POST"> <label for="name">Your Name:</label> <input id="name" title="Type you name" type="text" name="name" /> <label for="email">Your E-Mail:</label> <input id="email" title="Type in you website" type="text" name="email" /> <label for="website">Your Website:</label> <input id="website" title="Type in you website" type="text" name="website" /> <label for="subject">Your Website:</label> <input id="subject" title="Type in you website" type="text" name="subject" /> <label for="dropdown">DropDown</label> <select name="dropdown"> <option value="Support">Support Department</option></select> <select name="dropdown"><option value="HTML">HTML Help</option></select> <select name="dropdown"><option value="Beer">Buy Me Beer</option></select> <label for="message">Your Message</label> <textarea name="message" rows="6" cols="25"></textarea> <input type="submit" value="Send" /><input type="reset" value="Clear" /> </form>
Template Contact Form
There are a number of you that requested a php processor file for the contact form. Here is a simple contact form that you can easily integrate to with the Catharsis theme.
Call this template comment.php or processor.php
Next open up the contact page. Find
<form action="#" method="post" name="contact_form">
Change this to:
<form action="#" method="post" action="contact.php" name="contact_form">
Note that the contact.php must match the name and path of the php processor file. Also make sure that all fields are properly named as in the processor file.