iHeart Business lets you create and manage forms for your business. This article will explain 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 the Create Form button at the top of the page.
2. Enter a name for your form. This name is internal-only and 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 iHeart Business CRM, the name entered here will automatically create a new contact source in your CRM.
Duplicate a Form
To duplicate a form, simply click the overflow menu next to a form, click “Duplicate”, and confirm in the modal that appears.
Duplicating a form will copy over:
- Form Fields
- Form Field Settings (including descriptions, placeholder text, form field validation rules, etc.)
- reCAPTCHA settings
- Thank you message/page
- Button text
Duplicating a form will NOT copy over
- Form Field Mappings and Form Submission Rules - these will still need to be setup from the Leads Inbox.
- Form CSS
- Form Notifications
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 Leads or Contacts in your CRM. However, if you do not wish to add the user(s) as CRM Leads or 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.
In order to sync responses to your CRM fields, you'll need to use the same field type on your form as the field you plan on syncing it to in the CRM.
|Basic Fields Description
|Use this field to collect a user's name. This field is automatically mapped to the name column in your contact source.
|Use this field to collect a user's email address. The field will require a value that includes the @ symbol.
|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.
|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://
|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.
|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.
|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.
|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.
|Use this field to collect a date and time in a single field.
|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.
|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.
|Use this field to allow your users to select multiple values from a list of options.
|Payment Fields Description
|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.
Drop down: Gives the user the option to select one product form a drop down list.
Radio Button: Gives the user the option to select one product from a list of radio buttons.
Checklist: Gives the user the option to select multiple products from a list
User Defined Product: Gives the user a text field where they fill in the amount to pay.
This field will display fields to enter a card number, expiration, CVV, zip code, cardholder name, and receipt email.
This field will display the overall total price of all products selected in the form.
Once you've selected a field type, it's time to configure the rest of the display options.
Editing the field
To customize your form fields, click the edit "pencil" icon that appears on the right of the form field you'd like to edit.
You can set up field mapping (more on that below) to sync your form responses to the CRM. Remember, in order to sync responses with field mapping, you'll need to use the same field type on your form as in the CRM.
If the field you're editing has options (dropdown, radio button, or checkbox type fields), a checkbox will be available to "Copy over options from the following CRM field". This will pull in the options in the selected CRM field for easy setup. You're welcome to change how these options display on your form by changing the field label.
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.
|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!
|Subheaders work similar to headers, but with slightly smaller text. If your form is getting long, use headers & subheaders to provide structure.
|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
Click the Enable reCAPTCHA switch to reduce spam submissions on your form.
Note: reCAPTCHA will be automatically be turned on for any form with a Credit Card field, and cannot be turned off. This is to protect customer’s credit card information.
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 to 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.
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.
Set submission rules
Submission Rules will determine exactly how a new contact will be added to the CRM.
Submission rules are managed from the Leads Inbox - iHeart Business Forms page. To navigate to this page from within the Forms app, click Navigate to the Leads Inbox.
From there, click the overflow menu next to the form you would like to edit, and select Submission Rules.
- In the first field, select a Contact Type for the new contact in the CRM. A dropdown menu will appear when you click on the field.
- Select the status that will be assigned to the new contact.
- Select what tags will be assigned to the new contact, if applicable.
- Select who the contact will be assigned to.
If the option, Round robin is selected, contacts will be mapped to selected assignees, one at time. For example, if three assignees are selected, the first contact created through this source will be assigned to the first assignee, the second contact to the second assignee, the third contact to the third assignee, and the fourth contact back to the first; and then the process will be repeated.
Duplicate submission rules
Use this section to determine what happens if a user submits the form more than once. These settings are all optional
- Click Enable to update an existing contact if they resubmit their information through this source.
- Select a Contact Type to use when a contact resubmits their information. Then select whether the new type should be added to the existing settings, or replace it instead.
- Select a Contact Status to use when a contact resubmits their information. Then select whether the new status should be added to the existing settings, or replace it instead.
- Select a Tag to use when a contact resubmits their information. Next, select whether the new tag should be added to the existing settings, or replace it instead.
More duplicate submission settings
Select whether or not to overwrite mapped fields with values from duplicate submissions. This is also an optional setting.
Leaving this setting checked means that a duplicate submission can overwrite the values of the fields mapped to this source. Otherwise, a history item is simply created, and any possible change to individual fields is ignored.
Syncing a form field to your CRM:
Field Mapping, like Submission Rules, can be set through the Leads Inbox in the CRM.
- Navigate to the Global App Bar in the top-left corner of your dashboard and select CRM.
- Once in the CRM, select Leads Inbox from the page menu, then select iHeart Business Forms from the left sidebar menu.
If you click on the button within the form that says "Take me to Leads inbox" you'll be at this same step.
- Click on the overflow menu next to the form you would like to edit, then click on Field Mapping.
Determine where to send form submissions
If you would like your form submissions to go directly into your CRM Contacts Table, toggle "Create submissions directly as CRM Contacts" switch ON.
If you would like submissions to go to your Leads Inbox, toggle this OFF.
Then, choose the CRM field that you would like to sync with each form field.
When you have finished, click Save.
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'.
|Service of interest
Here's the information submitted by 'John Doe #2'
|Service of interest
With the 'Prevent Duplicates' 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.
|Service of interest
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!
Add your form to your website
Once your form is complete, then you will want to add it to your website. Check out this article to walk through how to find your form's embed code and add it to your website.