General Information
Fields and Labels

{{ Brand }} Email Wizard Form Tutorial

This tool will create all of the code you need to impliment an email form for your site. This version contains extended comments so that you can understand everything that is going on in the application. You can just copy the given code including the explanations. Your form will work just fine with them. As you begin to understand the functionality, you will want to use the actual for wizard on MOOSELOOSE.COM which doesn't have the instructional comments. Better yet, by right clicking MOOSELOOSE.COM and selecting 'Save Link As', you can have your own form wizard that will work great on your computer whenever you need it. If you want this Tutorial Version, right click and 'Save Link As' HERE.

As you go thru this tutorial, you will see the helping hand . This offers help regarding the nearby field.

Branding

What you put here changes a lot of code so that it is customized for branding. you can put your name, client's name, or something to do with the website. It makes you code your own. No spaces or special characters (NSSC) should be used.

Clue. If the form on the left loses color when you complete the first field, you did it wrong.

Processing Form

You will have to create a page to process the entered information. IT MUST be a .php page. If you are creating your site in DreamWeaver, create a new page from template and name it with a php extension. On the form to the left, you will enter the name of the page you just created in the "Processing Form" field. Be sure to include the .php. I usually create a page called "thankyou.php" for this, but it is up to you.

As a note, the page name is case sensitive. Thanks.php is not the same as thanks.php.

Email Goes To

This is the email of the person that will receive submitted information, you.

Subject Line

When you recieve the email submission, you will want to know that it came from your site. The subject line will be the subject of the email YOU will receive. The subject will make it easy for you to see responses among your other email.

Your Website

This entry will be used throughout this project to let you know where the information was submitted and it will let the person who filled out the form the site on which they entered the information.

Thank you Message

Write a short message thanking the submitter for filling out the form. They will see this message on the page you created for processing the information and they will get the message in their email (if you choose that option).

In your "thank-you" messge you may wish to put spaces between your greeting, paragraphs and signature. \n is a single space and \n\n is a double space.

Fields

Each bit of information you request needs two parts.

First, it needs a "field". This is just what passes the information as a variable to the processing page. The NSSC means NO SPACES OR SPECIAL CHARACTERS! Do not create fields with spaces or special characters or it won't work!

Also, if you want the submitter to include an email, make the field exactly "Email", capital E, lower case for the rest. You can make the label anything you want, like "Your Email Address", but the field has to be "Email".

Secondly, each bit of information needs a label. Labels are what the submitter will see on the form to let them know what they must enter. Notice that there is no NSSC. You can have spaces and special charaters in labels. "Your First Name" is acceptable, therefore.

Installing the Email Form and Processing page.

After you have completed the form on the left, the fun begins.

Click the blue button that is labeled "the Email Form" at the top of this page. Copy the black and green code and paste it in the head of the page where your form will appear. Of course you can put the CSS in your CSS page, but if you do, don't include the <style> </style> tags. The form will work just fine with embedded styles, however. You can style the look of your form using those styles.

Copy and paste the blue code in the div where you want the form to appear on your site.

Next, click the button that is labeled whatever you called your processing page. Copy that code and paste it in the div where you want the "Thank-you" message to appear.

If you want your submitter to recieve a "thank-you" email (which is good follow-up and additional contact, by the way), click the "Email to Submitter" button and just paste it under the code you just pasted on the processing page. Remember, for this to work, you must have created a field called "Email".

Advanced Form Fields

By default, the email form will be created with just text boxes. That is, the boxes will be single line entry. If you need to have Select Dropdowns, Check Boxes, Radio Button or TextAreas those will be created for you, too, and are found under the button called "Advanced Form Fields" at the top of the page.

Careful attention is required to replace the text boxes with other form fields. Look closely at the form code. You will see the code that presents each of your labels and each of your input fields each looks something like:

<tr>
<td class="{{ Brand }}form"><nobr>Your Message: </td>
<td><input class="{{ Brand }}text" type="text" name="message" size="24" value=""> </td>
</TR>

Notice that the code begins with a lower-case <tr> and ends with a Uppercase </TR>. That will help you copy and paste the code correctly. For our example, If I create a textarea in the "Advanced Forms, I will look for:

<tr>
<td class="{{ Brand }}form" valign=top><nobr>Your Message</td>
<td> <TEXTAREA class="{{ Brand }}text"  NAME="message" ROWS="5" COLS="24" WRAP="virtual"></TEXTAREA>
</td>
</TR>

Copy that code, including the lowercase <tr> at the beginning and the uppercase </TR> at the end. Go to your form and find the code you want to replace. Highlight that code including the lowercase <tr> at the beginning and the uppercase </TR> at the end. Than just paste the textarea code to replace it.

Check boxes are slightly different. There are three pieces of code that have to be replaced. Just follow those particular instructions.

IMPORTANT NOTE! your email application will work only on a server that has PHP and email set up on it. It will NOT work if you test it on your computer. FTP your pages in order to test them.

RECAPTCHA

The new reCAPTCHA is here. A significant number of your users can now attest they are human without having to solve a CAPTCHA. Instead with just a single click they’ll confirm they are not a robot.

reCAPTCHA is built for security. Armed with state of the art technology, it always stays at the forefront of spam and abuse fighting trends. reCAPTCHA is on guard for you, so you can rest easy.

Get Google's recaptcha by going here and signing in or signing up:

https://www.google.com/recaptcha/intro/index.html

When you get the key, enter it into the RECAPTCHA box on the Left