Question about making a contact form

Get Started
1

So I am almost done with my new web page. I used Sitepoint’s Build Your Own Web Page the Right Way with HTML and CSS , 2nd Edition for help on parts that I didn’t understand. From pages 290-302 there’s a guide for setting up a form using a free form building site called Freedback. I checked out the site, but I did not like it because if you want to use it for free it puts ads on your site. So instead I decided to use JotForm (JotForm · Easiest Form Builder) since it’s a similar service except that no ads are put on your site if you use it for free. I downloaded the source code for the form but the problem is in the book it says that you have to copy and paste certain parts from the code generated by the form builder so that you can put it into the existing form in order to avoid introducing bloated HTML into the site. It also came with some CSS and JS files. I don’t think I need the CSS since I already have some CSS for the form already for my site.

/* Contact form CSS*/

form.contact fieldset {

	border: 2px solid navy;
	padding: 10px; 

}

form.contact legend {

	font-weight: bold;
	font-size: small;
	color: navy;
	padding: 5px;

}

form.contact label{

	font-weight: bold;
	font-size: small;
	color: blue;

}

form.contact label.fixedwidth{

	display: block;
	width: 150px;
	float: left;

}

form.contact {

	padding: 0;
	margin: 0;
	margin-top: -15px;
	line-height: 150%;

}

form.contact .buttonarea input{

	background: navy;
	color: white;
	font-weight: bold;
	padding: 5px;
	border: 1px solid white;

}

form.contact .buttonarea{

padding-top: 10px;

}

Since the code is different from that in the book, I’m not exactly sure which parts to copy and paste. Any help would be much appreciated. I have attached the files to this post.

2

If you want to use the JavaScript functions included there, you will probably need to use some of their CSS, as there are presumably styles for error messages etc.

An alternative would be to use the form as you have created it and let all the processing be done behind the scenes by PHP, which is the cleanest option from a front end code perspective. It means you miss out on some of those nice JS features, but I’m not sold on them anyway.

Here are some examples of how to process forms with PHP:

http://www.tizag.com/phpT/examples/formex.php
http://www.thesitewizard.com/archive/feedbackphp.shtml
FormMail.com :: HTML Form Processor

3

Ralph, I would do that but I do not know PHP. Also, I want this to be a site that doesn’t require much maintenance on my part behind the scenes.

4

You don’t really need to know PHP to set up a simple contact form. I’ve amended the links above. The first two are simple tutorials on it. No maintenance is required once it’s set up, either.

5

Okay then. I’ll check it out.

6

Also worth a look is the Green-Beast contact form script. I’ve not used it myself, but it was recommended to me by forum members here and it might be your easiest option.

7