- 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
Creating Web Forms with the Web Form Builder
In the previous steps, you reviewed the Contact Us form that was included with the trial site to see how it works on the live site. You also explored how the form data is displayed to your clients within the Admin Console and how forms can be set up to send notification messages when a new form submission is received.
Next, you learned how to edit the form in the Web Form Builder and make changes to it. You saw how to delete the existing form code and reinsert it, and how to insert web forms with module tags.
It's important to note that there's nothing special about the Contact Us Form that is included in the trial site's template. It is a generic form just like the forms you can make from scratch. Remember, although you can insert the forms you create using both the Admin Console and Dreamweaver, you can only create and edit the forms themselves using the Web Form Builder in the Admin Console.
As you build sites for clients, you can create unlimited web forms and configure them to use any combination of form elements, along with the default required name and e-mail fields.
Creating a new page to insert the form
In this section, you'll create the Suggestion Box page that will be used to display the form.
- In the Admin Console, choose Website > Web Pages > Create A New Web Page.
- The Web Page Details page appears. Enter the page's filename in the Page URL field: suggestionBox.htm.
Enter the page's name in the Page Name field: SUGGESTION BOX. Leave the Templates menu set to use the site's default template.
- Click the HTML tab of the online editor and type in the following code to add a white background to the page:
<div class="main-holder"> <div class="content"> </div> </div>
NOTE
It's faster to use this shortcut by selecting the menu suboption rather than clicking the same option in the Action Box sidebar on the Web Page List page.
- In the HTML tab of the Web Page Content field, enter the following text between the <div class="content"> and the first closing </div> tag: We want your feedback! Click the Design tab and select the text you just entered. Use the Paragraph Style menu to set the text as Heading 1.
Click your cursor at the end of the header text and press Enter (Windows) or Return (Mac) once to add a new line break (FIGURE 5.19).
Figure 5.19 Add a header to the Suggestion Box page.
Later, you'll insert the Suggestion Box form at this location on the page.
- Scroll to the bottom and click Save And Publish to save and publish the page.
)
Updating the site navigation with a link to the new page
To make the new Suggestions Box page easy to access, you'll add a link to the new page you just created to the footer menu of the site. Follow these steps:
- In the Admin Console, choose Website > Dynamic Menus. The list of existing Dynamic Menus is displayed. Click the Footer Menu to edit it and then click Next.
- The Dynamic Menus Footer menu page appears. Enter the label for the new menu item in the Item Label field: Suggestion Box.
TIP
It's faster to use the submenu options of the main Admin Console interface that appear when you roll over them. For example, you can choose Website > Dynamic Menus > Footer Menu > Add / Edit Menu Items to directly jump into the section. These menu sub-options are only displayed after you have previously visited a section in the Admin Console.
- Click the box icon below the Item URL field to open the Link Manager. Click the down arrow icon below the Select Web Page field and select the new Suggestion Box page you just created. Click Select to close the Link Manager and add the link to the page in the Item URL field.
- Use the Parent menu to choose the Our Company menu item. Scroll down to the bottom and choose Save Item.
- The new Suggestion Box menu item is added to the Our Company section of the footer menu, at the bottom of the list (FIGURE 5.20).
Figure 5.20 Add the Suggestions Box menu subitem to the Our Company section of the footer menu.
)
It's already in the perfect location for this project, but if you want to move the menu around to reposition it, you can right-click on the option and choose Move Up and Move Down. The footer menu in the live site is automatically updated when you click the Save Item button. If you'd like, you can switch to the browser window that displays the live site and refresh it. Click the Suggestion Box link in the footer menu to see the Suggestion Box page displayed.
Creating a new web form in the Web Form Builder
Now that the page is created and the new page has been linked from the menu, you are ready to create the Suggestion Box form.
- Choose Modules > Web Forms > Create A New Web Form. The Web Form Builder page appears.
- Enter the name of the form in the Web Form Name field: Suggestion Box.
In the Use Workflow menu, choose the option Customer Inquiry Workflow (FIGURE 5.21).
Figure 5.21 Set the workflow for the Suggestion Box form in the Web Form details section.
By adding a workflow, you're configuring the form to notify you (since it's currently set to notify all users in the Administrators role) whenever the form is submitted. Because this form is a Suggestion Box, you can test the behavior of receiving the notifications and using the case system in the Customer Summary section of the Admin Console to track and respond to customer suggestions.
- Click Save to save the Web Form Details and close the window. The preview of the Suggestion Box form is displayed. By default, the name and e-mail address fields are already included and set as required.
NOTE
Each form includes an auto-responder e-mail message that will send an auto-reply to the visitor who submits the form. You can edit the contents of the message as well as update the message's design. To access and edit the auto-responder message, click the Setup Auto Responder link in the Action Box sidebar.
- Click the Text (Multiline) option in the Custom Fields section of the Add New Items panel. In the window that appears, enter the field name, Suggestions, and set the field as required. Click Save to add the new field to the form.
- Click the Checkbox (List) option in the Custom Fields section of the Add New Items panel. In the window that appears, enter the field name: Would you like an email sent to you if we implement your suggestion? In the Items field, type Yes. This time don't set the field as required. Click Save.
The preview of the form updates to show the recent changes (FIGURE 5.22).
Figure 5.22 The Suggestion Box form with the added form elements is displayed in the preview area.
Remember, there's no need to click Save to save the web form. You can simply navigate to another page of the Admin Console and the form is saved in its current state automatically.
)
)