Learn how to add, configure, and test contact forms for your Adobe Muse website. Set up reCAPTCHA to prevent spam or phishing.

Most sites that 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, learn how to add and configure contact forms to your Adobe Muse sites. 

Add a contact form to your site

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

  1. Open Adobe Muse. Double-click and open the page in Design view, where you want to add the contact form. 

  2. Open the Widgets Library panel (Window > Widgets Library). Click Forms, and then select one of the two types of forms:

    • Detailed Contact
    • Simple Contact
  3. Drag the contact widget to the page.

    Expand the Forms section and drag the required contact form to the page.
    Expand the Forms section and drag the required contact form to the page.

    Note:

    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.

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

    Since the Forms widget is responsive, you can preview and check the behavior of this widget in various screen sizes. If you want to change the position of the widget, or modify the pinning and resize options for the contact form fields, you need to first add a breakpoint at the desired location. Then, double-click and select the field that you want to pin or resize. You can either choose None or Responsive Width as the resize option.

    If you want to pin your Forms widget to a particular position in your page, select the Pin option from the Toolbar on top.

  5. While designing responsive web sites, you can choose to pin a specific contact form field to a fixed location. To do so, add a breakpoint. When your web site is viewed in the screen size corresponding to this breakpoint, the contact form field appears pinned to the location you will specify in the next step.

    Double-click and select the field that you want to pin and then select the required pinning option.

  6. You can also select the required resize option for your Forms widget and for the individual form fields. Select the element for which you want to set the resize properties, and select the resize option from the Context menu at the top of the page.

    You can select either None or Responsive Width as the resize option for contact forms.

Configure the settings for contact forms

In this section, you'll take a look at the settings for the Forms widget and learn how you can configure the settings for a contact form using the Options menu.

  1. Use the Selection tool to select the entire Contact Form widget. While the entire form is selected, the Selection Indicator in the upper-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. You can change the name, if desired.

    If you want 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 that you can add:

    Standard Fields

    The list of standard fields include:

    • Email
    • Company
    • Name
    • Work Phone Number
    • Cell Phone Number
    • Work Address
    • Home Phone Number
    • Website
    • Home Address
    • Captcha

    To add any of these fields, select the checkbox against the required fields.

  4. To add custom fields for your contact forms, 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 that you are adding to the form.

    The following are the types of custom fields that 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 the Forms widget as a whole. To select individual elements within the Forms widget, double-click and select the element.

    To know whether the whole widget or an individual element is selected, view the Selection Indicator. The Selection Indicator displays Form if you select the entire widget, and Text Input if you select a particular field.

    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 possible states that you can configure for form fields are:

    • Empty
    • Non Empty
    • Rollover
    • Focus
    • Error

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

    You can configure the following states for the Submit button:

    • Normal
    • Rollover
    • Mouse Down
    • Submit in Progress
    Submit button state
    Select the Submit button to access the states of the button.

    Notice that 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 Forms widget and form elements the same way you update the appearance of other widgets in Adobe 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 directly double-click the Submit button in the contact form. You can change the text in the Submit button by Text selecting the Submit text using the Text tool. Delete the text, and type a new word. 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. After selecting the form element, you can adjust the appearance of the element.

    For example, double-click and select the Name field. 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. You can also set a background image for the fill and set the Fitting and Position options. To adjust the transparency of the fill, you can modify 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 create a consistent design in your form and saves time. However, 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

After you configure and style your form, save the site and then publish it. Now, 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 spam

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, select Window > Widgets Library > Forms. Drag and add a simple or a detailed contact form.

    Forms widget options
  2. In the Options panel, from the Captcha drop-down list, select reCAPTCHA v2.

    It is recommended that you choose reCAPTCHA v2 since Google does not support reCAPTCHA version 1 anymore.

    reCAPTCHA options
    Add reCAPTCHA v2

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

    reCAPTCHA field
    Configure reCAPTCHA v2 settings

  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.
    • Theme: Specify whether you want to choose the light or dark theme for the reCAPTCHA box.
    • Type: Specify whether you want to enable image verification or audio play for the reCAPTCHA verification. Audio play allows blind users and users with poor eye sight to navigate through your website easily.
    • Size: Specify whether you want the reCAPTCHA size to be normal or compact.
    • Label: Select this check box to 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: Select this check box to choose to display a message.

