Using Response-O-Matic for online forms

Online forms are much easier than you think. People sometimes avoid online forms because they do not have access to the server that stores their web pages. ROM (what I will call response-o-matic for the rest of this handout), funnels online forms through their server and sends the result of what the person filled out on your form to you at an email address you specify.

ROM is free, but the end user will see an ad when they submit the form. For $50 a year, you can register your email address with ROM. You can make as many online forms as you want and the end user will not see the ads.

This handout will talk about how to use Microsoft Word to alter the form ROM makes for you. You can easily use any other web development software or web enabled word processor to make the changes we describe here.

This handout will show you how to properly fill out the ROM request form, how to copy and paste it into word, how to alter to make it the form you want and how the forms works for the end user. Let's go!

Add your email address

First and probably most importantly, your email address. You can always change this
later when you modify the form, but, if this is entered incorrectly, your form will not be sent to you.
You can always later alter this with your web development enabled software.

Enter Your Name

This name will be seen by the end user. So, if you do not want people to
know your last name, do not use it or even use an email address that contains
your last name if you do not want it to be seen. You can use something basic like Webmaster or
simply your first name if you would like.
You can always later alter this with your web development enabled software.

Enter The Subject Line of the email

This is the subject line you will see when you receive your email.
Please note the end user sees all the information sent with the email.
You can always later alter this with your web development enabled software.

Enter a Thank You Note for the top of your page

IMPORTANT: It is important to note here that when the end users completes filling out
this form they will no longer be on your site, they will be on the response-o-matic site.
Because of this, ROM makes a holding page that will display this thank you note,
the information they filled out and a link back to your website (which you will fill in later).
You can always alter this with your web development enabled software.

Enter the Return Link back to your website

Once again, the user once they send the form is no longer on your website, they are
on the ROM site looking at a simple page. This is where you can type a URL in that the end user
can click on and be taken back to your site. You can later always alter this with your
web development enabled software.

Enter a name for the Return Link

Even though you typed a link for the end user to click on, you need to
type some text to go along with it. Simply typing in a link may be slightly confusing
for a beginning user. Instead, Type something like "click here to return to the blah blah blah
website". This text will become the highlighted link text the end user sees. You can always alter this later with yourweb development enabled software.

Background Color

Self explanatory. You can select a background color for the page
the end user sees on the ROM website. You can always alter this later with your
web development enabled software.

Text Color

Self explanatory. You can select a text color for the page
the end user sees on the ROM website. You can always alter later this with your
web development enabled software.

Link Color

Self explanatory. You can select a link color for the page
the end user sees on the ROM website. You can always alter this later with your
web development enabled software.

Visited Link Color

Self explanatory. You can select a visited link color for the page
the end user sees on the ROM website. You can always alter this with your
web development enabled software.

Page of code

ROM will now present you with a page of code and step by step instructions.

