How To Create Or Edit Forms

Our platform makes it easy to create and manage forms for your business. This article will go over the creation process, as well as how to edit the forms you've already made.

For most forms, it is a good practice to connect them to the CRM as you create them. This will save time and confusion later, not to mention the possibility of losing out on valuable customer data.

To access your forms, navigate to the Global App Bar in the top-left corner of your dashboard and select Forms.

 

Creating a New Form

1. To start the process of building a new form, Click + Create Form in the top right corner of the Forms page.

2. In the window that displays, first enter a name for your form, then click Submit. This name will display on your forms page, so be sure to give it a name descriptive enough to differentiate it from your others.

IF you use the Marketing 360® CRM, the name entered here will automatically create a new contact source in your CRM.

 

Adding Form Fields:

3. The following page is the form editor. To save time, name, email, and phone number fields are added to your form automatically. Click + Add Field to add new fields to your form.

The name field is required if you want your form submissions to create or update Contacts in your CRM. However, if you do not wish to add the user(s) as CRM Contacts, then you can click on the "trash can" icon to remove that field.

4. In the Add Field window, select what type of field you'd like to add. The available field types are outlined below.

Basic Fields	Basic Fields Description
Name	Use this field to collect a user's name. This field is automatically mapped to the name column in your contact source.
Email	Use this field to collect a user's email address. The field will require a value that includes the @ symbol.
Phone Number	Use this field to collect a user's phone number. The field will require a valid phone number format like 555-555-5555 or (555) 555 5555.
Website	Use this field to collect the user's website. The field will require the user to enter a URL starting with either http:// or https://
Text Field	Use this field to allow your users to enter a custom text value in a standard text field.
Long Text Field	Use this field to allow your users to enter a custom text value in a larger text field. This is a great option for longer content like a review.
Number	Use this field to collect a number value. The field will only accept numerical values. In order to accept a value with a decimal, please use a text field instead.
Date	Use this field to allow your users to enter a date with an easy to use date picker. Dates are submitted with mm/dd/yyyy formatting.
Time	Use this field to allow your users to enter a time of day. The field uses 12 hour time and requires AM / PM. If you need to use 24 hour time, please use a text field instead.
Date Time	Use this field to collect a date and time in a single field.
Dropdown	Use this field to allow your users to select one value from a drop-down list. This is a handy solution when you've got a long list of options.
Radio	Use this field to allow your users to select one value from a list of options. This is a better solution for shorter lists of options.
Checkboxes	Use this field to allow your users to select multiple values from a list of options.
Payments Fields	Payment Fields Description
Product	Use this field to include the product(s) the user will pay for when submitting the form. Products can be displayed using the following options: Single Product: Give the user one basic product to purchase. Standard CSS options Quantity option can be on or off Has option for product description Can be set as ‘hidden’ if the user has no reason to select a quantity or see the product details at all. (Good option for form that only sells one product w/ no quantity) https://madshot.net/ef4b3f3edd31.png List Products: Drop down: Gives the user the option to select one product form a drop down list. Standard CSS options Quantity can be turned off or each dropdown option can display its own quantity. No product description https://madshot.net/48ede22ea23e.png Radio Button: Gives the user the option to select one product from a list of radio buttons. Standard CSS options Quantity can be turned off or each radio option can display its own quantity. No product description https://madshot.net/006cffc08932.png Checklist: Gives the user the option to select multiple products from a list Standard CSS options Quantity can be turned off or each checklist option can display its own quantity. No product description https://madshot.net/a8f17f5e3211.png User Defined Product: Gives the user a text field where they fill in the amount to pay. Standard CSS options No options for quantity Includes option to set minimum and maximum purchase amounts Includes option to set custom error message when a user does not enter a value between min / max purchase amount. https://madshot.net/bf4f1983facc.png
Credit Card	This field will display fields to enter a card number, expiration, CVV, zip code, cardholder name, and receipt email. Has the option to auto-populate the cardholder name with the form’s ‘name’ field by default. Alternatively, if the standard ‘name’ field is included in the credit card field, a user could submit the form and enter someone else’s name as the cardholder. No CSS options. https://madshot.net/7518801194b1.png
Total	This field will display the overall total price of all products selected in the form. Standard CSS options https://madshot.net/af3ead695ee4.png

Once you've selected a field type, it's time to configure the rest of the display options.

 

Syncing a form field to your CRM:

5. Select the option to Sync this field with the CRM if you'd like the value submitted by the user to automatically be saved with the contact in your CRM.

