Enhanced in Adobe Muse CC 2015

You can now add radio buttons and radio button groups to allow site visitors to select a single response only on contact forms. When working with simple or detailed forms, you can enable radio button groups on the Options panel. Further, you can configure each of these groups to set a default option.


For more information on working with other types of Adobe Muse widgets, see Working with widgets.

Most sites you visit have a contact page that enables visitors to contact the site's owner. Forms are very helpful because you can gather the contact information of potential customers while also avoiding the spam mail that can result when you publish an email address directly on a web page.

In this article you'll learn how to add contact forms to your Muse sites. 

Add a contact form to your site

Follow these steps to add a Contact Form widget to your site design:

  1. Open a page in Design view to edit it.

  2. Open the Widgets Library. Click the Forms category to expand it and then select one of the two types of forms:

    • Longer Contact
    • Simple Contact

    The BC icons to the right of the widget names indicate that these widgets are built using the Business Catalyst server architecture.

  3. Drag the name of the Simple Contact widget to the page.

    Widgets Library
    Expand the Forms section and drag the Simple Contact form to the page.

    You can add Contact Form widgets just like you drag and drop other widgets in the Widgets Library.

  4. After dragging a form onto a page, use the Selection tool to click once to select the form and then position it in the desired location in the page design.


    If you want a form to appear on every page, you can add the Contact Form widget to a master page. In this case, every page that uses the master page will display the contact form.

Configure the settings for the contact form

In this section you'll take a look at the settings for the Contact Form widget and see how you can set options in the Options menu to control how it will behave.

  1. Use the Selection tool to select the entire Contact Form widget. While the entire form is selected, the Selection Indicator in the top left corner of the Control panel displays: Form: Normal

    The Normal link is a menu with four possible states, just like menu items or buttons:

    • Normal
    • Submit in Progress
    • Submit Success
    • Submit Error
    Submit selection tool
    The Selection Indicator displays the available states for the entire form.

    When you want to adjust the form as it appears in various states, you can select the corresponding state name from this menu.

    Submit error state
    The form as it appears in the Submit Error state.

    While this state is selected, you can adjust the appearance of the error message. For example, you could change the text content or change the error text color from red to blue.

  2. Select the Normal state again from the Selection Indicator menu.

  3. While the entire form is still selected on the Normal state, click the blue arrow to access the Options menu. The set of options in the Options menu affect the entire widget:

    Options menu
    The Options menu displays the settings for the entire contact form.

    By default, the Form Name field is populated with the name of the current page, but you can change the name if desired.

    If you'd like the form submissions to forward to multiple email addresses, you can enter the addresses (separated by semicolons) in the Email To field.

    The behavior of the form submission is set by the option you select in the After Sending menu. Choose between the following options in the Options menu:

    • Stay on Current Page (default)
    • Link to File (upload a file that is linked after form submission)


    Choose the behavior of the form using the After Sending menu
    Choose the behavior of the form using the After Sending menu.

    There are two types of new form elements you can add:

    Standard Fields

    The list of standard fields include:

    • Cell Phone Number
    • Home Phone Number
    • Home Address
    • Website
    • Company
    • Work Phone Number
    • Work Address
    • reCAPTCHA

    If you want to add one of these fields, simply select the checkbox.

    Custom Fields

    Click the + button next to the custom field you'd like to add, and then enter the label in the Design view to describe the new form field element you are adding to the form.

    The following are the kinds of custom fields you can add to a contact form:

    • Single Line Text:  Single line fields are for shorter text, such as the visitor's age or zip code.
    • Multiline Text: Add the multiline text fields when you want to enable the visitor to type more information, such as submitting a comment or asking a question.
    • Checkbox
    • Checkbox Group
    • Radio Button Group

Configure the settings for individual form elements