You see where it starts with .html ? Copy everything from and including <html> </html>. It will look something like the text below (please note some of my commands are missing here, remember to start and end your copying from the <html> to </html>:

<form>

<h1 align=center style='text-align:center'> </h1>

<h1 align=center style='text-align:center'><span style='color:black'>Thanks for
visiting my site!</span> </h1>

<h3 align=center style='text-align:center'><INPUT TYPE="HIDDEN"
NAME="your_email_address" VALUE="geek@lesliefisher.com"> <span
style="mso-spacerun: yes"> </span><INPUT TYPE="hidden" NAME="your_name"
VALUE="Leslie Fisher"> <span style="mso-spacerun: yes"> </span><INPUT
TYPE="hidden" NAME="email_subject_line" VALUE="From the website"> <span
style="mso-spacerun: yes"> </span><INPUT TYPE="hidden"
NAME="required_fields" VALUE="your_email_address"> <span style="mso-spacerun:
yes"> </span><INPUT TYPE="hidden" NAME="thank_you_title" VALUE="Thank
You!"> <span style="mso-spacerun: yes"> </span><INPUT TYPE="hidden"
NAME="return_link_url" VALUE="http://www.lesliefisher.com"> <span
style="mso-spacerun: yes"> </span><INPUT TYPE="hidden"
NAME="return_link_name" VALUE="Return to the lesliefisher.com website"> <span
style="mso-spacerun: yes"> </span><INPUT TYPE="hidden"
NAME="background_color" VALUE="#FFFFFF"> <span style="mso-spacerun:
yes"> </span><INPUT TYPE="hidden" NAME="text_color" VALUE="#000000"> <span
style="mso-spacerun: yes"> </span><INPUT TYPE="hidden" NAME="link_color"
VALUE="#0000FF"> <span style="mso-spacerun: yes"> </span><INPUT
TYPE="hidden" NAME="visited_link_color" VALUE="#8000FF"> <span
style="mso-spacerun: yes"> </span><INPUT TYPE="hidden"
NAME="active_link_color" VALUE="#0000FF"> <span style="mso-spacerun:
yes"> </span></h3>

<h3 align=center style='text-align:center'>Your comments are appreciated!</h3>

<p class=MsoNormal align=center style='margin:0in;margin-bottom:.0001pt;
text-align:center'>Just complete this form. Click on Submit when ready to send.</p>

<h4> </h4>

<table border=0 cellspacing=0 cellpadding=0 style='mso-cellspacing:0in;
margin-left:.5in'>
<tr>
<td width=116 style='width:116.0pt;padding:.75pt .75pt .75pt .75pt'>
<h3>Your name:</h3>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<h4><INPUT TYPE="text" NAME="visitor_name" VALUE="" SIZE="50"> <span
style="mso-spacerun: yes"> </span></h4>
</td>
</tr>
<tr>
<td width=116 style='width:116.0pt;padding:.75pt .75pt .75pt .75pt'>
<h3>Email address:</h3>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<h4><INPUT TYPE="text" NAME="visitor_email_address" VALUE="" SIZE="50"> <span
style="mso-spacerun: yes"> </span></h4>
</td>
</tr>
</table>

<h3 style='margin-right:.5in;margin-left:.5in'>Where do you want to go today?</h3>

<p style='margin-right:.5in;margin-left:.5in'><INPUT TYPE="radio" NAME="Where
to?" VALUE="I don't know"> <span style="mso-spacerun: yes"> </span>I don't
know<br>
<INPUT TYPE="radio" NAME="Where to?" VALUE="Disneyland"> <span
style="mso-spacerun: yes"> </span>Disneyland<br>
<INPUT TYPE="radio" NAME="Where to?" VALUE="Bill Gate's house" CHECKED> <span
style="mso-spacerun: yes"> </span>Bill Gate's house<br>
<INPUT TYPE="radio" NAME="Where to?" VALUE="Back to bed"> <span
style="mso-spacerun: yes"> </span>Back to bed </p>

<p style='margin-right:.5in;margin-left:.5in'> </p>

<h3 style='margin-right:.5in;margin-left:.5in'>What kind of movies do you like?</h3>

<p style='margin-right:.5in;margin-left:.5in'><INPUT TYPE="checkbox"
NAME="Movies I like" VALUE="Horror"> <span style="mso-spacerun:
yes"> </span>Horror<br>
<INPUT TYPE="checkbox" NAME="Movies I like" VALUE="Science Fiction"> <span
style="mso-spacerun: yes"> </span>Science Fiction<br>
<INPUT TYPE="checkbox" NAME="Movies I like" VALUE="Romance" CHECKED> <span
style="mso-spacerun: yes"> </span>Romance<br>
<INPUT TYPE="checkbox" NAME="Movies I like" VALUE="Comedy"> <span
style="mso-spacerun: yes"> </span>Comedy </p>

<p> </p>

<h3 style='margin-right:.5in;margin-left:.5in'>How many salesmen does it take
to change a light bulb?</h3>

<p style='margin-right:.5in;margin-left:.5in'><SELECT NAME="name"> <OPTION
SELECTED>Who cares? </OPTION><OPTION>I hate this joke. </OPTION><OPTION>One
</OPTION><OPTION>Two </OPTION><OPTION>Three </OPTION><OPTION>Only one. But
today, and today only. </OPTION></SELECT> <span style="mso-spacerun:
yes"> </span></p>

<p> </p>

<h3 style='margin-right:.5in;margin-left:.5in'>Any comments?</h3>

<p style='margin-right:.5in;margin-left:.5in'><TEXTAREA NAME="Comment" ROWS="5"
COLS="50"></TEXTAREA> <span style="mso-spacerun: yes"> </span></p>

<h4> </h4>

<p style='margin-right:.5in;margin-left:.5in'><INPUT TYPE="submit"
NAME="Submit" VALUE="Submit"> <span style="mso-spacerun: yes"> </span><INPUT
TYPE="reset" VALUE="Reset"> <span style="mso-spacerun: yes"> </span></p>

<p> </p>

</form>

Keep this text in your clipboard, now lets open Microsoft Word

Using Micorsoft Word to alter your form

Open Microsoft word and select WebPage. Unfortunately, because there are so many different versions of microsoft word, this feature can be hidden. You might need to dig around, but find something that allows you to make a new web document.

Open your New Web Page, Open the source code and remove everything!

What you want to do is take the web page and actually get rid of all the source code. You will then paste in the code you should still have in your clipboard from the ROM website.

Once you open the document, switch to HTML Source mode by going in to the View menu and selecting HTML Source. Once you see the source, paste the code in your clipboard into the now empty Word document

At this point, word will want you save the document. Make sure you save it ending in .html and the rest being one lowercase word for example, contactform.html

Once you have pasted the new information in. Go back to the View Menu and click on HTML Source once again. It will take you back to a regular view and you can now see your form!

Your Response-O-Matic Form

This is your form. Right now, it actually works! You could open this page using a web browser, fill it out, click the Submit button and your form would send you an email. My guess is that you do not want these fields, so, lets talk about adapting this form to work the way you want it.

Hidden Fields

This is important, all the fields you answered on the ROM website and listed as hidden fields. If you do not need to change the email address it goes to, link colors, return link, etc. You do not need to alter these. But, if you ever do:

To change a hidden field, simply click on one of the hidden boxes. A dialog box will appear showing you what makes up that hidden field. Do not change the name of the hidden field, but, you can change the value, for example, a different email address. The other hidden fields are for email title, thank you text, return link, background and text color.

Text Boxes

To alter a text box, simply double click on it. The Text Box options appear. IMPORTANT: The name of the field is what you the receiver of the email will see when you read the email. Make sure if you duplicate this field, you change the name of the field so you will not see multiple text fields with the same name.

You will notice some other options is to change the width and height of the text field, and to choose whether the field is single line (which is shown), multi line or password. Please note password is not a real password field, it just replaces the text with bullets. There is also a listing for Default text which will automatically place text in this field on default.

To modify this form so the fields are customized to you, simply double click on the field and change the value to match what you want. You will also want to simply select the text on the form itself to modify it to what you want.

Radio Buttons

You would use a radio button when you want to limit the user to only one choice of many options. You can always remove radio buttons but deleting them and add them using copy and paste. It is IMPORTANT to know that if you want a radio button to act like a radio button, all the names (called group here) of the radio button must be the same and their export value will be different. To look at a radio buttons options, double click on it.

To modify this form so the fields are customized to you, simply double click on the fields and change the group and value to match what you want. You will also want to simply select the text on the form itself to modify it to what you want.

In this example, you will notice the name of the group is Where to? and the Export is Bill Gate's house

You will notice in the example below, the group name is the same and the Value is different

Because only one of these items can be selected, the resulting email will show Where to?:what the user clicked.

Check Boxes

Check boxes allow the end use to select as many items as they want. Because of this, you do not need to worry about a group like radio buttons. You can also remove unwanted check boxes by deleting them and making additional check boxes by using copy and paste. To see the check box options, simply double click on it.

You will notice each check box has a name and a value. it is important to know, just like any other field here that the value for each item should be different.

To change the information of the field, simply double click on the check box and change the name and the value to reflect what you want. You will also want to change the text on the form itself to modify it to what you want.

List Box

You probably know this better as a pop-up menu. Like Radio Buttons and Check Boxes, a List Box has values which in this case are just called List box Items. You will notice in the dialog below, the list box has a name, this will be shown in the email as name=whatever the user selects.

To play it safe, keep the lines at 1. The form will be happier that way.

You can also notice that there is a location to add additional list items and the ability to move these list items up and down.

To add items, you will see name and value. Name is the words that the end use will see when he selects the popup. value is the item that is sent to your email. You can keep the name and value the same or adapt the value so it is easier to read in the email.

You can add additional List Boxes by using copy and paste. You can also change the options by clicking on each List Box item and alter it. You can also edit the text title of the List Box (shown as light blurb text below) by simply highlighting the text and change it.

Text Areas

These areas are perfect for comments. The email will say comment: whatever the user types. This box looks very much like the box for a Text box, but the option for Multiple Line is checked. You also notice that the size for width here means 5 lines long and 50 characters wide. You can change this if you would like to a different set of numbers. Also, the user can fill out more that the text box displayed and it will scroll. You can have as many text boxes that you would like by simply using copy and paste and remembering to change the name.

Filling out and Viewing the form

Once the user fills out the form and click the submit button, they will be taken to the screen we kept talking about in the beginning of this handout, here is that form:

Also, you can test your form out by opening your form page directly into a web browser.

Please not the pop-up add. As I mentioned earlier, you can register your email address at ROM for $50 a year and the ads will go away.

Getting email:

Now that the form has been filled out, it will be sent to your email. I have taken a sample email send to me lesliefisher.com site. The fields are not exactly the same as the ones we have been using, but, you will get the idea.