Tutorials

Table of contents
Close

How to create a form module in a custom module

In the new design manager, default form modules were refactored for more developer control. For example, not every form is needs to connect to Salesforce, and not every marketer should be able to override the notifications email addresses. In this new world, default modules are not a complete rendering of a single HubL tag—in other words, a default form module is not just an entire form but a collection of fields.

What's the difference between a form field and a form module?

A form field contains:

  • A form selector dropdown

  • A post-submit action radio select

  • A thank you message field

  • A form placeholder

In addition to the above, the default form modules contains:

  • A title

  • A boolean to send notifications to a new email address

  • An email address selector

  • A workflow boolean

  • A workflow selector

  • A follow up email boolean

  • A follow up email selector

  • A salesforce campaign field

The form’s field is as simple as possible so it can be customized to exactly what your team needs.

There are two ways to creating a complete form in a custom module: cloning the default form module, or manually adding form fields into a custom module.

Method 1: Cloning the default form module

This method is an easy way to get started without having to manually create the form module.
 
  1. Search for “Form” in your Design Manager
  2. Clone the default module
  3. Add additional HTML/CSS/fields from there

Method 2: Manually adding form fields

This method is a great way to understand how module fields can work together.

Create a new custom module in the design manager.

Copy the base HubL from the default form module:



{% form
    form_key='{{ name }}',
    form_to_use='{{ module.form.form_id }}',
    title='{{ module.title }}',
    follow_up_type_simple='{{ module.follow_up_type_simple }}',
    simple_email_for_live_id='{{ module.simple_email_for_live_id }}',
    follow_up_type_automation='{{ module.follow_up_type_automation }}',
    form_follow_ups_workflow_id='{{ module.form_follow_ups_workflow_id }}',
    response_response_type='{{ module.form.response_type }}',
    response_redirect_id='{{ module.form.redirect_id }}',
    response_redirect_url='{{ module.form.redirect_url }}',
    response_message='{{ module.form.message }}',
    notifications_are_overridden='{{ module.notifications_are_overridden }}',
    notifications_override_email_addresses='{{ module.notifications_override_email_addresses }}'
    gotowebinar_webinar_key='{{ module.form.gotowebinar_webinar_key }}'
    sfdc_campaign='{{ module.sfdc_campaign }}'
%}


Paste this code into your new custom module.

If you do not have a GoToWebinar integration, you can delete the gotowebinar line.

Create the following fields with their respective internal (variable) names:

Field type Variable name Purpose
 Form  form  This creates the base of your form, and fills in the name and form id fields.
 Text field title  Adds a title to your form. This field is optional, just delete it’s usage in the form. 
 Boolean follow_up_type_simple   Toggle to send a form follow-up email
Follow-up Email  simple_email_for_live_id Select an email for the follow-up email 
 Boolean  follow_up_type_automation  Toggle to enroll contacts into a workflow
Workflow form_follow_ups_workflow_id Select a workflow to enroll contacts in
Boolean notifications_are_overridden Toggle to override form notification default addresses
Email address notifications_override_email_addresses Email addresses to override defaults
Salesforce Campaign sfdc_campaign Select a salesforce campaign to associate contacts with.

You now have all the form module functionality. Be sure to give your fields names that make sense to the marketer, since this is what they will see in the editor.