-- If you prefer a video walk through, check out this video.
Adding online forms to your website is a great way to capture new leads on your website or landing pages.
When a contact fills out a Hatchbuck form, 3 things will happen:
- They will be added as a contact in your database
- Any automations you have applied will be triggered
- A cookie will drop and you can begin to track where the contact is going on your website (learn how to set up webpage tracking here)
Now that you understand online form basics, here's how to create your own:
- Navigate to Tools > Online Forms
Select +New Online Form, which will bring you to the screen below:
- Name & provide a brief description on your form
- You must choose a default sales rep that the contact will be assigned to when coming into Hatchbuck
- The default contact status drop-down identifies how you want contacts to be classified when they enter the system by filling out this form (e.g. uninterested, lead, prospect, opportunity, customer).
- Select an option for how you would like Duplicate Records to be treated. Hatchbuck will use email address to find existing contacts in your database. If it locates a contact, the information will merge using the option you have provided here.
Duplicate Options Explained:
Do not update the existing record: If a user submits a form and that contact is already in Hatchbuck (based on their email address), but different information such as address, phone, etc. the information will not be updated in the system. (this includes the 'status' field mentioned above, so if your form should be moving contacts forward in the pipeline, keep this in mind.
Update only blank fields in existing record: If a user chooses this option, only fields which were left blank will be filled in by new information. Fields which already have data in the system will be ignored
Overwrite fields in the existing record: If a user chooses this option, fields that contain data will be overwritten by new data submitted via the form EXCEPT phone number and address fields. Those fields will be appended to the contact record.
Double Opt-In option, if moved to yes, Hatchbuck will NOT add the contact or their information to your database until the contact has clicked a confirmation link within an email sent to them.
- You can organize your form in Folder where you are able to easily locate it in the future as you build your database.
- Locking the form will allow only admins within your system to make changes.
BUILDING THE FORM:
- The Continue button will take you to our form builder:
- To add fields: drag and drop the type of field you want into the form.
- Make sure to note whether or not you would like that field to be a required field on your form using the red required asterisk in your top dashboard panel.
- Any field in the "Contact Fields" drop-down will merge into the Contact Record.
- The Tag Comb and Tag Checkbox fields allow your contacts' to segment themselves by selecting their own interests as it relates to your products or services. They will be tagged based on their selection(s).
Any field with the "Custom" title will merge into a Custom Field on the Contact Record.
- IMPORTANT: You MUST have already created the fields you would like to merge in your Account Settings > Customizations > Custom Fields (help with custom fields)
- Make sure click the gray gear icon and fill in that last box with the Custom Field you would like this information to be tied to.
- Social Networks, Advanced Fields, and Survey Fields are NOT added into your Contact Record. These are for your internal use only. You can view the data put in these fields via a notification email (see Actions below)
CUSTOMIZING THE FORM
- Changing the Color and Style: You have options for font style and color as well as background color in your form. Edit those as you would like.
- Hack: Make the form background, etc. transparent so it blends in seamlessly into your website!
- You can choose from a list of themes to customize your form as well.
Changing the Size: You can change the field width and size by clicking on the field you would like to adjust and choosing the width or size options in the toolbar.
You can also change the width of the entire form from the builder. Select Form Width and adjust as you need to.
*Hatchbuck Hack: To make your form fit in a certain place on your website, right click on the area and select "Inspect Element". This should give you the height and width of that area. Match the width number from your site to the width number in the form!
To Adjust Height of your Form using iFrame:
- Delete the part of the code that says: onload='this.height=screen.height;'
- Insert: height="NUMBERpx" (where NUMBER=the height of the area on your site).
SETTING UP AUTOMATIONS FOR YOUR ONLINE FORM
Your next step is to set up all the AUTOMATIONS you would like triggered when someone fills out a form.
- Note: the "Send a Notification" option will send an email to your team members you select. You can check the box that includes all the data from the form in that email as well.
- The "Send an Email" option automatically sends an email to the person who filled out the form.
- You may include as many actions as you would like to each form you create within Hatchbuck.
- Reminder: The 'send a notification' action is separate from the notifications already set up in your Account Settings. If you already have your Email Notifications in your Account Settings set to notify you for every form submission, you do not need to add a notification as an action here (unless you want to notify a second person of this activity).
SETTING UP YOUR THANK YOU MESSAGE
On the next screen you can choose to add text to an existing thank you page or link back to your own website, landing page, or pre-designed thank you page
- Best practice: re-direct back to your site so that leads can browse and possibly find more products or services that you offer!
EMBEDDING YOUR FORM
- On the final page choose your embedding option and then copy the code to put on your webpage.
- The Link option is great for testing, copying into emails, or for use as a quick entry at a networking event. See the Hatchbuck Hack article about this for more info.
- Choose the option that works best for you. The iFrame will insert the form onto your website exactly as you have created it within Hatchbuck. The HTML/CSS code is a great option if you are planning to customize the design to fit in with your website design.