Designing a stylish contact form for your portfolio

This tutorial will show you how to design a stylish, custom contact form for your website / portfolio from scratch. It will cover all the aspects of the design including the CSS and HTML coding and PHP programming.

The result will be a fully functional, personalized contact form and will look like this :

As you can see the contact form consists of 2 parts : one containing the contact information of the sender, labeled “Your contact information” and one part regarding the sender’s message, labeled “Your message“. Each part represents, as you will see below, a fieldset tag, and both are integrated in a form tag. The form also integrates a very simple and basic captcha system that you will see works pretty well, considering most spammers aren’t concerned about portfolio websites, so they don’t use advanced spam robots to trick these contact forms. A more advanced captcha system can be developed using a database and an array in PHP or can be found can be found on the internet (for example here).

For the HTML part you will need some basic knowledge of some HTML tags like : form, fieldset, label and input. As I said before the form is composed by 2 fieldsets. The first fieldset, “Your contact information“consists of 3 text inputs, namely “Name“, “E-mail“, “Subject“. As you can see in the code below we are using labels to name the inputs and p tags to align them 70px to the right (this can also be done via the CSS file).

The most important thing regarding the input tags is their name attribute. We named each input according to what it does, “name“, “email“, “subject“. Remember these as we will use them in the PHP file.

The second fieldset contains the message box defined by a textarea tag with 7 rows and 50 cols (these are attributes that define the textarea’s height and width) . It also includes the input for the captcha and a special kind of input, for the submit button. For this fieldset too it’s important to remember the name attributes of each input and textarea, namely “comments“, “spam” and “submit“.

<form action="contact.php" method="POST">
<fieldset>
<legend>Your contact information</legend>
<p style="margin-left:70px">
<label><strong>Name:</strong></label>(required)<br />
<input type="text" name="name" value=""  />
</p>
<p style="margin-left:70px">
<label><strong>E-mail:</strong></label>(required)<br />
<input type="text" name="email" value="" />
</p>
<p style="margin-left:70px">
<label><strong>Subject:</strong></label>(required)<br />
<input type="text" name="subject" value="" />
</p><br />
</fieldset>
<fieldset>
<legend>Your message</legend>
<p style="margin-left:70px">
<label><strong>Message:</strong></label>(required)<br />
<textarea name="comments" rows="7" cols="50" ></textarea>
</p>
<p style="margin-left:70px">Security code : <strong>56728</strong><br />
<label><strong>Please enter the code you see above :</strong></label>(required)<br />
<input type="text" name="spam" value="" />
</p>
<p style="margin-left:70px">
<input class="button" name="submit" type="submit" value="Send" />
</p>
</fieldset>
</form>

As you can see the form calls a file called “contact.php“. This is the PHP file that we’ll actually use to send the email message.

We created the HTML form. It’s time to dress it up a little. We”ll do this by defining proprieties for the inputs and textareas in the CSS file.

As you can see we defined 3 proprieties for the inputs and textarea, one in the normal state, one on hover (when the mouse is over it) and one on focus (when you actually click on it and start typing text). The hover and focus states are identical in this case, but you can define them individually. As you can see when we hover over the inputs and textareas this image is loaded in the top right corner. Also the color of the border changes from #666666 to #000000. There are virtually unlimited possibilities on what you can in terms of style with these textareas and inputs and depends only on one’s creativity.

input, textarea {
border:1px solid #666666;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:1em;
margin:0;
padding:4px;
background:#fff;
}
 
input:focus, input:hover,textarea:focus, textarea:hover{
border: 1px solid #000;
background:url(../images/contact_crazyleaf.gif) top right no-repeat;
}
 
label {
margin:2px;
}
 
input {
width:300px;
}
 
.button {
margin:0 0 15px 0;
background:url(../images/div_back_contact.gif);
color:#000;
font-weight:bold;
width:310px;
}

Minor alignment adjustments are also a must so everything aligns perfectly. The contact form is the last thing standing between you and the client. You want it to be as perfect as it can be.

This is the really tricky part.

First off you need to create a file (with Notepad or other text editor) called contact.php You can name this file anyway you like, just remember the name of the file must be identical to what you input in your action attribute on your HTML form. Additionally you have to create 2 more HTML files, one called thankyou.html, and one error.html. The first file will be loaded if the information from the form has been send successfully and the second one in there were errors.

The PHP file consists of multiple parts. The first part defines some constants, like the email address the information will be sent to ($mailto), the URL that contains the HTML form that is collecting the information ($formurl), the URL of the thank you page ($thankyouurl), and the URL for the error page ($errorurl).

The second part reads the information sent by the HTML form. Remember when I said it’s important to remember the name attributes of each input and textarea? Well, this is where we use them. This part of the script takes each value inserted in each input and textarea and inserts it into a PHP variable.

The third part verifies with two PHP if instructions if the required fields have been completed and if the basic captcha has been entered correctly. If so the script passes to the final part, if not the error page will be displayed.

The forth and last part of the script composes the message and sends it to you (to the mail address defined in the first part of the script, in the configurable area).

<?
$mailto = 'name@name.com' ;
$subject = "Contact form message - Crazyleafdesign" ;
$formurl = "http://www.yoursite.com/contact.html" ;
$errorurl = "http://www.yoursite.com/error.html" ;
$thankyouurl = "http://www.yoursite.com/thankyou.html" ;
 
// -------------------- END OF CONFIGURABLE SECTION ---------------
 
$name = $_POST['name'] ;
$email = $_POST['email'] ;
$subject = $_POST['subject'] ;
$comments = $_POST['comments'] ;
$spam=$_POST['spam'] ;
$http_referrer = getenv( "HTTP_REFERER" );
 
if (!isset($_POST['email'])) {
	header( "Location: $formurl" );
	exit ;
}
if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="56728") {
   header( "Location: $errorurl" );
   exit ;
}
$name = strtok( $name, "\r\n" );
$email = strtok( $email, "\r\n" );
$subject = strtok( $subject, "\r\n" );
if (get_magic_quotes_gpc()) {
$comments = stripslashes( $comments );
}
 
$messageproper ="---------- Crazyleafdesign.com message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\n\n\nMessage : " . $comments;
 
mail($mailto, $subject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" );
header( "Location: $thankyouurl" );
exit ;
?>

That’s about it. The form is complete. You can see it in action on our site.

A custom contact form with an upload field will be available in one of our future tutorials.