Bite sized tutorials

Daily tutorials

1. Editing Text

2. Borders and Images

3. Moving and Resizing

4. Applying Mouseovers

5. Adding Flash

6. Templates

7. Backgrounds

8. Global Styles

9. Navigation

10. Forms

Button guide

Day 10 – Adding a Form

Forms enable you to collect visitor data such as sales enquiries, contact details or survey information, professionally and easily. With webmanager you can simply drag and drop form components onto a webpage.

Step 1

Select file open, open the Contact page that we linked to in the previous tutorial

Step 2

Click the form button on the toolbar, A form container will be added to your webpage and will hold all of your form fields. Position the Form container in the center of the page. Expand the width of the form box by about 50%

Step 3

New buttons for the form components will be added to the toolbar.

Step 4

Select to add a Text Input field by clicking the button on the toolbar
With the text input field highlighted select properties, change the name of the field to be meaningful i.e. FullName as this will be referenced in the email you receive.

Step 5

Note that the available buttons now change, Select the label button to add a text label to identify the field

Step 6

Align the label alongside the text entry field

Step 7

Click the ‘T’ icon to edit the text of the label, add the text: “First Name:”. At this point you can select to change the text justification from Left to Right alignment if required

Step 8

Repeat the above process for 3 more text fields with the labels: “Last Name:”, “Address:” , “Telephone Number:”

Step 9

Click on the Submit button on the toolbar to add a submit button to your form

Step 10

Select the form container and click properties on the toolbar

Step 11

On the properties menu you can configure what happens to the form data you have entered. For this example select the default Post method

Step 12

In the ‘Send Results to’ section, enter your email address. This is the address that the form data will be sent to
If you would like your users to be re-directed to a different page on submission of the form i.e. a Thank you page enter the URL of that page in the ‘Re-Direct after Submit’ field
Click apply to save your form details

Step 13

Click the main save button on the toolbar to save your page

Step 14

Click view live site, test your form by filling out the form fields and click submit

Summary

In this tutorial you learned how to add a contact form to your website and how to collect the information from it easily via email.
This Tutorial is Day 10 in a Series of 10 Tutorials designed to teach you the features of Webmanager. We hope you have enjoyed using Webmanager if you would like to continue and sign up for a full acccount, login and click the 'buy now' button.

If you would like to learn more about working with forms. Visit our bitesize Tutorials:
http://www.webwam.co.uk/support/bitesized/