Forms.pdf

Dynamic Content

Forms

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 email 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.

Dynamic Content

Forms

Forms are used to collect data from site visitors. Data collected can be as

simple as the person’s name and email 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 Forms 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.

Dynamic Content

Forms

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 anti-

spamming control can help to prevent junk

email 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 e-mail

address .

Type a name for your

form. (This must not

contain spaces or special

characters.)

Type the email address

to which you want the site visitor’s form data to be sent, e.g.

webmaster@domain.com

Click Finish .

Dynamic Content

Forms

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...

Dynamic Content

Forms

To move and align form buttons

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

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.

align button.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: