Forms for Websites

with 2 Comments

Forms for Websites ~ A Template for HTML5 or WordPress

Yesterday I was making an “in a hurry” email reply form for a WordPress site.  I dug up a nicely styled form from another project, changed the colors and pasted it in!  But it didn’t work.  You see, WordPress itself has forms (like the search box) and these are controlled by the themes style sheet.  You can easily see the problem arising!  I did have one of those Duh! moments when my “perfect” CSS did not work because of a CSS Specificity (but that’s another story I will tell sometime).

Lucky for me I use the TuKod Theme, and can easily add my own styles.  However, with a tiny amount of effort I can show you how to do this with pretty much any WordPress theme.  In fact you can use the same techniques to add a web form to any website!  So listen and learn and you can use these simple steps to create your own form.

Simple Web Form for Beginners

This will be a Beginners Series of articles about an email reply (feedback) web form.  Our Beginners class will cover four topics including:

Simple HTML for Web Forms (see below)

Simple CSS Style for Web Forms

Simple Java Script for Web Forms

Simple PHP for Web Forms

Simple HTML for Web Forms

Without delay, let’s jump right in and get started with our first lesson on HTML. For our study we will be using any of the later flavors (versions) of HTML. That means this should work in XHTML1.0, XHTML1.1, XHTML5 and HTML5!

If you are using something older, it likely became obsolete over a decade ago and you should really upgrade to HTML5 with XHTML5 coding standards!

Text Editor

Because this is a beginners class, I am going to remind you to get yourself a good TEXT editor. This is not a word processor. I use and love Geany! In fact I have already started thinking about a Series of Articles about how I use Geany ~ Daily!

Do not try to do this in a word processor. Word processors are NOT the same as Text editors.

If you have not yet switched from Windows to Ubuntu I highly recommend it… However if you are still using Windows you could use NotePad, WordPad, or Notepad++ (Notepad Plus Plus) if you have these installed in your Microsoft computer.  They will not work as well as Geany (IMHO).  There is a version of Geany for Windows, so use that instead.  However I always recommend a switch from Microsoft anything to an LTS (Long Term Support) release of Ubuntu as the most trouble free computing option.

The Plan

Like everything in computer programming, you first need to make a plan.  For my email I will use a really basic form, with well established inputs.  Nothing New or different here.  For our email form we will be asking for a name, email address, subject, message, and add a checkbox for for please contact me, and a radio button for products or products or services. We will also need a submit button that says “Send Email” to complete our web form.

I made a little chart so it would be easy to understand…

Title Type
Front Desk radio
Webmaster radio
Name text
Email address text
Subject text
Contact Me A.S.A.P. checkbox
Message textarea
Send Email submit

 The HTML

Now we write this code as if it was being written for XHTML, with well-formed code.

Here is the code for a stand alone webpage:

<div id="tukod-form-one">
  <form action="">
    <h1>Contact Form :</h1>
    <p>Department:
    <label>
      Front Desk<input type="radio" name="department" value="FD" />
    </label>
    <label>
      WebMaster<input type="radio" name="department" value="WM" />
    </label></p>
    <label>
      Your Name<input type="text" name="name" />
    </label>
    <label>
      Email Address<input type="text" name="email" />
    </label>
    <label>
      Subject<input type="text" name="subject" />
    </label>
    <p><label>
      Contact Me A.S.A.P.<input type="checkbox" name="contact-me" value="Contact Me A.S.A.P." />
    </label></p>
    <label>
      Message<<textarea name="message"></textarea>
      <input type="button" value="Submit Form" />
    </label>
  </form>
</div>

And the very same code with the line-feeds taken out of it for WordPress (as it adds lines!)

<div id="tukod-form-one">
  <form action="">
    <h1>Contact Form :</h1>
    Department:<label>Front Desk<input type="radio" name="department" value="FD" /></label><label>WebMaster<input type="radio" name="department" value="WM" /></label>
    <label>Your Name<input type="text" name="name" /></label>
    <label>Email Address<input type="text" name="email" /></label>
    <label>Subject<input type="text" name="subject" /></label>
    <label>Contact Me A.S.A.P.<input type="checkbox" name="contact-me" value="Contact Me A.S.A.P." /></label>
    <label>Message<<textarea name="message"></textarea><input type="submit" value="Submit Form" /></label>
  </form>
</div>

Notice that the WordPress version does not have the <p></p> tags.

So at this point the un-styled form looks like this in WordPress…

This is what our unstyled form looks like.
This is what our unstyled form looks like.

HTML Explanation

The first thing you will notice is that we put it all in a

<div id="tukod-form-one">

This <div> allows us to style our email form together, as well as separately from any other forms like built into WordPress or perhaps on a different page for a different department!

You will also notice that we have only one other id, on the submit bottom. Currently this is the most compatible way of coding it.

Remember that the action attribute on the form tag is where you will place your form handler. We will get into that in Simple PHP for Web Forms!

That is the end, your Simple HTML for Web Forms is done! Congratulations!

 

 

Contact Form :

Department: 




 

 

.

2 Responses

  1. […] CSS: Specificity for Beginners: Billion System While writing the post Forms for Websites ~ A Template for HTML5 or WordPress I had a problem with my CSS, a CSS Specificity […]

  2. […] this post, Simple CSS Style for Web Forms we will start to style our the Email Form we created in Forms for Websites ~ A Template for HTML5 or WordPress As you may recall, we left that project with the HTML5/XHTML code finished and looking rather like […]

Leave a Reply