Forms. Dynamic Content 1

Transcription

1 Dynamic Content 1 Web-based forms are useful tools. In this tutorial, we are going to create a simple form that allows site visitors to contact the webmaster and submit their personal comments. You ll learn how to: Create a web-based form using the Form Wizard. Edit form objects. This tutorial assumes that you have already registered for a Serif Web Resources account. If you are unsure how to do this, see the tutorial Counters & Polls or online Help.

2 2 Dynamic Content are used to collect data from site visitors. Data collected can be as simple as the person s name and address, or a whole host of personal information. How much data you ask for on a form really depends on what you need it for. 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. A similar version of this project file, scuba.wpp, can be found in the Workspace folder. In a standard installation, this folder is installed to the following location: C:\Program Files\Serif\WebPlus\X4\Tutorials Alternatively, why not add a form to your own web page? Let s get started. To create a form using the Form Wizard 1 Open the Contact Us page in the workspace by double-clicking it on the Site tab. 2 On the Web Objects toolbar, on the flyout, click Form Wizard. 3 In the first Form Wizard dialog, click Use and adapt a standard form and then click Next. 4 Click any list item to display a preview of the selected form in the Preview pane. Select the Comments 2 form and click Next. 5 The next dialog allows you to customize the form layout. Here, you can edit and delete the existing form controls, or add new ones (see the note on the next page). The default form suits our purpose so click Next to proceed.

3 Dynamic Content 3 The building blocks of a form comprise a mixture of text, graphics, and form controls. Form controls collect visitor data and can be added, moved, and modified in a similar way to other WebPlus objects. Form control fields include buttons, text boxes, check boxes, radio buttons, combo boxes, and so on. A typical form is made up of a combination of these fields. The Form options also include a CAPTCHA object. When linked to your Serif Web Resources account, this antispamming control can help to prevent junk from non-human web traffic. The site visitor must type the graphical word into the input field. If they match, the visitor is allowed to continue. For detailed information, see Adding forms in online Help. Randomly generated graphic Text input field 6 In the Form Properties dialog, on the Action dialog: Select An address. Type a name for your form. (This must not contain spaces or special characters.) Type the address to which you want the site visitor s form data to be sent, e.g. webmaster@domain.com Click Finish.

4 4 Dynamic Content 7 To insert the form at default size, position the cursor where you want the form to appear and then click once. 8 Preview your site to see what the form will look like when it s published. Editing form layout We re now going to adjust some of the elements on our form, so you might want to zoom in at this point. There are a couple of things we want to change: We need to adjust the look of the form field labels. We re going to reposition the form Submit and Reset buttons. Luckily, WebPlus lets you move and edit form controls just as you would any other object. We ll demonstrate this now...

5 To move and align form buttons Dynamic Content 5 1 Click on the Submit button and drag it into place under the Comments text box, as illustrated. 2 Next, drag the Reset button into place below the Submit button. 3 Optional: If you need to increase the size of the form to accommodate the new button placement, simply select the grey form object and then click and drag a sizing handle. 4 Select the two buttons and the field text boxes. 5 On the Align tab, ensure that Relative to: Selection is displayed, and click the Left align button. To right align form field labels 1 Select all four text labels. 2 On the Align tab ensure that Relative to: Selection is displayed, and click the Right align button. Form labels are simply HTML text frames. This means that you can edit them in exactly the same way as an HTML frame that you place on the page. As we have a dark background, we re going to change the text colour so that it stands out. To recolour label text 1 With the text frames still selected, on the Swatches tab, ensure that the Text fill button is selected. For information on the various types of text frames available in WebPlus, and when to use them, see the online Help or the Text tutorial.

6 6 Dynamic Content 2 Click a colour swatch (we selected Scheme Colour 5). The text is updated to match the new colour. 3 Preview your form in your web browser. 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 address you specified when you created the form.