Home / Articles / Working with Forms in the Widget Library Panel of Adobe Muse

Working with Forms in the Widget Library Panel of Adobe Muse

Contents

  1. Forms

Article Description

A new widget category has been added to the Widgets Library panel: Forms. This excerpt shows you how to insert a form and edit form options.

From the book

Adobe Muse Classroom in a Book

Adobe Muse Classroom in a Book

$35.99 (Save 20%)

No changes need to be made to complete Lesson 9 in the Adobe Muse 3rd Quarter update. There is, however, a new widget category that has been added to the Widgets Library panel: Forms. Adobe Muse now has built-in support for contact forms that work with sites hosted using Adobe Business Catalyst. There are also some improvements to the Slideshow and Composition Widgets, such as default formatting and the options available.

Forms

The newest widget in the Widgets Library is the Forms category of widgets. Muse now includes a long and short contact form that you can drag and drop onto the page and edit as you see fit. You can add and remove fields, and style the form as you would other Adobe Muse elements. You can independently style the various states of the form and form fields to provide a compelling user experience, with visual cues for error states, empty states, and more.

Because Form processing requires server-side support, Adobe Muse forms are configured to work when published to Adobe Business Catalyst. If you make changes to your form and publish again, Adobe Muse will make the appropriate changes to your Adobe Business Catalyst forms. The form data will be emailed to the address(es) specified in the form options, which you will see shortly.

Insert a form

The first step in the process is to create a page to contain the form, and then add the form widget to that page. After page 230, you can insert a contact form.

  1. In Plan mode, position the pointer over the Kart Map thumbnail and click the plus (+) to the right to add a page to the right. Name the page “CONTACT.”
  2. Position the pointer over the new CONTACT page and click the plus (+) beneath the page to add a new child page. Name the page “Confirmation.”
  3. The new Confirmation page is what users will be redirected to after they submit the form data, so it doesn’t need to show in the menu.

  4. Right-click (Windows) or Ctrl-click (Mac OS) and choose Menu Options > Exclude Page From Menus.
  5. Double-click the new CONTACT page thumbnail to open the page in Design mode.
  6. Open the Widgets Library panel and click the arrow to the left of the Forms category. There are two forms to choose from: Detailed Contact and Simple Contact. Drag the Simple Contact form widget into the center of the page.

Edit the form options

After inserting the form widget into your page, you need to edit the main form options and then edit the individual form field options as well.

  1. With the form widget on the page selected (you can tell it’s selected because the Selection Indicator in the Control panel shows “Form”), click the editing options icon (white arrow in the blue circle). In the widget Options menu that appears, change the Form Name to “event request.”
  2. Continuing in the widget Options menu, ensure that the following options are set accordingly:
    • Email To: your email address (the default setting, which comes from the Adobe ID used to install Adobe Muse).
    • After Sending: choose CONTACT: Confirmation
    • Standard Fields: This area contains an array of fields that you can add to your form. Select Work Phone Number and leave the rest deselected.
    • Add Custom Fields: Click the Add button (+) to the left of Single Line Text. This adds a generic single line text field to the form. You can add or remove form fields at any time.
    • Edit Together: Selected (the default setting)
  3. Choose File > Save.