What is the SuperForm theme?

SuperForm empowers you to design multistep forms featuring various input types such as regular fields, checkboxes, radio buttons, and dropdowns. Selectively determine which form responses will be integrated into HubSpot properties and which will be exclusively retained as a note in the activity flow. That all comes in a HubSpot module.

Installation

The installation is straightforward through the HubSpot Marketplace. After installing, you have the new theme ready for use. To get Superform running, you need two more things:

• First of all you need a free Pipedream account. You can create one here, and if you use my affiliate link, that would be awesome :). Superform uses Pipedream as a Serverless solution to bring the data into HubSpot.
• The second is a HubSpot API token from a Private app. If you follow the official documentation, you're fine. The token will not be shared with anyone except yourself and your personal Pipedream account. Depending on the objects you want to write into HubSpot, you need the Scopes. Usually, Contacts Write and Read is enough.

Installation & Configuration

The Module configuration is separated into three parts:

Element

All the elements contain two parts—an image for the right side and the form fields like input, dropdown, etc. Every element represents an actual screen in the front end. In the HubSpot backend, everything is shown in a row to have an easier way to work in it. By clicking on input, you have all the possibilities to choose from. Depending on the Type (Text, Textarea, Select, Checkbox, Radio, and Welcome) you choose, you will see different options to configure your module. Following are some explanation of the options:

• Label: The label for the form field
• Placeholder: That's the label for all the input fields. Make sure you always choose a label.
• Value: The value is visible in the input field and can be changed by the user. You also can combine that with the hidden option to send values to HubSpot.
• Input or Checkbox Type: With HTML5 we have different types of input fields. They can be chosen here. Some have little icons embedded, like the phone number. Make sure the actual field in HubSpot allows this kind of field. The Checkbox offer the Standard tick or a Switch.
• Checkbox Amount and Values: Define the Checkbox values and if you need an additional field and the actual bullet points with their values.
• Mandatory with Error Text: Do you want to have the field mandatory, and if Yes what Error text should be shown.
• Disabled: Maybe you want to temporarily hide the field.
• HubSpot Property Name: The name has to align with the internal value of the HubSpot property.
• HubSpot Field: If that option is activated, the value will be sent to the property field of the corresponding property in HubSpot. Ensure the property exists in HubSpot with the same name; otherwise, you will get an error.

Text

• Define the Button text, Next, and Submit text as you wish.

Configuration

• Enter the actual Pipedream URL here where the form should be sent to. In the next part we explain how to setup Pipdream.

Pipedream

To get the submission working, we have to set up Pipedream. Create a new Workflow and choose "HTTP/Webhook" then "HTTP Requests". Confirm the Trigger with "Save and continue" and copy the unique URL, and paste it into your Module configuration.

Choose "HTTP/Webhook"

Copy the unique URL and paste it into the HubSpot Module

First Submit

To get the actual form working, you need a NodeJS script for it. We did build a generator for that purpose. After you finish the form and hit submit, the Webhook in Pipedream will be triggered, and an event will become visible. Copy the whole "Body Value" and go to our NodeJS Converter.

Wait for the Submit to appear

Copy the Body Value

Create the NodeJS

Paste the "Body Value" and name the element. The "Header" will be the title for either the Note or the Meeting. You have the chance to choose between these two types. Hit "Convert JSON" and copy the generated code. Go back to Pipedream and paste the code into a second step. As a second step, use a node element (Hello World, for instance, and replace the whole code). Paste your API token from the first step where the screenshot shows "Baerer pat-XXX". As you see, your API token is NEVER shared with anyone else except you.

After you're done, hit "Test" and look at the Activity Flow of your Contact in HubSpot. If there is an Error you will see it in Pipedream above the Buttons "Test" and "Deploy." If you have changes, remember to regenerate the code at the NodeJS Converter before deploying the code.

Paste the JSON from Pipedream into the Converter

Place the Code into a new Node step, and don't forget to replace the API token

That's how it looks when it worked.

Errors

We know that a few steps are necessary for a great result and that there could be Errors in setting everything up. Look at the Error log in Pipedream; it will tell you what's wrong. The following are common mistakes in the Configuration:

• A Property is used that does not exist or has a bad name
• The API token is wrong or not set
• The Form got changed, but the NodeJS code was not adapted

Expand the Error message and look for the issue. It's usually at the bottom.