Generate public and private keys

  1. Note:

    You don't need to obtain keys for websites currently published on Business Catalyst.

    Open the Google Admin Console in a browser. On the Google Admin Console, click Sign Up Now 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 Google reCAPTCHA Home page.

    Google reCAPTCHA Admin Console
    Google reCAPTCHA

  2. Click the Get reCAPTCHA button on top of the page.

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

    Register your site for Google reCAPTCHA
    Register your site for Google reCAPTCHA

  4. Click Register to generate unique public and private keys for your website.

    Notice the public key (Site key) and private key (Secret key) that are generated.

    Generate public and private keys
    Generate public and private keys

  5. Copy the Site Key and Secret key to Public and Private Key fields within Adobe Muse respectively.

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

    Once you obtain a pair of keys for a domain, the same pair is shared across all forms on that Adobe 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 were updated.

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

     

Troubleshooting contact form issues

Can I customize my contact forms?

You cannot customize contact forms using Adobe Muse. However, you can use third party widgets to customize contact forms. You can also design custom forms by inserting custom HTML or using third party widgets.

You can also use Business Catalyst to customize your contact forms. For more information on working with forms using Business Catalyst, see http://docs.businesscatalyst.com/user-manual/CRM/web-forms/customizing-webforms.

How can I resolve reCAPTCHA errors in my contact forms?

Google has released reCAPTCHA v2. If you are using the earlier version of reCAPTCHA, you must have the public and private keys intact. Google does not support reCAPTCHA v1 anymore. A simpler solution would be moving to reCAPTCHA v2. To know how to configure and use reCAPTCHA v2 within Adobe Muse, see Configuring recAPTCHA in Adobe Muse.

When I use the FTP Upload feature to upload my site to my hosting provider, Muse displays a warning that says the Form widgets may not work. How can I resolve this error?

Some web hosts don't support all the requirements for contact forms in Adobe Muse. When you upload to your host using the FTP Upload feature in Adobe Muse, logic in the service attempts to determine if everything is configured properly on your host provider's servers. If not, Adobe Muse displays a warning with information about the missing requirements. You can contact your web-hosting provider and ask them to resolve the configuration problems.

How can I check if my hosting provider supports the requirements for Adobe Muse contact forms?

After uploading your Adobe Muse site containing a contact form, you can point your browser to <yoursite-address.com/scripts/form_check.php>. If your website supports everything needed for forms to work, you should see three green checkmarks on this page. If not, contact your hosting provider. They should be able to look at the php code for this file and determine what configuration changes need to be made on your server for Muse PHP forms to work properly.

Why am I not receiving emails with form data?

This issue could be caused due to some issues. Follow these troubleshooting steps:

1. Check your email Inbox spam folder. If you find form messages in your spam folder, mark the messages as non-spam.

2. Some hosting providers refuse to send emails to an email address on a different site's domain. For example, if your website is www.example.com, but your form is configured to send email to someone@email.com, your web host provider may refuse to send the email generated by the Form widget.

To resolve this issue:

  • Update your form to send email messages to someone@example.com. This change may resolve the issue and allow the messages to go through. If you're hosting provider is GoDaddy and you're form e-mail address is to a non-GoDaddy e-mail account, you need to enable "remote" mail in cPanel. (A similar change may be required on other hosting providers).
  • From the GoDaddy page, navigate to your cPanel. This is where you manage your web hosting.
  • On the main cPanel page, scroll down to where it says ":::Email"
  • Click on "MX entry" which is located right below "Accounts". This is the Mail Exchanger setting. By Default, GoDaddy assumes you will be using a GoDaddy email account.
  • Ensure that the "Remote Mail Exchanger" is selected.
  • By default GoDaddy assumes you will be hosting your e-mail through GoDaddy. If you set up an email address for your form that is not a GoDaddy hosted email address, then GoDaddy does not accept it by default. You have to give GoDaddy permission to send a form to what GoDaddy considers a "remote" email address.

