Contact Form…If you don’t know…now you know!

Better late than never to know this information for your site!

Contact forms are necessary for your web page: To request specific information from your website’s users. Usually for site feedback or to join mailing lists. How does the whole process work? Well once you fill in a contact form you hit the “Submit” button. The browser takes what you have submitted and automatically encodes it so that it can send it to the server’s web application. The web application then processes this info by adding the person (who filled in his/her details on the contact form) and their e-mail address to the server’s database. The web app sends a response to let the person know that their contact form has gone through. BINGO! Below is the basic HTML for a CONTACT form.

<HTML>

<head>

<title>Mailing List Signup </title>

</head>

<body>

<h1>Mailing List Signup</h1>

<form action=“/cgi-bin/mailinglist.pl” method=“post”>

<fieldset>

<legend>Join our email list</legend>

<p> Get news about my website. </p>

<ol>

<li><label for=“name”>Name:</label>

<input type=“text” name=“name” id=“name” /></li>

<li><label for=“email”>Email:</label>

<input type=“text” name=“email” id=“email” /></li>

</ol>

<input type=“submit” value=“Submit” />

</fieldset>

</form>

</body>

</HTML>

 

Some tags may be new to you so I will explain what they are there for.

  • <form>

The form element is a container for all form element controls. The form tag also has attributes that interact with the browser about form-processing features.

  • <form action=“/cgi-bin/mailinglist.pl”

This tag is to communicate to the browser to process all information sent out with this form.

The ‘action’ attribute gives the location for the application or script that is used to process the form’s info. The ‘action’ attribute sends the data to a script called ‘mailinglist.pl’.

[You may want to know ‘.pl’ is for… well…

‘.pl’ is a Perl script which is used to process the form. Perl is scripting lanugage. Others that can be used are .php, .asp, .jsp. Once we get into scripting languages we will learn more about this.]

The script is the cgi-bin directory on the same server as the one that has your HTML document for the form.

  • method=“post”>

The method attribute indicates how the info should be sent to the server. There are 2 types of methods: Post and Get, in this example we are using the Post method so this is the one I’ll explain to you. With this method the browser sends a separate request to the server containing some special headers then the data. Only the server can see this info sent so Post is the best method for sending info you wan kept secured (credit card details/personal info).

  • <fieldset>

This element is used to indicate a group of form controls.

  • </legend>

The ‘fieldset’ element may include this ‘legend’ element that provides captions for every field.

  • <li><label for=“namer”>Name:</label>

<input type=“text” name=“name” id=“name” /></li>

On the visual browser we see the label for Name right next to a text field where we insert our name (the field), but in the HTML document the label and field may be separated such as when they appear in separate table cells. The ‘label’ element id used to associate descriptive text with its form field.

  • <input type=“submit” value=“Submit” />

Hitting the ‘submit’ button takes all the data filled in on the form to the server. The ‘submit’ is added by using the ‘input’ element. This button does not need you to enter any data, all you do is click it therefore this is a form control element that does not required a ‘name’ element. This Is simple, just slot the HTML in at the end of the form and you have a submit button done.

Example of a basic contact form which you can find on CrazyLeaf Design Blog.

Advertisements

About nicobaleng

My paradoxical love for the web is feeling immense freedom while confined to a seated position behind a desk. This is what the world wide web has to offer. Learning about the latest technological toys or playing around with programs sounds like nerds-play, but once you start exploring, the pc monitor in front of you becomes less and less intimidating. Tracked and documented I will share the journey of an average Joe like me, moving up toward achieving a black belt in web design! KAPOW!

Posted on October 3, 2011, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: