Build a Simple Contact Form with FrontPage

ADVICE > Building a Simply Contact Us Form

OK... it does not have to be a "contact us" form, it can be any type of form where a visitor can enter information and submit it to you. Now FrontPage gives you some options on how the information is delivered or saved, but for the sake of keeping this tutorial simple, we are going to build a form that sends the information entered to an email address. So where do we start? Well...

1. Create a new page for your site named CONTACT.HTM. You can do this by going to FILE and selecting NEW or you can copy and paste an existing page into your web site.
2. In the main text area, enter something along the lines of "You can use this form to provide us feedback about our website or contact us with any questions you may have." Hit RETURN or ENTER twice.

Now comes the actual form creation. Keep in mind you can do this all with the INSERT, FORM options, but seeing as Microsoft was nice enough to create a FORM PAGE WIZARD, we are going to put that to use.

3. Go to FILE and select NEW and PAGE. This step will vary depending on your version of FrontPage, but you want to create a new page from a PAGE TEMPLATE.
4. When the box pops up to select a page, select FORM PAGE WIZARD.
5. Click NEXT until you get to ADD.
6. Click ADD and select the CONTACT INFORMATION option.
7. Leave all the selections at the defaults and select NEXT.
8. Click ADD again and scroll down to PARAGRAPH.
9. Click in the box for the label to identify this and change the text from "What do you think of...?" to "Your comments:" and click NEXT.
10. FrontPage will ask you to input a label for this field. Call it "comments."
11. Click NEXT and FINISH.

You now have a FORM PAGE. Highlight the form area (left click, hold and drag in FrontPage 2000 and 2002 or click on the "form" tag at the top of the page in FrontPage 2003) and change the text font and size to match your site. Now switch to code (or HTML) view. Find the line that reads:

<FORM METHOD="POST" ACTION="--WEBBOT-SELF--">

 and highlight the code down to the end of the line that reads:

</FORM>

With the HTML highlighted go to EDIT and COPY. Now switch back to your CONTACT.HTM page and put the cursor where you want the form to show up. Switch to CODE or HTML view and go to EDIT and PASTE. Switch back to DESIGN or NORMAL view and there is your form on your web page. Now let's tweak it!

First, right click anywhere inside the form and select FORM PROPERTIES. The form results should be saved to "fpweb:///_private/formrslt.htm". Right below it you can enter the email address you want the results emailed to. Enter your email address.

Now select OPTIONS. From here you can set options like the subject of the email you will receive, specify the landing page for a visitor after they submit the form (I would recommend building a contactconfirm.htm page and specifying it here or send them to the home page of your site). Keep in mind your confirmation page must be a .HTM page for this simple form to work. The last tab allows you to specify date and time formats for the submission email. Set your options and exit the option window.

You now have a CONTACT US form for publication to your site. Close the new page that was created with the FORM WIZARD without saving and upload your changes.

For your form to work you MUST have FrontPage server extensions installed on your site.

Still have more questions? Try posting in our support forum.

CLICK HERE TO RETURN TO OUR MAIN ADVICE PAGE.