When you select a form element, the Selection Indicator updates to display the element's name, such as Label, Text Input, or Submit. With the Selection Indicator, you can easily see which nested element in the form is currently selected.

  • Click the entire form once to select it, and then click a field twice more. First the Selection Indicator displays Form, then Form Field, and then Text Input. Text Input is the name of the actual field in a form.

    When a Text Input form element is selected and you click the blue arrow button to access the Options menu, the options provided offer settings specifically related to that element.

    Contextual set options
    The Options menu displays a contextual set of options for the selected form element.

    In the Options menu while a Text Input element is selected, you can choose if the field is required. You can also choose whether the field displays descriptive text to help the visitor understand what to enter when filling out a field.

    In the Parts section, select or deselect the checkboxes to show or hide the field's label and message text.

    While a form element is selected, the Selection Indicator displays the element's name as well as a States menu that you can access in the Control panel (if applicable). The menu in the Selection Indicator makes it easy to select the desired state while you are editing form elements.

    Selection Indicator
    While a form element is selected, use the Selection Indicator menu to select the desired state.

    While a state is selected, you can use the Fill panel or the Control panel to adjust its appearance.

    The states of form fields are:

    • Empty
    • Non Empty
    • Rollover
    • Focus
    • Error

    The states of a Submit button are displayed with the Submit button is selected.

    The states of a Submit button are:

    • Normal
    • Rollover
    • Mouse Down
    • Submit in Progress


    Submit button state
    Select the Submit button to access the states of the button.

    And as you saw in the previous section, the states of an entire form are displayed when the entire form is selected:

    • Normal
    • Submit in Progress
    • Submit Success
    • Submit Error
    Button state
    While the entire form is selected, you can choose the state of the entire form to affect how it will display.

Style and design contact forms

You can design the appearance of Contact Form widgets and form elements the same way you update the appearance of other widgets in Muse. Follow this basic workflow:

  1. Use the Selection tool to select the entire form or the form element you want to update.

    For example, if you want to change the text that appears in the Submit button, you can click the Submit button of the form repeatedly. First you'll select the entire form, then you'll select the Submit button, and then you'll select the text inside the button. Using the Text tool, you can then select the Submit text, delete it, and type a new word that displays in the button. You could also select different states of the Submit button using the menu in the Selection Indicator and change the text for different states.


  2. Once you've selected the form element, you can adjust its appearance.

    For example, if you click once to select the form and then again to select the form field, and then once again to select the text input for the Name field, you can then use the options in the Control panel or the Fill panel to set the background color of the text field.

    Fill panel
    Use the Fill panel to set the fill color of the Text Input fields.

    Using the Fill panel options, you can set the fill color to solid or gradient. Or set a background image for the fill and set the Fitting and Position options. As shown in the figure, you can also adjust the transparency of the fill you apply by changing the Opacity setting.

    Notice that unless you disable the Edit Together option (which is enabled by default), all the fields update when you edit a single field. This feature helps creates a consistent design in your form and saves time—but you can always select the entire form, click the blue arrow button to open the Options menu, and deselect Edit Together if you prefer to style the fields individually.

    Add custom fields
    When the Edit Together option is disabled, the changes you make to one type of form element are not automatically applied to the other elements of the same type.

Test the form and retrieve the submitted messages

When you are finished configuring and styling your form, save the site and then publish it, so that you can test the form in a browser.

  1. Click the Publish button and then click OK.

    Click the Publish Button
    Publish the site with the recent changes.

    A browser window opens to display the published site.

  2. Visit the page with the contact form and interact with it on the live site. Test what happens when you submit the form without entering content in the required fields. Check how the form appears and functions, and pay close attention to how it displays error messages.

    Once you have determined that the form works and displays as expected, try submitting the form with some placeholder message to send a message. Check your email and make sure you received the message in your inbox.

  3. In the left sidebar, click the Web Forms Usage option in the Reports category. The graph that appears displays the recent form activity related to form submissions.

    Web Forms Usage report
    Check the Web Forms Usage report to learn how many visitors submitted the form.

    Using the reports in the Dashboard, you can learn a great deal about the visitors of your website. You can track trends to see when the site receives the most traffic and check the performance of the forms that you add to your site.

    This information is helpful when deciding when to add promotions or update your site's content. It also helps you interact with visitors, because you enable them to send messages and feedback to you. You can have a dialog with visitors, rather than only displaying information in a one-way communication from your site.

    To learn more about building sites with Muse, visit the Adobe Muse Tutorials page. Also check out the Site of the Day page to see examples of recent web designs created with Muse.

