- 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
Adding Web Forms to Web Pages in Dreamweaver
In this section, you'll replace the existing Contact Us Form with the updated version of the form that you edited in the Web Form Builder. You'll leverage the HTML editing features available in Dreamweaver to work with the source code. You'll also learn how to use the Business Catalyst panel and the Module Configure wizard to insert web forms on pages as you are editing them.
There are three methods you can use to add a web form to a page:
- Dreamweaver
- Module Manager
- 1-Click Insert menu
First, you'll explore the process using Dreamweaver. Later in this chapter, you'll learn how to use the Admin Console to insert forms. When you use the Module Manager, you can choose to insert forms as either HTML code or a module tag.
Deleting and reinserting web-form source code
First, you'll open the Contact page and find and remove the existing form in the source code. Follow these steps:
- Launch Dreamweaver and log in to your site in the Business Catalyst panel, if you aren't already logged in.
- Click the Synchronize button to sync the site files in Dreamweaver with the changes you made recently in the Admin Console. In the panel that appears, use the Synchronize menu to choose Entire Site. Set the Direction menu to Get Newer Files From Remote. Click Preview.
The panel updates to display the list of newer files on the host server. Click OK to download (get) the newer files from the remote server.
- In the Files panel, double-click the contact.htm page to open it in the Document window.
- The Contact page loads. The page content contains the Contact Us Form. In Design view, click anywhere inside the form to select it. In the Tag Selector at the bottom of the Document window, click the <form> tag to select the entire form code (FIGURE 5.16).
Figure 5.16 The Tag Selector makes it easy to select the source code of the Contact Us Form.
- While the form code is selected, press the Delete key to remove it. The cursor is automatically positioned at the perfect location to reinsert the new form.
- In the Business Catalyst panel, scroll down through the list of modules and click the WebForms folder to expand it and see the list of subitems. Select the Web Forms option to insert a web form on the page.
- The Module Configure wizard appears and displays a list of the site's existing web forms. Click the radio button next to the Contact Us Form and click Next (FIGURE 5.17).
Figure 5.17 Select the form that you want to insert in the Module Configure wizard.
- The Module Configure wizard updates to provide a text field to add the URL to the page in the site that will appear to visitors once they have successfully submitted the Contact Us Form. This is an optional feature that enables you to create a custom form submission confirmation page. If you want to use this option, create and publish a new page first, and then enter the absolute path (including the http:// prefix) in the provided field.
In this case, the trial site displays the default Thank You page after the form is submitted. So simply click Next on this screen and Insert on the final screen to add the updated Contact Us Form to the page at the location of the cursor's insertion point.
- Save and put the page to upload the changes to the live site. In the Dependent Files dialog box that appears, click No.
)
)
If you want to see the recent changes and test the updated Contact Us Form, switch to a browser and visit the trial site. You can click the Contact Us link in the site navigation to access the Contact page and try resubmitting the updated form.