I will be showing you how you can maximize the power of Free Form Builder. The app is pretty simple and easy to use, but with the guide and pointers, you should be able to smash it out of the park.

First, let’s set up the form within the app:

  • Go to Apps > Free Form Builder by HulkApps
  • Open the app, and you will be brought to the app dashboard:


Under ‘Create Form’ choose “New Form.” Then you will be brought to the following screen:

  • The form builder is broken down in three sections: connect, content, and design. Do not click away to ‘Content’ and ‘Design’ just yet.
  • On this screen you can name you form as you’d like. In the example I am using “Wholesale Application” is what I named the form.
  • Also, you are able to indicate where the form will be submitted to - which emails. You can use one or multiple emails. In the example I chose “support@hulkapps.com” and “info@hulkapps.com.”
  • Next, we want to move to ‘Content.’ Once you click on the ‘Content’ tab, you will have the following:

Content is broken down into five sections:

  • Title and Button
  • Form Element
  • CAPTCHA
  • After Submit
  • Auto Responder

Do not feel overwhelmed. We will take one section at the time. It is quick and easy.

Let’s start with ‘Title and Button.’ section.

  • Form Title - name of your form that users will see. I am going to make it same as the name of the form earlier…”Wholesale Application.”

 

  • Form Description - here you can give additional information to the user. In the example I am showing I am notifying the users that our Wholesale Application process may take up to 10 business days:

    "Please note that due to high quantity of applications we receive each day, it may take up to 10 business days to approve your application."

 

  • Submit - you can have the button say anything, I will change it to ‘Apply’ in my example.

    This is what my form looks like so far:



  • Now, we are going to move to the “Form Elements.” Form Elements are your fields. Currently we have: First Name, Last Name, Email, Subject, and Message.
    • First, let’s go over a few functions:
      •    Allows you to delete any Form Element.
      •    Allows you to re-order the Form Elements by drag and drop.
      •    Allows you to add additional elements.

 

  • By clicking on each element, on the left side, you can edit the current fields.



    In my example I am going to change up the form so that it is as follows:
    • First and Last Name
    • Email
    • Company
    • Address
    • City, State
    • Resale Tax ID No.
    • Do you plan to sell online? (conditional)
      • If so, what is your website?
    • Message

      I created a dropdown conditional field…”Do you plan to sell online?” With this created, only if the user selects ‘Yes’ will it ask the user for their website.

  • Next section will be CAPTCHA. If you are not familiar with it, CAPTCHA deters malicious users, bots, or sales people from constantly filling up your inbox. CAPTCHA is optional, but highly recommended. The CAPTCHA we utilize for the form was developed at Google.

