- Examining the Contact Form on the Trial Site
- Accessing Form Data in the Dashboard of the Admin Console
- Understanding Workflows
- Editing Web Forms
- Adding Web Forms to Web Pages in Dreamweaver
- Using the Module Manager to Insert Web Form Module Tags
- Creating Web Forms with the Web Form Builder
- Adding Web Forms to Pages with the 1-Click Insert Menu
- Overview of Working with Web Forms
This chapter is from the book
This chapter is from the book
This chapter is from the book
Editing Web Forms
In the previous section on workflows, you reviewed the Web Form Details to learn how workflows are applied to individual web forms. You also interacted with the Contact Us form to see how it works in the default configuration of the trial site. Now, you'll learn how to edit the form elements to customize the data collected when a visitor submits the form. The Web Form Builder includes a wide array of fields, menus, and options that you can add to forms to gather the specific data applicable to an online business. Additionally, the Web Form Builder makes it easy to add, delete, edit, and rearrange the elements of each form.
Choose Modules > Web Forms to see the list of existing web forms appear. Click the Contact Us Form link to open the form in the Web Form Builder. A preview of the Contact Us Form is displayed in the center area (FIGURE 5.13).
Figure 5.13 The Contact Us Form is displayed in the Web Form Builder.
The Web Form Builder is a visual interface that enables you to create and edit forms. The forms you create are generated with standard HTML, CSS, and JavaScript code. You can adjust the appearance and style all the form elements the same way you update page elements in other, non–Business Catalyst sites.
TIP
If you're familiar with programming in JavaScript, you can pre-populate hidden form fields based on data entered in other fields, add alert messages, and customize other behaviors in the form.
- Take a moment to review the existing form elements. As mentioned earlier, the name and e-mail fields are included by default (and are required fields) in every web form. This ensures that the system can match every form submission to an existing customer record (if a matching e-mail address exists in the system) or generate a new customer record.
All other form elements can be edited or deleted to change the data that's gathered by the form. You can also easily reposition the form elements within the form to rearrange them. For example, if you select the Cell Phone Number field element, you can drag it up or down within the preview area. When you release your mouse, the field snaps into place in its new location.
To delete a form element, click the Delete button (the red circle icon) in the top-right corner of the element that appears when you hover over it (FIGURE 5.14). For this example, delete the Home Phone Number field.
Figure 5.14 Hover over a form element to see the Edit and Delete buttons appear.
Click OK in the confirmation window that appears to delete the form element.
- If you'd like to edit a form element, hover over it and click the Edit button (pencil icon) to change the form element's label and required status. When a form element is set as required, a red asterisk is displayed to the right of the form element's label.
- You can add new form elements by selecting the items in the left side of the Web Form Builder. The top portion of the Add New Items panel includes the tabs with different categories of the input items you can add to the form (FIGURE 5.15).
Figure 5.15 The Add New Items panel contains prebuilt form elements to add to the form.
)
)
)
The Business Catalyst Platform is an all-in-one solution, so the categories of form elements cover complex interactions with the other features of the site, including contact information, e-commerce, marketing, file attachments, image verification (CAPTCHA), and e-mail newsletters.
In the bottom portion of the Add New Items panel, you can create and add your own custom fields with unique labels. Choose from a wide assortment of form inputs, including fields, menus, lists, checkboxes, radio buttons, and datepicker calendars.
NOTE
When you make changes to a form with the Web Form Builder, there's no need to click a save button. Each change you make is saved automatically as you update the form. When you've finished editing a form, simply navigate away from the page.
If you'd like to experiment with the options in the Add New Items panel to add custom fields to the form, you can update the existing Contact Us form. However, for this site project, the Contact Us Form is working as expected right out of the box.