Making an online form in Serif WebPlus Before you begin your form, it is a very good idea to plan it out on a piece of paper. Decide what information you wish to collect, and which type of fields will be best for each one. Will you provide the user choices from a list? If so, what options will you provide them. Serif WebPlus includes a Form Wizard to speed up the creation of an online form. This guide shows you how to insert a form without using the wizard, adding each element one at a time. 1. From the Form toolbar, click on Insert Blank Form (or from the Insert menu click on Form and then New Blank Form. 2. Click and drag with your mouse to drag out a suitable sized form on the work area WebPlus will automatically add a Submit button when the form is added. The form area can be resized by dragging the anchor points around the edges. 3. It is easier to layout your form if you use a table. This ensures everything lines up properly. To insert a table, from the side toolbar click on HTML table tool. Drag out the shape of the table inside your form area. Serif Europe 1
4. For an online form, the table does not need to have lines, so stick to the default format. In the table size options, set it to two columns, one column will contain your text labels and one will contain the form elements. Select a suitable number of rows, one for each element you wish to add. You can always add extra rows to your table later. 5. The table will be added to your form. Stretch the table out to fit the size of the form by dragging the anchor points around the edge. 6. In the first row of your table, add the text labels for your form. For this example add Name, Email address, Gender, Favourite Crisp, Comment and Add you to our mailing list. 7. Click in cell B1 of your table. From the Insert menu select Form and Edit Box. 8. Double click on the field you have just added to set its properties. It is important to give the field a name that reflects the information you have collected. Name this field Firstname and click on OK. 9. Click in cell B2 of your table. From the Insert menu select Form and Edit Box. Serif Europe 2
10. Double click on this field to set its properties. In the name field enter email. 11. Click on the validation tab. This makes the browser check the form before it is sent to ensure that all the fields are filled in, or a correct email address is entered. Tick the box that says Edit box must contain an email address and enter a message that will appear if an email address is not put in that field by the user. 12. Click in cell B3 of your table. From the Insert menu select Form and Radio Button. Type the word Male next to the button. Repeat this to add a second button, and add Female next to it. 13. Double click on the first radio button. Set the Group Name to Gender and the Button Value to male. 13. Double click on the second radio button. Set the Group Name to Gender and the Button Value to female. For the two radio buttons to work as a group each one needs to have the same group name. 14. Click in cell B4 of your table. From the Insert menu select Form and Combo Box. Serif Europe 3
15. Double click on the combo box to set the choices that the box will display. Name this field Crisps. 16. Click on the Add Option button to add each of the options you want the box to display. In the Name field, enter the text that will be shown in the list to the user. In the Value field enter the text that will be sent to you when the form is submitted. This could be identical to the Name field, but may be a code or an abbreviated description. Click on Add Another to add more options to your list. 17. All the list items will be displayed in the window. Once you have added all your options to the list, click on OK. 18. Click in cell B5 of your table. From the Insert menu select Form and Text Area. The text area can be stretched to make it bigger. This is important if you are expecting the user to write a lot of text. Serif Europe 4
19. Double click on this field and name it Comment. 20. Click in cell B6 of your table. From the Insert menu select Form and Check Box. Enter a text label next to the check box 21. Double click on the box to set its values. Give it the name Mailing and set the button value to Yes. If you want to have the box ticked by default, and have the user untick it if they do not want to be on the list, then tick the box next to Checked. 22. Your form is almost complete. If you wish to change the text on the Submit button, double click on it and change the Button Label to whatever you wish. Serif Europe 5
23. To set up how the form is processed, double click in the grey area of your form to bring up the Form Properties menu. (or right click and Edit Form Properties) Select An Email Address to have the form sent to you via email. Give the form a meaningful name such as Survey and enter the email address that the results of the form should be sent to. Click on OK when done. 23. Your form is now complete. Test that your form works by previewing it (File then Preview Site then Preview in Window) Enter text into the different text fields. Check that the Combo Boxes and radio buttons work as intended. Close the preview and make any necessary adjustments to your form. It is also a good idea to preview your site in different browsers to make sure it works properly for different visitors to your site. Serif Europe 6