Dress Up Your Contact Form
August 29th 2008 Posted at General Information
1 Comment
Previously I wrote about how to get a free Contact Form and set it up on your blog. As it is free, it is also quite generic. In this post we will look at adding some branding and text for helping your readers start a conversation with us.
By adding a couple of CSS files we can create boxes for the form itself and for instructions. First, open your Notepad or other text editor and paste the following text into it:
/* Layout Stylesheet */
body{
margin: 10px;
padding:0;
background: #808080;
color: #333333;
}#lh-col{
position: absolute;
top: 20px;
left: 20px;
width: 200px;
border: 1px solid #ff3300;
background: #ffffff;
color: #333333;
margin: 10px;
padding: 10px;
height: 480px;
}#rh-col{
margin: 20px 20px 20px 250px;
border: 1px solid #000000;
background: #ffffff;
color: #ff3300;
padding: 20px;
}
Then edit the colors to match those of your blog or site, for example #ff3300 is the orange color that I use for headings, etc. Save this as layout.css then open a new text file and paste in the following:
/* Presentation Stylesheet */
h3{font-size:1.5em;color:#ff3300;}
Save this as presentation.css and upload them into the same folder as your Contact Form files.
Next, open your HTML editor (we used Nvu in the previous post) and edit the Contact Form file AdesFormMail.html. On line 7 you will see the title tags (<title>Ades Form Mail </title>). Replace “Ades Form Mail” with your own blog or site name.
Now, just above the </head> tag type in the following, using your own URL and file path:
href="http://your web site.com/contact/layout.css" />
href="http://your web site.com/contact/presentation.css" />
Now, in order to create the two columns, type the following after the <body> tag:
<div id="lh-col"><br />
<h3 align="center">Contact us!</h3>
<p align="center"><img
src="[type the URL of your logo image]" /></p>
<br />
<p> Please fill in the form to the right. Your Name and e-mail
address are required (so I can get back to you!) but will never be
shared without your permission.</p>
<p>The rest of the info is optional.</p>
</div>
When you have done that, you have created a box with your logo and those instructions. If you would like to use different text, please feel free.
The next step is to create the right-hand box for the Contact Form itself. Just before the <!--url's used in the movie--> part of the form, add this command: <div id="rh-col">. Then near the end, just after the </object>, add the following:
<center>
<h3><a href="[your website home page]">Back
to the Home page</a></h3>
</center>
</div>
Finally, save this file as [your web site]contactform.html and you are ready to upload the file to your contact folder. When you have done so it should look something like this [link].
If this is too much editing for you, go ahead and work from this template, editing the parts in large orange type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<link rel="stylesheet" type="text/css"
href="
your website URL and path
/layout.css" />
<link rel="stylesheet" type="text/css"
href="
your website URL and path
/presentation.css" />
</head>
<body>
<!-- left column -->
<div id="lh-col"><br />
<h3 align="center">Contact us!</h3>
<p align="center"><img
src="
your logo image URL
" /></p>
<br />
<p> Please fill in the form to the right. Your name and e-mail
address are required (so I can get back to you!) but will never be
shared without your permission.</p>
<p>The rest of the info is optional.</p>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"><!--url's used in the movie--><!--text used in the movie--><!-- <p align="left"><font face="Verdana" size="10" color="#333333">Full Name:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Email:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Website:</font></p> <p align="left"><font face="Verdana" size="10" color="#ff3300">*</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Country:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Message:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Required fields are denoted by <font color="#ff3300">*</font></font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Address 1:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Address 2:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">State:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Zip Code:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">City:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Phone:</font></p> <p align="left"><font face="Verdana" size="10" color="#333333">Fax:</font></p> --><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
id="AdesFormMail" align="middle" height="480"
width="450"><param name="allowScriptAccess"
value="sameDomain" /><param name="movie"
value="AdesFormMail.swf" />
<param name="quality" value="high" /><param
name="bgcolor" value="#ffffff" />
<embed src="AdesFormMail.swf" quality="high"
bgcolor="#ffffff" name="AdesFormMail"
allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="480" width="450"></object>
<center>
<h3><a href="
your home page URL
">Back
to the Home page</a></h3>
</center>
</div>
<!-- end of right column -->
</body>
</html>
Once you have uploaded the new form, you can set your links and it should look something like this [link].


