Contact Forms

 15 min

  

Web-based forms are useful tools. In this tutorial, we’re going to add a contact form to a ‘Contact Us’ page that we created on our fictional SCUBA diving club site to allow site visitors to contact the webmaster and submit their personal comments.

By the end of this tutorial you will be able to:

To download the tutorial project file(s), right-click the  link(s) and, depending on your browser, select either Save Target As... or Save Link As... In the subsequent dialog, ensure that you choose a suitable file location, such as a 'downloads' folder or the 'desktop', so that you can easily browse to your file when required.

 

scuba.wpp

Let’s begin...

  1. On the Standard toolbar, click  Open.

  2. Navigate to the scuba.wpp file, select it and click Open.

    The 'Home' page is displayed in the workspace.

Creating a 'contact' form

It's important to show visitors there is a live person or business behind your website—this adds credibility and legitmacy to your online presence.

By providing easy ways for visitors to communicate with you, you will establish this credibility. You may wish to add your postal address, telephone numbers and email address to your website, though this carries with it the risk of unwanted spam.

Instead we recommend providing visitors with a secure contact form for them to contact you directly.

Let’s get started.

To create a contact form using the Form Wizard:

  1. Open the Contact page in the workspace by double-clicking it on the Site tab.

  2. You'll notice that this page is different to the others in the site. It is smaller and does not use a Master Page. This is because we want to display it in a Lightbox—a self-contained window that floats above your web page. See WebPlus Help for more details.

  1. On the Web Objects toolbar, on the Forms flyout, click Form Wizard.

  2. In the first Form Wizard dialog, click Use and adapt a standard form and then click Next.

  3. Click any list item to display a preview of the selected form in the Preview pane.



    Select the Comments 2 form and click Next.

  4. The next dialog screen allows you to customize the form layout and add additional items. The default layout is almost right, but we need to add a captcha object. Click the CAPTCHA button.

  5. In the Add New Control dialog, type "Are you human? Type the letters you see." in the Enter label box and click OK.



    The new object is displayed at the bottom of the list.

  6. Next, with the captcha object select, click Move Up twice to move the object above the Submit Button.

  7. Click Next.

  1. In the Form Properties dialog, on the Action dialog:

  1. To insert the form at default size, position the  cursor where you want the form to appear and then click once.

 Don't forget to save your work!

  1. On the Standard toolbar, click the arrow to expand the  Preview Site drop-down list.

  2. Select Preview Page in {your web browser of choice} to see what your form will look like.

 Top of page

Editing form layout

You'll notice that some of the objects don't look that good:

Luckily, WebPlus lets you move and edit form controls just as you would any other object. We’ll demonstrate this now...

To move and edit form buttons and labels:

  1. Select the captcha object label and drag the corner handle to resize it.

  2. Drag a selection marquee over the input fields to select them all and then drag them into place next to the text.

  3. Next, drag a selection marquee around all of the text labels.

  1. On the Swatches tab, click the Scheme 11 swatch.

  2. On the Align tab ensure that Relative to: Selection is displayed, and click the Right align button.



    The text objects are aligned.

  3. Finally, select both the Submit and the Reset button and drag them into place below the captcha object.

  4. We also added an HTML text frame to the top of our form to create a title. The text was set to Heading 2.

 Don't forget to save your work!

  1. On the Standard toolbar, click the arrow to expand the  Preview Site drop-down list.

  2. Select Preview Page in {your web browser of choice} to see what your form will look like.

 Top of page

Displaying a form in a lightbox

If you look carefully at the Site tab, you'll notice that the Contact page is not included in the navigation. Instead, we're going to link to it from the 'contact us' text at the top of the Master page.

To link a form page to a lightbox:

  1. On the Home page, click the 'contact us' text object and then click Edit on Master Page.

  2. Select all of the 'contact us' text and on the Tools toolbar, on the Hyperlink flyout, click Insert Hyperlink.

  3. In the Hyperlinks dialog:

  4. In the left category list click Site Page.

  5. In the Page Name drop-down list select Contact.

  6. In the Target Window or Frame section, select Lightbox from the drop-down list.

  7. Click OK.

  1. On the Standard toolbar, click the arrow to expand the  Preview Site drop-down list.

  2. Select Preview Site in {your web browser of choice}.

  3. Finally, click on the link to test it! Your form should display neatly in its own lightbox.

That’s it! Once your form is published, visitors to your site can type their details directly into the text boxes provided. When they click Submit, the information is sent to the email address you specified when you created the form.