HTML
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 |
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.
Redirect your HTML pages without using Javascript or PHP
This tutorial will show you to redirect users to another webpage without using header and other PHP methods. It’s actually very simple, just one line of HTML code.
Place the code in the head tag of you HTML page :
<meta http-equiv="Refresh" content="1 |
In the Content attribute there is the number 1, and an URL. The number 1 represents the number of seconds until the redirection is made, and the URL is the web address the user is redirected to.
For more tutorials head over to our tutorial site
Sunday Design Resource - Issue 2
For the second issue of the Sunday Design Resource, we’ll be pointing out some HTML Tutorial websites. These websites cover all aspects of web design, beginning with the basics and going through hints, tricks and optimizing your code to make it W3C Compliant.
W3C Website. Probably the first, most complete and up-to-date HTML tutorials website. W3C is the abbreviation to World Wide Web Consortium, and it’s an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C’s goal is :
To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.
On this website you’ll find everything you need to know about HTML, and not only HTML. There are extensive resources about CSS, also. The downside is accessing that information. The site’s navigation is pretty basic, being organized just like the contents of a book (organized by chapters). Getting to the HTML part requires some dose of intuition, but once you get there all your questions will be answered. The information database is vast containing everything you need to know about HTML, including the latest developments in this field (HTML5). As a conclusion, navigation aside this is the website you wanna visit if you want to learn all about HTML.
If you’re looking for web design and other services for your company, our site can help promote your online business with business checks and magnets as well.
W3Schools is a website containing information about all aspects of web development, from basic HTML training to advanced .NET tutorials.
The website’s navigation is very good and intuitive, consisting of a left column with the topic you want to learn about (HTML, XHTML, CSS, PHP, ASP etc). The HTML part is excellently organized using the same navigation style as stated before. It’s divided into 2 main chapters (Basic and Advanced). After reading the basic and advanced tutorials you have the opportunity to check you knowledges by taking a quiz, or even by taking an exam (for about 60$) which will grant you the title of Certified HTML Developer at the end. What we liked about this website were the HTML examples. The example database is quite extensive and covers all the aspects of HTML. As a conclusion W3Schools in an excellent website with tons of information, but a bit hard to read because each page is a bit too “loaded”.
HTML Code Tutorial. This website is not as complete as the other two. It’s build as a beginners guide to HTML and CSS.
Although not as complex as W3C and W3Schools, the website has an excellent navigation system. The content is organized by topics. An interesting thing is that the website offers a Popular Articles Section. A big minus is the site’s search system. It’s not self implemented, it’s a Google Search Box. What we really loved about this website is the forum. It’s pretty big, with lots of helpful users and topics. You find here answers to any problem you may have. Concluding, HTML Code Tutorial is a good website with a decent amount of information, an excellent navigation system (needed as the search function is pretty basic) a great forum with lots of helpful members, but with a bit too much advertising.
Additional HTML resources :
Cool CSS animated menu - MacOS style
Ever wondered how they made that cool MacOS bottom menu, with icons that become larger when the cursor is on top of them? Well .. with some neat tricks.
This CSS Animated Menu does exactly that. It’s based on JQuery Java script library and Fisheye component from Interface. It’s 100% compatible with IE 6, IE 7, Opera 9, Firefox 2, and Safari 2. You may see a demo here and you can download and find out how to implement it in your HTML page here.
Internet Retailer Web Design ‘08 Conference
The conference will be held in Miami, Florida from January 30 to February 1, 2008.
Most e-commerce websites focus on increasing their traffic rate, but it’s just as important to convert this traffic into actual customers. After all what is the point oh attracting visitors who make no or very few purchases. We aren’t talking here just about products, we are talking about services too. This is the point of view shared by Jack Love, Publisher of Internet Retailer Magazine. He states that :
If your web site is converting to buyers 3% of shoppers who visit it, congratulations—you’re hitting the average conversion rate for retail web sites. But think how much more money your site would make if you could just double that rate. You’d get twice the online revenue from the same number of visitors, same investment in marketing, and same web staff. The incremental ROI would go off the charts.[…] We think doubling of conversion rates should be an industry goal, and the primary way to achieve it is through more inviting and customer-friendly web site designs.
Although the magazine already produces the annual Internet Retailer Conference & Exhibition, they see this new conference as its first single topic conference: Web Design ‘08, which will be held at the beautiful new InterContinental Hotel in Miami on January 30-February 1. The two-day event will feature 37 speakers covering such topics as Creating the customer-centered design; Eye-tracking: The eyes have it; and How to keep a design fresh. Attendees will also be able to take advantage of up to three 30-minute private consultation sessions with web design firms, who will review the attendee’s site and provide tips for increased conversion and usability.
More information on the Internet Retailer Magazine’s website.
