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:

  1. The contact will be added as a contact in your database
  2. Any triggered actions you have specified will launch
  3. A cookie will drop and begin to track where the contact is navigating on your website

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 prompt you to this screen below: 



Basic Information:
  • 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, any fields that contain data will be overwritten by new data submitted via the form.

What's the best practice? Most clients prefer to "update only blank fields" option to capture additional info.



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 asterick in your top dashboard panel.

Field Descriptions:

  • Any field in the "Contact Fields" drop-down will merge into the Contact Record. 
The Tag Comb and Tag Checkbox fields are great ways for your to help your contacts 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 yourAccount Settings > Customizations > 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 entered into.


    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 as well. Select Form Width and adjust as you need to.

 

  • 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.