We highly recommend enabling CAPTCHA. 

  • We are almost there! The next section, “After Submit”, allows you to dictate what happens when the user submits the form. You have a few different options:
    • Single Submission Only
    • Clear the Form and Allow Another Submission
    • Redirect to Another Page
    • Hid Form and Show ‘Thank You’ message
    • Show Responses

 

  • And the last part of this...the Auto Responder. After a user submits a form, you can email them back with whatever might be necessary. Here are some ideas:
    • Confirming that you’ve received their form
    • You can respond with files, like additional information, links, ebooks, etc.

 

  • The Auto-Responder has four fields:
    • Email for Auto-Response - this is the email you will be emailing the user from. In my example I will use support@hulkapps.com.
      • Auto-Responder Subject - This is the subject line the user will see in their inbox. In my example I will use ‘We’ve Received Your Wholesale Application.’
      • Auto-Responder Message -This will be the ‘body’ of the email, the main message. You can write anything here you deem appropriate. Here is what I have:
        Thanks for contacting Hulk Apps in regards to being a Wholesaler. We appreciate you taking the time to fill out the initial application and kicking off the process. We do get quite a few submissions, so it might take up to 10 business days to get back to you - but usually we do respond quicker.

        Thanks again and someone will be in touch with you soon.

        The Hulk Apps Team

 

  • Auto-Responder  Footer Message - Here you can add social icons or any additional information you choose to do. I will not be adding anything.

 

  • The last part of the app that we will do is the design, or styling of the form. This will be entirely up to you on how you want to style it. You can do it two different ways:
    • Use our editor (which I will cover how to use)
    • Or, for advanced users, use Advanced CSS to your liking
      • Design > Advanced
    • The section will be broken into four sections that will allow you to edit the appearance of your form:
      • Layout
      • Form
      • Input
      • Submit Button

 

  • Let's start with “Layout.”


    Here you will have two options:

    • Inline Labels - Labels are within the field
    • Block Labels - Labels are above the field

       I am going to go with ‘Inline Labels.’

 

  • Next we are going to focus on the ‘Form’ section.
    • Background Type
    • Transparent - This does not give any styling to the background of the form
    • Color - Set any color as your background
    • Gradient - Set a gradient as your background
    • Image - Upload an image to use as a background

      I am going to go with the ‘color’ option and I am going to use #eeeeee as a color of choice.

  • Next is the ‘Background Shadow.’ Background Shadow allows you to add depth through a shadow effect by utilizing one of the five settings:
    • None
    • Hard Dark Shadow
    • Soft Dark Shadow
    • Hard Light Shadow
    • Soft Light Shadow

      I am not going to use this option, so I will set it to ‘None.’

 

  • Form Width allows you set the width of the form in pixels or percentages. If you are using pixels, we would recommend being between 500px and 900px. If you are using %, we would suggest staying above 50% and under 85%.

    I am going to go with 750px

 

  • Next is “Form Padding.’  This refers to padding around the fields and the content - you can see it highlighted in green in the screenshot provided:



  • “Form Border” next. That is simply the black line you see by default around your form. You will have three options:
    • Border Color
    • Border Radius
    • Border Width



      I am going to make mine as it follows:

      • Border Color: #e1e1e1
      • Border Radius: 0
      • Border Width/Thickness: 3px

 

  • Next, we are going style the ‘Input Fields.’ You will be able to style:
    • Input Background - This is the background of the input field, default color is white
      • Here you are also able to set the focus color. Focus color allows you to highlight the field that the user selected:



    • Input Border - This is the border of the input, similar to the border of the entire form
    • Label Text - This is the text that describes each input
    • Input Text - Input text is the text the user types in for each field

      • Here  are the settings that I used:

        • Input  Background
          • Input Background: #ffffff (I kept it white)
          • Input Background Color: #cacaca

        • Input Border
          • Input Border Radius: 0
          • Input Border Color: None
          • Input Border Focus Color: #ffffff



    • Label Text
      • Label Font Size - Allows you to change the size of the label font size. We recommend between 12-16.
      • Label Font Color - Allows you to change the color of the label font color
      • Fonts - Allows you to change the font type

        I did not make any modifications to this part. I am going to keep it as is in my example.
    • Input Text
      • Input Font Size - Allows you to change the size of the input font size. We recommend keeping it between 12 to 16.
      • Input Font Color - Color of the inputted text
      • Input Font - Allows you to change the font type

        For the example, I am not going to make any modifications to this either.

 

  • In the next section we are going to tackle  the styling of your submit button. You might have renamed it something else...if you recall, I changed it from “Submit” to “Apply:
    • Submit Button
      You are able to modify several components of the button:
      • Alignment
      • Button Text Color
      • Button Background Color
      • Button Font Size
      • Button Border Color
      • Border Radius
      • Border Width

        Allow of these have the same principles as elements before when it comes to modifying them.

        • Here is how I modified the button in my example:
          • Alignment - Full Width
          • Button Text Color - White #ffffff
          • Button Background Color - Dark red #d90000
          • Button Font Size - 16
          • Button Border Color - I did not choose a color for the border
          • Border Radius - 0
          • Border Width - 0

  • And we are done! Congrats on finishing the form. Now we are going to add the form to a Shopify page. Before we do this, this is what mine form looks like:



    To add it to a page, click ‘Finish’. Once you do, you will have a pop-up message stating that it has been saved - it will also take you to the main screen of the app.

    What you want to do now is copy the Shortcode from the form you made. This is mine:


    On this page you have a handful of functions:
    •    allows you to copy the shortcode with a single click
    •    allows you to duplicate an existing form to save time
    •    allows you to edit the form
    •    allows you to delete a form, once you delete a form, you will not be able to recover it. We provide you unlimited forms, so please do not delete unless you 100% know that you will no longer need it.

  • Let’s copy the shortcode by clicking on      and go to the page that you want the page on. If you copied the code successful you will have the following prompt or something similar.



    If you do not have a page created, go to: Online Store > Pages > “Add Page”If you do, select the page you want the form on.

    • Now, click on ‘Code’ icon within your toolbar:   
      This is extremely important. This toggles your ‘Content’ box from text to code. If you paste the snippet we copied earlier in the ‘Content’ box when it is in ‘Text/Editor’ mode, it will paste it as text and the form will not embed. You must paste it when it is in ‘Code/HTML’ mode.

      The way you can distinguish if you are in ‘Text/Editor’ or ‘Code/HTML’ mode: Code mode does not have the toolbar. The toolbar disappears.

    • After you clicked on the icon, right click and paste the code in the ‘Content’ box. The result should be similar to below.



    • Once you’ve pasted the snippet, make sure to save the page. You can do so by clicking on the purple ‘Save’ button at the top or bottom right side of the screen.

      After you save it, it will look like the code disappeared, but it did not. To check and make sure, after you save, click on the ‘View’ text/icon      to make sure. After this, we will go customize the look and feel of the form.



      That is it! Your form is ready to rock and roll. Simple, easy, and straightforward...most of all, effective and FREE! Make sure to test it out and make sure that is working just as you wanted it to!