First, let’s set up the ‘Contact Us’ page in Shopify and place the snippet on the page:

  • Go to Apps > Simple Contact Us Form by HulkApps
  • A ‘home’ screen for the app will load. Copy the form embed code.



  • Click on the ‘Copy’ button   
  • If copied successfully, your browser will give you a message similar to this one:




Now, we want to go away from the app and create a page within Shopify where we will embed the form by pasting the code we just copied.

  • Go to: Online Store > Pages

    • If you already have a ‘Contact Us’ page, select it.
    • If you do not, on the upper right corner click on ‘Add Page



  • Name the page ‘Contact Us’ or whatever may deem appropriate:

  • 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've 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 the page, 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.


Now, let's focus on customizing your form the way you want it to look like.

  • We will go back to the app, by going to Apps > Simple Contact Us Form by HulkApps. At the top, you will click on ‘Customize Form.’



  • The page will display ‘Customize Fields’ in once column and a preview of your form on the right side.



  • Understanding the fields under ‘Customize Fields’

    • Recipients Email Address - this is where you will receive the submissions once the users completes and submits it
    • Name - this is the field you will see on the right hand side under form preview as you make changes. This is designated for the name of the person submitting the form.
    • Your Email Address - Another field for the user. This is marked ‘required’ by default and something you will not be able to edit. The only part that you are able to edit is the width of the form.
    • Phone Number - Another field for the user. We would encourage you not to require or even use this ‘Phone Number’ unless you absolutely need it. 
    • Company - Another field for the user. We would encourage you not to require or even use ‘Company’ field unless you absolutely need it.
    • Website - Another field for the user. We would encourage you not to require or even use the ‘Website’ field unless you absolutely need it.
    • Subject - Another field for the user. We would encourage you to require the Subject field.
    • Message -   Another field for the user. We would encourage you not to require the message field.

  • Now, we are going to customize the look and feel of your form. You are welcome to leave the form as is, or, if you would like, you can also make the form blend in better with your theme, colors, and fonts.



  • First, we are going to address form width and form padding:



    Width dictates how wide your form will be on the page. We recommend having the form be anywhere from 500px-800px, anything more than that, it might be too big. Any changes here will be reflected on the Contact Us page.

    Padding dictates how much space there is on the sides of the form. If you change it, it will adjust in the live preview. If you input ‘100’ into the box, it will not work...you must add ‘px’ after ‘100’ so your input should be ‘100px’ (without the quotes). We recommend that your padding does not exceed 20px.

  • Next, we will work on setting the background of the form.



    • We can do a few things:
      • Pick between having a color or an image.
        • Color - you can choose any color from the dropdown
        • Image - you can upload any image (jpeg, jpg, or png) from your device. 

      • Background Overlay - allows you to set how the transparency of the image or background.

        For the sake of example, I am going to use an image of a few monkeys.

  • Now we are going to focus on styling the Input fields.
    • Label Style - you can choose between ‘Inline Labels’ and ‘Block Labels.’

      • Inline Labels - labels within the input fields
      • Block Labels - labels above the input fields
        I choose Inline Labels in the example.

    • Input Label Color - allows you to choose the color of the text within input fields. We strongly recommend picking a color that is contrasting.
      In the example I am using white (#ffffff).

    • Input Field Background - allows you to set the background color of your input fields.
      In the example I am using black (#000000) so that I can achieve strong contrast for the user.

    • Input Border Color - allows you to change the color of the the border of the fields.
      In the example I am using black (#000000), and I chose black for no other reason but aesthetical preference.

    • Input Border Radius - allows you to change the fields do either have rounded or square corners. The larger the radius number the more rounded the fields will be.
      In the example I am using ‘0’ for radius to achieve a square corner look.
    • Input Border Width - allows you to change the size of the border.
      I chose the border color to be black, so you are unable to see it, but I am setting the border to 2, so it makes the fields look more padded.

      This is what my form looks like so far:



  • Now we are going to stylize the “Submit” button. There will be a lot of similar applications to what we had with input fields.

    • Button Text is the ‘call to action.’ Typically, ‘Send’ or ‘Submit’ are used.
      In the example I am going to use ‘Submit.’

    • Button Align is where you want to position the button: left, center, or right.
      In the example I am going to use ‘Center.’

    • Button Border Radius allows you to shape the corners, same as you did earlier with input fields.
      I am going to use ‘0’ as I did with the Input Fields to keep it all consistent.

    • Button Border Width allows you to set the border thickness of the button, same as you did with the input fields.
      I am going to set the border to ‘2’ in the example.

    • Background Color will allow you to set the background color of the button.
      I am going to use a shade of green (#009f00).
    • Text Color will allow you to change the color of the ‘Button Text.
      I am going to keep mine white (#ffffff) for the example.
    • Border Color allows you to change the color of teh button border.
      I am going to make the border in my example white #ffffff.

      This is what we have so far:



  • Now, for the final touch, we are going to customize the header as you wish. Some of this you can choose to do directly on the Shopify page we made earlier, or you can do it within the form. I would typically recommend doing it directly on the Shopify page.

    • Form Title allows you to add a title to your form.
      I am going to name my form “Contact The Monkeys. I am going to use the text editor to customize it. I am setting:
      • Color: White (#ffffff)
      • Size: 24
      • Align: Center
      • Text Styling: Bold

    • Form Description allows you to add a form message or description right under the title.
      In the example I am settling the following message: ”Have a question about our products? Let us know and we will get back to you as soon as possible.” And this is the styling applied with the text edior:
      • Color: White (#ffffff)
      • Size: 24
      • Align: Center
      • Text Styling: Bold
  • Thank You Message allows you to display a confirmation or thank you message for the users.

    That is it! Your form is ready to rock and roll. Simple, easy, and straightforward...most of all, effective and FREE!

First, let’s set up the ‘Contact Us’ page in Shopify and place the snippet on the page:

  • Go to Apps > Simple Contact Us Form by HulkApps
  • A ‘home’ screen for the app will load. Copy the form embed code.



  • Click on the ‘Copy’ button   
  • If copied successfully, your browser will give you a message similar to this one:



Now, we want to go away from the app and create a page within Shopify where we will embed the form by pasting the code we just copied.

  • Go to: Online Store > Pages
    • If you already have a ‘Contact Us’ page, select it.
    • If you do not, on the upper right corner click on ‘Add Page



  • Name the page ‘Contact Us’ or whatever may deem appropriate:



  • 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've 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 the page, 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.



Now, let's focus on customizing your form the way you want it to look like.

  • We will go back to the app, by going to Apps > Simple Contact Us Form by HulkApps. At the top, you will click on ‘Customize Form.’



  • The page will display ‘Customize Fields’ in once column and a preview of your form on the right side.



  • Understanding the fields under ‘Customize Fields’

    • Recipients Email Address - this is where you will receive the submissions once the users completes and submits it
    • Name - this is the field you will see on the right hand side under form preview as you make changes. This is designated for the name of the person submitting the form.
    • Your Email Address - Another field for the user. This is marked ‘required’ by default and something you will not be able to edit. The only part that you are able to edit is the width of the form.
    • Phone Number - Another field for the user. We would encourage you not to require or even use this ‘Phone Number’ unless you absolutely need it. 
    • Company - Another field for the user. We would encourage you not to require or even use ‘Company’ field unless you absolutely need it.
    • Website - Another field for the user. We would encourage you not to require or even use the ‘Website’ field unless you absolutely need it.
    • Subject - Another field for the user. We would encourage you to require the Subject field.
    • Message -   Another field for the user. We would encourage you not to require the message field.
  • Now, we are going to customize the look and feel of your form. You are welcome to leave the form as is, or, if you would like, you can also make the form blend in better with your theme, colors, and fonts.



  • First, we are going to address form width and form padding:



    Width dictates how wide your form will be on the page. We recommend having the form be anywhere from 500px-800px, anything more than that, it might be too big. Any changes here will be reflected on the Contact Us page.

    Padding dictates how much space there is on the sides of the form. If you change it, it will adjust in the live preview. If you input ‘100’ into the box, it will not work...you must add ‘px’ after ‘100’ so your input should be ‘100px’ (without the quotes). We recommend that your padding does not exceed 20px.

  • Next, we will work on setting the background of the form.



    • We can do a few things:
      • Pick between having a color or an image.
        • Color - you can choose any color from the dropdown
        • Image - you can upload any image (jpeg, jpg, or png) from your device.

    • Background Overlay - allows you to set how the transparency of the image or background.

      For the sake of example, I am going to use an image of a few monkeys.
  • Now we are going to focus on styling the Input fields.

    • Label Style - you can choose between ‘Inline Labels’ and ‘Block Labels.’
      • Inline Labels - labels within the input fields
      • Block Labels - labels above the input fields
        I choose Inline Labels in the example.

    • Input Label Color - allows you to choose the color of the text within input fields. We strongly recommend picking a color that is contrasting.
      In the example I am using white (#ffffff).

    • Input Field Background - allows you to set the background color of your input fields.
      In the example I am using black (#000000) so that I can achieve strong contrast for the user.

    • Input Border Color - allows you to change the color of the the border of the fields.
      In the example I am using black (#000000), and I chose black for no other reason but aesthetical preference.

    • Input Border Radius - allows you to change the fields do either have rounded or square corners. The larger the radius number the more rounded the fields will be.
      In the example I am using ‘0’ for radius to achieve a square corner look.
    • Input Border Width - allows you to change the size of the border.
      I chose the border color to be black, so you are unable to see it, but I am setting the border to 2, so it makes the fields look more padded.

      This is what my form looks like so far:



  • Now we are going to stylize the “Submit” button. There will be a lot of similar applications to what we had with input fields.
    • Button Text is the ‘call to action.’ Typically, ‘Send’ or ‘Submit’ are used.
      In the example I am going to use ‘Submit.’

    • Button Align is where you want to position the button: left, center, or right.
      In the example I am going to use ‘Center.’

    • Button Border Radius allows you to shape the corners, same as you did earlier with input fields.
      I am going to use ‘0’ as I did with the Input Fields to keep it all consistent.

    • Button Border Width allows you to set the border thickness of the button, same as you did with the input fields.
      I am going to set the border to ‘2’ in the example.

    • Background Color will allow you to set the background color of the button.
      I am going to use a shade of green (#009f00).

    • Text Color will allow you to change the color of the ‘Button Text.
      I am going to keep mine white (#ffffff) for the example.

    • Border Color allows you to change the color of teh button border.
      I am going to make the border in my example white #ffffff.

      This is what we have so far:



  • Now, for the final touch, we are going to customize the header as you wish. Some of this you can choose to do directly on the Shopify page we made earlier, or you can do it within the form. I would typically recommend doing it directly on the Shopify page.

    • Form Title allows you to add a title to your form.
      I am going to name my form “Contact The Monkeys. I am going to use the text editor to customize it. I am setting:
      • Color: White (#ffffff)
      • Size: 24
      • Align: Center
      • Text Styling: Bold

    • Form Description allows you to add a form message or description right under the title.
      In the example I am settling the following message: ”Have a question about our products? Let us know and we will get back to you as soon as possible.” And this is the styling applied with the text edior:
      • Color: White (#ffffff)
      • Size: 24
      • Align: Center
      • Text Styling: Bold

  • Thank You Message allows you to display a confirmation or thank you message for the users.

    That is it! Your form is ready to rock and roll. Simple, easy, and straightforward...most of all, effective and FREE!