Add Google reCAPTCHA to prevent scam

Adobe Muse allows you to add reCAPTCHA, a free service from Google to protect your website from comment spams, bogus registrations, and more. You can enable reCAPTCHA on contact forms within Adobe Muse to allow only valid users to provide information on your website. For more information about reCAPTCHA, see Google reCAPTCHA.

The reCAPTCHA service requires you to generate public and private keys unique to your website domain. These keys have to be copied into specific fields within Adobe Muse to fully enable reCAPTCHA on your website.

Adding and configuring reCAPTCHA to a form

  1. In Adobe Muse, choose Window > Widgets Library > Forms, and add a simple/detailed contact form.

    Forms widget options
  2. In the Options panel, select the reCAPTCHA option.

    reCAPTCHA options

    The reCAPTCHA field (Image Verification) is now added to the form.

    reCAPTCHA field
  3. Configure reCAPTCHA using the following options:

    • Public Key: Is used in the JavaScript code that is served to your users. For information on generating keys reCAPTCHA, see Generate public and private keys.
    • Private Key: Is used to communicate between your website’s server and the Google server. It is strongly recommended that you store the Private key securely, and do not disclose it. Once lost, the Private key cannot be recovered from Google. For information on generating keys reCAPTCHA, see Generate public and private keys.
    • Require Entry: Specify whether reCAPTCHA is mandatory. The option is not editable and selected, by default.
    • Show Prompt Text When Empty: Is used to display a warning message when the reCAPTCHA field is left empty.
    • Audio/Image: Enable audio play for the reCAPTCHA verification code. It allows blind or users with poor eye sight to navigate through your website easily.
    • Refresh: Allow users to refresh image for verification.
    • Help: Enable Help button. On clicking this button, users are redirected to Google online help.
    • Label: Choose to display a label of the reCAPTCHA field. You can use this field to add a title to the reCAPTCHA section of the form.
    • Message Text: Choose to display a message.

Generate public and private keys

  1. Open the Google Admin Console in a browser. On the Google Admin Console, click Sign Up Now button to sign in to your Google account or sign up using the Create An Account option. After you sign in, you are redirected to the Admin Console.

    Google reCAPTCHA Admin Console
  2. On the left navigation pane, select My Account.

    Select My Account
  3. Provide the domain name of your website in the Domain field. Do not provide the full URL of the website, but only the domain name. For example, mysamplemusewebsite.com.


    If you are handling multiple domains, you need to obtain a separate pair of keys for each domain. Also note that, you do not need to obtain keys for websites currently published on Business Catalyst.

  4. Click the Create button to generate unique public and private keys for your website

    Click Create
  5. In the Sites You Administer page, click the name of the website you just added.

    Click the name of the site you just added

    You can see that unique Public and Private keys are generated. As a next step, you need to copy these keys into reCAPTCHA options within Adobe Muse.

  6. Copy the Public and Private keys, generated for your website, in to a text editor such as notepad. And then, copy them in to Public and Private Key fields within Adobe Muse respectively.

    Alternatively, you could switch between the browser and Adobe Muse windows to copy public and private keys in to the respective fields in Adobe Muse.


    Ensure that you copy the keys fully, and do not miss any of the characters.

    Add Public and Private keys


    Once you obtain a pair of keys for a domain, the same pair is shared across all forms on that Muse site. Changing one automatically changes all of them, and schedule a re-export of all the pages and their corresponding .php scripts. If you are using a third-party tool to FTP files to the server, ensure that you copy all the .html and .php files (.php files are located inside "scripts/" folder) on the server, not only the one that had the form they changed.

  7. Preview page in browser or within Adobe Muse to test reCAPTCHA.


This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy