Key Features

Make and store as many forms as you want. You can find all your forms under Manage Forms > My Current Forms.

With Form Builder app, you can find all the forms you created under one roof. Here’s where you find it.

You can display up to 100 forms in a page.

You can use the Search box to quickly find any form by its name.

To display the form in your storefront, we need to go through a chain of configurations. Let us show you how you do it.

Let’s get started with embedding a contact form in your store

1. Go to the app dashboard
2. Click on New Form under Create a New Form for creating your first form with the Form Builder app.
3. Select the type of form from the Templates. As we’re adding a Contact us form, we’ll select the Contact Us form.
4. Fill in the required form details like Form Details. Set your preferences under rest of these configurations:
   1. Shopify Integration
   2. Mail Integration
   3. Payment Integration
5. Similar to the above configuration, you have another set of options to configure when you click on Content. It will allow you to customize the form the way you like.
6. Next is to change the look & feel of the form under Design. When you’re done with these configurations, simply click on Publish.
7. You’ll be redirected to the Form dashboard, all you now need to do is copy the shortcode of the form you created and place it in your theme where you want to display the form. In this case, we want to display the contact form on the contact page, so we’ll be placing the code under the page.contact.liquid file.

Note: If you already have a form on the page you’re placing the code, there will be 2 forms appearing on the page. In this case, you need to hide the form that is already present. If you’re not able to hide the form, simply contact our support team at support@hulkcode.com, they’re happy to help you all the way.

Store admin can get notified of submission whenever users submit a form. Multiple email addresses can be added in case you need multiple users to be notified. To separate multiple emails, use commas. (ex: example@gmail.com, example2@yahoo.com) Here’s how you find it in the app: Go to your form > Connect > Form Details > Notification Email Addresses

Send an acknowledgment email to the users. You may send a simple ‘Thank you’ note email or send a personalized autoresponder message (With or without the form results).

Note: In order to utilize this feature, you must include the Email Address field in your form.

Note: To send any kind of emails to the user, you should’ve ticked on “Send submission email to user ” the checkbox.

The email details can be saved under the Content section > Autoresponder Settings

App’s default note is: “Thank you. Your submission is received.” You can add a custom auto-responder message from Auto Response Message box. If this space is left blank, our default ‘Thank you’ note is sent to the users’ email address.

Adding an image/ brand logo on your header can make your email message look professional. Here’s how you can do it: Under Store Settings, Select Files

Click on Upload files

Upload your logo from your computer and copy the URL

Go to Apps > Form Builder app > My current forms > Edit form> Content section>Auto responder tab Under Auto Responder Message > Click on Image icon

Paste the URL link under the Image info section

Check your image preview. Set alignment and other aspects, if needed. The dummy text in Preview indicates how the form text will be displayed around your logo. Press Ok. Your message box will appear something like this:

You can add your text message below your company logo. You can leave it as it is, or even edit your email’s HTML by clicking on Source field

You can end your email with an email signature. This can be added from Auto Responder Footer Message section

Other Advance Settings for auto-responder emails include:

From Name - You can save a professional name to be used in the email

From Email - You can specify a custom email address that your user can respond to. By default, we use info@hulkapps.com as a sender

Subject - By default we use {{form title}} on {{date}} at {{time}}. Pro users can select other dynamic values available in Insert Tokens (Pro feature).

Message- Pro users can add dynamic values in the message box as well.

Here’s an Example

Press Save

This is how your form would look like on the Respondent’s email.

It allows you to change the complete look & feel of the forms to match it with your store theme. Here’s how you do it.

• Go to the app > My current forms > Edit form
• Go to the Design section & configure the appearance of the form using the given parameters.

You can export the responses submitted by the users with the forms built by the Form Builder App. All you need to do is:

Step1: Go to the app > Manage Forms > My Current Forms (Select “Create a new form” if you haven’t created any form yet.)

Step2: Click on Submitted Responses under “Action”

Click on Export to CSV or Export to XLSX format as per your need.

You can download the file and import it in your CMS records

Let your users upload up to 3MB of files because you’re blessed with unlimited file storage.

Your form results will include user attachments within the app as well as on your Notification email.

Want to add question branching, forks, or conditional questions to your form? You need Conditional Logic. Conditional Logic (available in Free plan) lets you create a form that responds to people's answers. You can find this block in Form Elements, under form’s Content section:

Let’s say you want to survey animal lovers. Start with a question like, “Are you a cat or a dog person?” But we don’t need dog lovers to see questions about cats, or cat lovers to see questions about dogs. With Conditional Logic, we can show cat lovers one set of questions, while dog lovers see another. Start by preparing the first Multiple Choice field, and then two Questions respectively, one for cat questions and one for dogs:

This is how conditional logic feature works for a user:

You can set up lots of paths. With a Multiple Choice question, you can create different paths for each answer. Conditional Logic is very flexible, so you can be creative with it.

Customize the “Thank You” message as per your need. It can be done with a few simple clicks.

Step1: Go to the app > Content > Customize Form Messages > Form submission message You can edit the flash message here:

By default, the app displays the following flash message on submission: "Thank you! The form was submitted successfully." Your form will remain on the page.

If you want to Hide your form and only display a “Thank You” note on the page, you can save your message here:

If you save different messages on both the places, then, the After Submit text message will be displayed.

Additionally, if you want to add any additional jQuery on successful form submission, you can add custom code in this block:

Google Captcha validates human users and protects any form submission from bots. You can also enable Captcha and select it’s position in your form. All you need to do is enable this feature from the Content settings.

• Tick mark to enable captcha.
• Choose your placement position.
• Change the Google Captcha text in any language. By default, the text will be in English.

Your form will look like this when Captcha is enabled:

Additionally, you can change the Google reCAPTCHA text to another language.

Send automatic email messages on successful submission with custom messages on Subject, Footer for signature, “From” name, specific “Reply to“ email, and Body. You may also choose to send the form’s response copy to the user along with a personalized message.

You can find this setting in the Content section

If you are using the Pro version, you can insert dynamic value to each user on the Subject and Body Messages, like First Name, or any other form responses.

Use pre-built Address field with State and Country selection dropdown.

Preview form:

Country names are auto-populated.

Once a form is submitted, there are certain actions that you could take:

• Allow one entry at a time
• Clear the form and allow multiple submissions - This is the most basic form submission action.
• Redirect to any other page - This doesn’t break the continuity and guides users to a specific location.
• You can add a URL in the Redirect Page URL field. You can specify if you want to open the URL in a new
• page or not.
• Show responses - This allows the user to view submitted responses on the same page.

Make as many forms as you want and store as many results as you want, at one location. Export results anytime from the app’s dashboard.

Note: If you ever uninstall the app, your data will be removed from our database within 48 hours. Contact our team for data recovery within 48 hours.

Create from in any language. All form’s messages are customizable (including error messages). Just add the field’s input in the preferred language.

Collect all the data you need, no matter what—make as many forms as you want, with as many fields as you want. That means that one simple thing will always be true—with every Shopify store, you can make as many forms as you want, with as many fields as you want.

Find all submission records at one place within My Current Forms.

You can see up to 100 entries at once:

Quick find: You also have the choice of searching your submission details by entering a value here:

View submission details by clicking 👁️under Actions here:

All responses will be available for reference.

Not only that, the Recepient will receive an email with submission details, every time someone submits their contact details.

On Gmail service provider, your submissions would look something like this:

If you need to pause while filling a form, you can save them as drafts. You can then come back to it for finishing it up. Your incomplete form will be stored as it is in my Darft Forms section.

Saving a Form as a Draft

Step 1. Start creating a New form

Step 2. Fill in the questions you want in your form.

Step 3. To save a form as a draft, press the "Save as Draft" button.

Step 4. You can also edit your form later from My Drafts.You form will wil not generate embed code until you “Publish” it.

Let’s assume that your website is mycompanydomain.com, and you want to use it on your form auto responder so that your email looks professional and not spammy.

By default, emails that are sent out from the site are sent from the info@hulkapps.com app’s server.

In order to send emails through your own servers, you will first need to connect your site to your SMTP server or Sparkpost account.

To use SMTP authentication you need:

• Access your SMTP Settings
• Username: Your full email address
• Password: Password from that email account;
• Port: 465 with SSL, 587/25 with TLS;
• Type of encrypted connection: SSL or TLS.
• Server Name: The actual SMTP server’s specification.
• Connection security: in itself, SMTP email transfer doesn’t provide an encryption. So if you want to make your connection more secure, it’s a good choice to use a STARTTLS or SSL/TLS extension, that employ a separate port for encrypted communication.
• Authentication method: there’s a certain number of methods (passwords, CRAM-MD5, KERBEROS etc.).
• Send Test Email to test the connection of your server

Note: Your Host, Port, Username, and Password will be provided to you within your own email settings.

Note: Once your SMTP server has been set up successfully, any restrictions on the number of emails that can be sent out at a time will need to be configured within your server settings. We would recommend contacting your IT representative responsible for your email server in order to ensure your SMTP server settings are set up correctly.

Remember anyhow that using a standard SMTP – the one which is associated to free email providers like Yahoo, Hotmail or Gmail – doesn’t ensure the correct delivery of all your messages (in particular if you’re sending to a huge number of recipients), that’s why we recommend to choose a professional SMTP service and choose the plan that best suits you.

To use Sparkpost authentication you need:

• Enter your domain name
• Add the specified Hostname and Value on your domain name registrar’s DNS settings.
• Follow the Preparing your “From:” Address steps in as per Sparkpost
• Verify your domain ownership by adding a DNS record and complete verification.

You can sync your form’s responses into specific fields in your Klaviyo & Mailchimp account. Once setup, the app will automatically sync these fields and set these properties on the individual's profile.

To connect your form to your Klaviyo account:

• Generate A Private API Key by navigating to Account > Settings > API Key in Klaviyo

  
• Press Submit.
• To sync multiple fields data with Klaviyo:

  • From your Klaviyo account > Lists & Segments section > Select the appropriate list you wish to work with

    

  • Navigate to “Subscribe Pages” option under the list:

    

  • Open the specific field you want to sync, and copy the Field Property value.

    
  • Now, go to your form, Add a new field.

  • Make sure that name of the field is the same as that of the corresponding field in Klaviyo.

    

To connect your form to your Mailchimp account:

• Sign in to your Mailchimp account, Press Submit
• By default, the app synchronizes only the EMAIL field.
• If you want to synchronize other fields, you need to use the same FIELD NAME in your form & the form for every individual field.
• To sync multiple fields data with Mailchimp:

  • In Mailchimp, Go to Lists

    

  • Go to your List Settings, Select the appropriate list you wish to work with and open its Signup Forms section.

    

  • Open the Field Settings of the form, and copy the Field Tag

    
  • Now, go to your form, Add a new field.
  • Make sure that name of the field is the same as that of the corresponding field in Mailchimp.

Using Stripe integration, you can create one-time payment forms, donation forms, and even recurring billing forms.

Integrate your forms with Stripe:

• Obtain your API key
  • Browse to "Stripe" site and login into you account and then in there navigate to Developers > API Keys > “Secret Key" and "Publishable Key" for your account.

  • Add the API keys and Connect your account.

    
• Integrate Payment processing with a Form

  • Open the form e in which you wish to receive the payment on form submission. Go to "Payment Integration" option under "Connect" tab.

    
  • Choose Stripe as your payment option, and address the "Payment Type" , "Currency" and "Cost" fields

  • Mark here to display the Amount on the "Submit" or CTA button:

    

You can use the tokens in the Subject and Body Message for setting up auto-responders. For example when you type {{Email}}, the app pulls-in the field’s ID and sends the corresponding submission value back in the auto response.

Here’s an example:

Create a customer registration form to collect user’s account details stored directly to your store’s Customer section.

To enable connection, you need to first tick on the box under Connect > Shopify Integration of your form.

Note: You should include an email address field in your form in order to utilize this feature.

Once you enable the Shopify customer account creation option, you can then specify the customer information you want to store, out of the below form fields. The app pulls in Email address of users, by default.

If you need any of the below mentioned fields to be stored in your Shopify Customer Accounts, you can mention the Shopify Field IDs under the respective form elements.

First Name : first_name Last Name : last_name Password : password

You can fill these field IDs in Shopify field block:

To send a password reset email to your user, tick on the box here:

API token keys can be used to connect your form to another source. Form’s data can be shared easily thhrough this window.

Find the settings under Integrations:

To generate yoru API key, it’s mandatory to add your email and API name.

Reach a global audience much better, as your forms can cater to audience in any language. The app supports all language types. You can add error/warning messages, mandatory messages, and field labels in your store’s preferred language.

Go to your specific form and add form warnings and other messages to over-write the default message.

If you’re looking to over-write app’’s default messages globally, you could rather use the Integrations > Customize Form Messages (Global) feature.

Easily track your forms with Google Analytics. Choose the form which you’d like to track. Enter your Google Tracking ID under Design section > Advanced tab.

The tracking ID is a string like UA-000000-2. It will be included in your tracking code to tell Analytics the account and property to send form’s submission activity data to.

How to Track Form Data in Google Analytics?

Once you’ve enabled form tracking, you can review form submission activity and data in your Google Analytics account. The app automatically creates submit action event on your form when you enter your Analytics ID.

To find event tracking in your Google Analytics account, look at the left sidebar.

Go to Behavior > Events > Overview.

Google Analytics events are tagged with three attributes: Category, Action, and Label.

1. The category will read as Form Builder Form followed by the unique form ID.
2. Actions are specific actions that will be recorded on the form page. The events tracked include: submit
3. Labels give more detailed descriptions of the actions that occur on a page.
   1. Submit: when the form is submitted

In case you’d like to track additional events including : view, incomplete, navigation, and validation, you can contact our Customer Support team for further assistance.

What Should I Do with the Data I Collect?

You may find that a lot of users save your form but never return to finish it. You might see a high number of views but a low number of submissions.

Form data helps you to understand where you might improve your form. Analyze your data to determine how you might streamline the form submission process for your users. That way, you can create the best form that captures the most submissions.

Inject custom CSS codes and change every aspect of the form, from styling to functionality. If you are facing any difficulties with CSS and JS, our coding experts can assist you with your customization.

Add a custom ID and class properties for each field. An ID can be used to identify one element. Whereas, a class property is used to target all fields of the same type.

Note: In order to utilize this feature, you must include the Email Address field in your form.

Note: To send any kind of emails to the user, you should’ve ticked on “Send submission email to user ” the checkbox.

With Pro, you can unlock the option to send notification via email to user

Hidden Fields allow you to use data that you already have, to make your forms more personal, or simply to give you better data in your results.

Hidden Fields can be used for lots of things:

• Track where respondents come from (social media channels, for example)
• Segment your audience for deeper insights and analysis
• Customize your form to make it even more personal

How do Hidden Fields work?

Hidden Fields allows you to place data that you already have directly in your form data. You can view all your data in the Submission results section.

What types of information can be passed with Hidden Fields?

You can include any information you want, for example:

• The person’s name (so that you can use dynamic values to welcome each respondent personally)
• The email of your respondent (so you know who completed the form)
• Traffic source (so that you know where someone saw your form – Facebook, website etc)
• If you sell shoes, you can even capture the person’s shoe size so you always have that information stored for future transactions through your forms.

Note: If you add your Google Analytics tracking code to a form, you are responsible for the data collected by Google Analytics. If you’re using Hidden Fields that include personally identifiable information, like name or email address, etc, you must ensure this information is added to the ‘Exclude URL Query Parameters’ field in Google Analytics’ view settings. Collecting this data breaks Google’s Terms of Service.

Here’s how to do this: https://support.google.com/analytics/answer/1010249?hl=en.

Add Hidden Fields to your form

1. Open your specific form, and click the Form Elements panel, under Content section. This opens the fields menu, and at the bottom you will see Hidden Fields. Click this to get started:

   
2. Type the Field Label & corresponding Field Value of the Hidden Fields you want to add. Whatever you write for your Hidden Fields, they’ll be converted to lowercase letters automatically. Field Labels are your parameters. Default Value of which are “”xxxxx”
3. You can now test them, and see what it will look like in your form submission information.

Improve validation errors with custom messages globally for all your forms.

You can also update custom messages for individual forms from here:

Our app supports files in all formats at once. You just need to select “Yes” to allow multiple file uploads. You might also place a restriction on the maximum number of files to be uploaded. Although, there is no limitation on the file uploads storage. The app stores all the files within our AWS memory.

You can prevent visitors with email addresses at certain domains from submitting your form. In the Integrations menu, hover over the Global settings tab. Enter the domains you want to block in the Email domains to block field, separated by commas. Enter only the root domain without the www prefix or @ symbol (e.g., You can enter: gmail.com , not www.gmail.com or @gmail.com).

Help your customers understand what kind of answers you’re looking for by displaying instructions below your input fields.

The form will be displayed with information text like this:

Placeholder text within a form field makes it easier for people to remember what information belongs in a field, and to check for, and fix errors Placeholder text, located inside a form field, is an additional hint, description, or example of the information required for a particular field. These hints typically disappear when the user types in the field. Placeholder Text in Addition to Labels Using placeholder text in combination with form labels is a step in the right direction. Labels outside the form fields make the essential information visible at all times, while placeholder text inside form fields is reserved for supplementary information.

Add your text here:

Front-end look of a placeholder field:

After submit action can be