3. Some IT Departments block emails from someone@bigcompany.com to someone_else@bigcompany.com if the email message isn't sent by the standard bigcompany.com mail servers. Try changing the form's options to add another email address (listed first), which does not end with: @bigcompany.com. This change may allow the form messages to be delivered to both the email addresses.

4. Visit http://my-site.com/scripts/form_check.php in a web browser and make sure you see all green checkmarks. If some items do not display green checkmarks, it means that the hosting server is not configured correctly to allow the Form widgets to send email messages to the address you've specified.

Contact your web-hosting provider about the server configuration problem. Describe the items that are not marked as green in the form check page, so that they can help you set up the servers to use the correct settings.

Can I prepopulate a contact form field with a URL?

You need a JavaScript to retrieve information from the URL or you need a dynamic backend that populates form fields. To prepopulate form fields in Adobe Muse, integrate your contact form into your Adobe Muse page using the Insert HTML option.

Integrate the link to the script preset.js in the settings on the Adobe Muse page (head). Then integrate the <body onload="populate('myForm');"> using the Insert HTML option in Adobe Muse.

Frequently asked questions for PHP configuration

What is PHP and why is Muse creating PHP files?

PHP is a server-side scripting language. It is often used to dynamically build web pages. You can learn more about PHP here: http://en.wikipedia.org/wiki/PHP.

If you use the 'Synchronized Text' feature in Adobe Muse, the app will output any page that uses Synchronized content as a PHP file when you upload to your webhost using FTP. This is done so that the website contains only one copy of the shared data. This shared data is dynamically inserted into the pages, and is used when those pages are rendered.

The PHP files also allows synchronized content using Adobe's In-Browser Editing technology. You can edit your content once and update everywhere on your website, wherever the Synchronized Content has been reused.

I tried to upload to my site with Muse's FTP, but I got a warning about lack of PHP support. What does that mean?

When you upload using FTP, Adobe Muse attempts to verify that your web hosting server supports the technology needed to make the Synchronized Text feature work for your site visitors. If your host does not support PHP at all, or only supports a very old version of PHP, Adobe Muse disables PHP generation. This results in a warning during the upload process.

What is an .htaccess file and why is Muse creating one?

An .htaccess file is used by most web servers to configure page redirects and control other options. You can learn more about .htaccess files here: http://en.wikipedia.org/wiki/.htaccess

If Adobe Muse generates PHP files for your site, it tries to redirect any request for your old page(for example, mysite.com/about.html) to the new php page (mysite.com/about.php). This is done using the .htaccess file.

Which version of PHP is required to support the Synchronized Text feature?

Currently, Adobe Muse requires PHP version 5.1 for dynamic Synchronized Text support.

What is the PHP version used in Adobe Muse?

You need a PHP versions later than 5.1 for contact forms in Adobe Muse.

My website hosting provider doesn't provide PHP but I want to use the In-Browser Editing tool to edit Synchronized Text on my website. What should I do?

You should contact your hosting provider and ask them for assistance to get the PHP working for your site, or consider switching to a hosting provider that does support PHP.

Can I set a preference so that Adobe Muse doesn't generate PHP?

Yes. Open the Site Properties dialog in Adobe Muse. Uncheck the Enable for Synchronized Text checkbox in the In-Browser Editing section. Now Adobe Muse will generate .html files instead of .php files. You should select the checkbox again if you want to use Adobe's In-Browser Editing to edit Synchronized Text at one place.

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