Ask a Question ?
Design & Publish Websites Faster

How to Set Up a Contact Form App

What You’ll Learn

In this article, we’ll show you how to set up a Contact app. With this app, you’ll enable your visitors to send you inquiries through a form on your site. There are other apps that include a way for visitors to contact you, like the Banner, Button, or Ask Me A Question apps.

Steps for Setting Up a Contact Form

Installation

1. Open your site in authoring mode and go to the shelf. Click on Apps, and look for Contact. Click and drag the button labeled “Install New” (on the right) to where you want it installed.

App Store menu, showing the Contact app

2. When you drag the button, it will turn into a box that you can drop in one of your columns.

Drop the box of the new app where you want it to load

Wherever you drop it, there it will load and look like the following image.

This is how the Contact app will look by default when it loads

Customize it

3. You can edit the title and subtitle by double clicking it. You may only use the title and delete all text of its tagline. Or keep both, it’s up to you.

Edit title by clicking and start typing (or removing text)

Form Settings

4. To add or remove fields, click below the form, where it says “Form Settings”.

Click on the "Form Settings" to set the fields you want to make available

Here you can configure three different things.

URL Redirect

Set a URL for your users to be redirected when they successfully submit your form (like a thank you or follow-up page).

A page where you want your visitors to go after submission

Thank You Message

Or, if you’re not going to redirect them, you can set an inline “thank you” message. This one will appear right there when the user sends the form data.

Success message shown after users submit the form

Available Fields

And lastly on this window, you can choose which fields you want to show to your visitors. You can either set a field to “Ask as required”, “Ask as optional”, or “Don’t ask for it”. “Ask as required” will prevent the visitors to submit the form until they’ve filled that field. Whereas “Ask as optional” will allow users to send it even if they don’t enter data for that field. If you choose not to ask for it, that field won’t be displayed.

Choose the form fields you want to display

Settings

5. To edit the label of each field, click on the wrench icon, on the app toolbar.

To edit labels on your form fields, click the wrench icon

Labels for Fields

This will open another settings window, with a list of the items in your form. For each of these items, you can edit the label of what will be presented to your visitors. For example, for the “Email” field, you may enter just “Email” or “Enter your Email” or even “Please enter a valid Email address”. You don’t have to edit labels for the fields that won’t be present on your form.

Enter a label for each field of your form

Style Propagation

At the bottom of this options window, you’ll find the style propagation checkbox. Learn more about how to make your styles consistent on that link. Probably you’ll want to leave this option checked, so that the styles remain the same on other pages where you install this app.

Inquiries

6. And, to check your visitors’ input, go to the app toolbar, and click on “Inquiries”.

To see your users' messages, click on the "Inquiries" button

A window will appear with a list of your inquiries, in case you have some.

In this window you can see messages from your visitors

Note that you can go into Inquiries any time you want to check your users’ information. Plus, the administrator of the site will receive an email (to the address he/she used to create his/her account) with the information provided by the user.

Thank You Email Template

When visitors submit the form, a “thank you” message is sent to the user-provided email. You can customize that email by clicking on the button on the left that reads “Edit email template”. Here you can change the “name” of the sender (you can use your own name, the name of your company or product) so your visitors know who the email’s from. There’s also a field available for the “subject” of the email.

Sample email template

Obviously, you can customize the message itself by using the WYSIWYG editor to style and link the text. In the “Reply to” field you’ll be able to add an email address in case your users want to reply to the confirmation message. When you are done setting them up, hit the “Save” button below.

And you’re done! You can now have input from your users sent directly from your website.

Have any questions regarding the Contact app? Share it on the comments!

Menu