< Back to All Pod Tutorials

Contact Form

The Contact Form allows you to customize a request form with as many fields as required and is a great way to gather the information needed to assist customers better. Contact Forms can be added in Page Section or Grid Cell.

The Steersman Contact Form. “Unauthenticated User Message” is filled out, and “Collect Phone” and “Mark Phone Required” choices are selected.

Creating your Contact Form fields

Contact Form template

1. Mode: There are three options to choose from.
   • Prefill the Form for registered users. When a customer already logged in to your online shop arrives on a form, their name, email, and phone number will be prefilled.
   • Only registered users may fill out this form. The form will be visible once the customer creates an account or is signed in.
   • Treat all users as new visitors, do not prefill. The fields will not be prefilled even if your customer is logged in to their account.
2. Sales Team: Select from your Sales Teams (created in the CRM app). Once a form is submitted, that lead will appear in that Team’s log. Once you choose a “Sales Team,” you can select a “Salesperson,” who will be notified when a form has been submitted. If you do not set a “Sales Team,” it will automatically be assigned to the first Sales Team from your CRM app.
3. Image: Adding an image will change the layout. This layout is beneficial if only a Contact Form is on the page. It creates visual interest and helps in organizing your form. The image will disappear on smaller screens like mobile devices.
4. Title: The title that will appear on your form.
5. Unauthenticated User Message: You can add intro text to your form here.
6. Authenticated User Message: You can tailor your message for registered customers. If you don’t fill this out, the “Unauthenticated User Message” will be the universal message for all users.
7. Message Field Title: Customize the text to prompt your Message field box. If you leave this empty the text will read “How can we help you?”.
8. Google Analytics Event Label: Add a tag for this form to see its related activity on your Google Analytics account.
9. Collect Message, Phone, Company Name, and Address
10. Mark “Phone Required” and “Company Name Required”: This will mark the fields on the form with a red dot, stating that the information is required to send the contact form. Name, Email, and Message are automatically flagged as required.

Custom Fields

In Custom Fields, you can customize fields to create a form that fits your needs. Add as many fields as you like to get the necessary information from your customer. Clients have used custom fields to create wholesale account applications and credit applications.

• “Add a line” to create your custom fields. Your custom fields can be grouped into sections.
  • Clients have used multiple groups when requiring more than one reference for their applications.

Custom Fields template

1. Group Title: An optional way to title the grouped section.
2. Rows: You can create three types of rows; Inputs, File Upload, or Static Text.
   • Inputs: Use this to add a regular field box. Identify your field box with the “Field Label.” You can also mark if you want this information required. The width of the field box is also adjustable. A “Width” of 100 will make this box span the entire form’s width. You can change the number if a smaller container would be appropriate, like a zip code or date. In Mobile view, these fields will become the entire screen width.
   • File Upload: You can add a label for your file upload, mark it as required, allow multiple files, and choose which file types to accept.
   • Static Text: A simple text box for any content you want to add.
3. To quickly add rows one after the other, click SAVE & NEW to open the next row type and continue adding fields. Click SAVE & CLOSE to see your grouped rows and continue adding rows from here.

Once your Custom Fields group is formed, click SAVE & CLOSE.

• You must SAVE your form to see your custom changes.
  • Not yet saved
  • Saved

Contact Form example

This form example is populated with the following;

• An image
• “Title,” “Unauthenticated User Message,” and “Message Field Title”
• “Collect Message” and “Collect Phone” are selected
• Two “Custom Fields” groups are populated- one with a “Group Title” and one without
  • The first group has two field boxes with different size widths
  • The second group has a “File Upload” option and “Static Text”

Confirmation Message

A Confirmation Message will appear when the user clicks SEND. You can customize what your customer sees at the bottom of the Contact Form template.

If you choose to leave the “Image,” “Title,” “Message,” and “Button CTA/URL” blank, a standard confirmation will appear, as seen in the example below.

An animated checkmark is the preset styling for the Confirmation Message.

Below is an example of Steersman’s Confirmation Message, which has the “Title,” “Message,” and “Button CTA” with “URL” populated.

You can add an image to further customize your Confirmation Message

Save and publish

To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.