6. Once you've selected the sync option, a drop-down list of all the available CRM fields will display. Select the CRM field you'd like the data to be saved in.

Each form field that is set to sync to the CRM will display the  icon next to the field label.

 

Overwrite Settings

7. (Recommended) To avoid duplicate CRM contacts, select the option to not create a new contact upon submission.

Let's say you already have a contact named John Doe in your CRM, but another individual of the same name fills out your form. What now? Should a new John Doe be created in the CRM or should the existing one be updated? How can you tell? The solution lies in finding something in each user's submission that'll be unique, like their email address or phone number. For this example, let's choose their email.

For a reference, here's the info already saved in the CRM for 'John Doe #1'.

First Name	John
Last Name	Doe
Email	john.doe@email.com
Phone	555-555-5555
Service of interest	Marketing

 

Here's the information submitted by 'John Doe #2' 

First Name	Johnathan
Last Name	Doe
Email	john.doe@email.com
Phone	123-456-7890
Service of interest	Web development

With the 'If the user's value of this field matches that of an existing contact, do not create a new contact upon submission option' option selected, the CRM will check if the user's value already exists.

Since the email already exists in the CRM, the values from the second submission will be saved for the existing contact instead of creating a new one.

Here's the resulting info saved for this contact in the CRM.

First Name	Johnathan
Last Name	Doe
Email	john.doe@email.com
Phone	123-456-7890
Service of interest	Web development

 

Form Field Label

8. Enter a Form Field Label for the field. This is the text visible to users.

9. Select a Form Field Label Position for the label to display. If you'd rather not display a label, select the Hide Label option. 

Field Display Options (optional)

10. Enter a Description for the form field. Please note: For security reasons, we are not able to allow HTML in these fields.

11. Enter Placeholder text that will display in the field before the user enters a value. To keep the form functional for all users, do not rely on placeholders instead of visible labels.

12. Add Custom CSS Class(es). You can modify the appearance and function of your form fields for different devices and screen sizes. Here is more information about how to add Custom CSS Classes to your form.

Important Notes About CSS Classes:
When listing a CSS class, do not include the period at the beginning of the class.
If more than one CSS class is needed, separate them with a space. Do not use a comma.

Field Validation Rules (optional)

13. If you'd like to force the user to fill out the field, select the Required option.

14. If there is a maximum amount of characters a user can submit, limit the number of characters a user can submit by entering a Max Length.

15. If there is a minimum amount of characters a user can submit, enter a Min Length.

16. To display a customized error message when requirements are not met, enter a Custom Error Message. This message will display only if the user incorrectly fills out a field, like entering a phone number in an email field.

17. Lastly, if specific formatting is needed, enter a Pattern (leave this blank if you're not familiar with regular expressions.)

18. Click Submit to save your field settings.

 

Adding Form Headings, Subheadings, or Paragraphs

From time to time, you may need to include additional elements in your form to separate certain sections of the form or provide instructions or extra info for your users.

Header	Headers will display a nice large headline on the form. This is a great option to provide additional structure to your form or separate sections to keep your form user friendly and easy to submit!
Subheader	Subheaders work similar to headers, but with slightly smaller text. If your form is getting long, use headers & subheaders to provide structure.
Paragraph	Paragraphs will display basic text. This is handy if you need to give users additional info or instruction they'll need to submit your form.

19. Add Form Headings, Subheadings, or Paragraphs as needed.

20. Repeat steps 3 through 19 as needed.

 

Editing Form Settings

Configure "Thank You" page or message

When a user submits a form, they will receive a message that their response has been submitted. You can either redirect users to a "Thank You" page on your website, or you can simply configure a small "pop-up" window that displays.

If you have a page on your website that you would like to redirect users to after submitting the form, enter it in the text box labeled Redirect URL. If you do not want to redirect users to any page, then fill out the fields labeled Title and Description to configure the message that will display to users after they submit your form.

 

Set up Notifications

You can specify which users receive an email notification whenever a user submits your form. Enter the name and email address ot the user(s) that you would like to receive notifications, then select the blue Add Notification button.

When you create a notification, the user's name and email address will appear in a section labeled Existing Notifications.

Advanced Styling

Would you like to change the appearance of your form to match your site's branding and styling? You can add custom CSS styling here to modify the form's appearance. Here is more information on how to add custom CSS styling to your form.

Do I Need to Save My Form When I'm Done?

There is no need to save your form when you're done building. Each new field added is auto-saved for you!