All Collections
Advanced Design
Custom Contact forms
Custom Contact forms

Create custom forms with lots of different inputs, checkboxes, text fields, and more.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

Our contact form widget can be configured to either use the default contact fields or to allow free form customizations. In this article we will show you how it works and give you some simple copy & paste examples to get you started. 

What can I add to my custom form?

You can add any of the elements below and customize them to your needs. 

  • Text inputs

  • Text Area inputs

  • Select dropdowns

  • Date pickers

  • Email fields

  • Telephone fields

  • Checkboxes 

  • Radio buttons

  • Read only fields

  • Labels 

  • Required fields

  • Bootstrap enabled

  • Sweet alert success message

Create a form

Go to your layout and drag in the "Contact form" widget. Click the cog symbol, set it to custom and copy/paste the basic form below into the Content box to get you started.
​

<h3>Send us a message</h3>
<div class="form-group ">
    <label for="exampleInputEmail1">Email address</label>
    <input name="email" required type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>


<button type="submit" class="btn btn-default">Submit</button>


Let's explain the above code. Click the image to enlarge

What it looks like on the storefront. 

👍 Important: Make sure every element has a name="" attribute. See details below.

👍 Name Attribute cannot be any of the reserved words 'to_email', 'type', 'email', 'product', or 'message'

The name attribute

When you add elements to the page make sure that each has the name attribute. Each input or select needs to have the name attribute as it will be used as the title/label inside the email that will be sent to you from the system. Without the name=""  you won't get the information that the customer entered into the form. 

  • name="some identifying text"

The text inside the "" is what will be added as a label on the email you receive. 

👍 Name Attribute cannot be any of the reserved words 'to_email', 'type', 'email', 'product', or 'message'

Customize the email template

You can use the email template to customize the email your staff get. 

Adding Elements

👍 Name Attribute cannot be any of the reserved words 'to_email', 'type', 'email', 'product', or 'message'

Text Fields

Copy and paste the below after the ending </div> of the element that you want it to come after.

We will want to change the following elements for each new field we introduce

These two should be the same but unique for each new field

  • for="textField1"

  • id="textField1"

Edit the below as well

  • name=""

  • placeholder=""

<div class="form-group ">
        <label for="textField1">First Name</label>
        <input name="first name" required type="text" class="form-control" id="textField1" placeholder="enter your first name">
</div>

Now check it on the storefront. 

Create another field for "Last name"

Select Dropdown

<div class="form-group">
    <label for="select1">My Select</label>
    <select name="my number" id="select1" class="form-control">
        <option>Choose me 1</option>
        <option>Choose me 2</option>
        <option>Choose me 3</option>
        <option>Choose me 4</option>
        <option>Choose me 5</option>
    </select>
</div>

👍 Name Attribute cannot be any of the reserved words 'to_email', 'type', 'email', 'product', or 'message'

Radio buttons 

For this one make sure all the name="" attributes have the same value. If they don't the customer will be allowed to chose more than one option like a checkbox.


  <h2>Form control: radio buttons</h2>  
    <div class="radio">
      <label><input type="radio" name="optradio" checked value="Option 1">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio" value="Option 2">Option 2</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio" value="Option 3">Option 3</label>
    </div>
 

Text area or block

👍Important: The name attribute cannot be just name="message". But name="myMessage" is fine.

For the text area or block you can use the rows="3" to determine how high the message area should be. Remember to change the name="", id="", and for=""

<div class="form-group ">
        <label for="textArea1">Text area</label>
        <textarea id="textArea1" name="messageBlock" class="form-control" rows="3"></textarea>
</div>

👍 Name Attribute cannot be any of the reserved words 'to_email', 'type', 'email', 'product', or 'message'

Checkboxes 

On checkboxes you have two inputs for each checkbox. The first one has a value="0" This will come through onto the email when the user has not checked the box. The second input text will come through when they do check the box.

<h2>My checkboxes</h2>
<div class="checkbox">
 <label>
        <input name="checkbox2" type="hidden" value="0">
        <input name="checkbox2" type="checkbox"> Check me out
    </label>
</div>
<div class="checkbox">
    <label>
        <input name="checkbox3" type="hidden" value="0">
        <input name="checkbox3" type="checkbox"> I am even better
    </label>
</div>

Pick a Date field

Very similar to a normal text field, just with a different type="date"

<div class="form-group">
    <label for="date">Pick a date</label>
    <input name="date" id="date" type="date" required name="Date_Time" class="form-control">
</div>

Sweet alert success message

The following hidden input can be added to show the sent success message in a sweet alert modal. Note: the id has to be show-sweet-alert or else the sweet alert won't show.

<input id="show-sweet-alert" type="hidden" value="1" >
Did this answer your question?