How To Create Custom Contact Forms in Shopify [Add more fields]

Do you need to create a custom contact form for your Shopify store?

In this tutorial, I’ll show you how to create a custom input field contact form in Shopify. This can be really handy if you need to gather specific information from your customers, or if you want to add an extra layer of security by requiring customers to fill out a contact form before they can reach out to you.

Adding custom contact forms to your Shopify store is a great way to gather information from your customers. In this tutorial, I’ll show you how to create three different types of custom contact forms: an input field contact form, a drop-down field contact form, and a checkbox field contact form.

You’ll learn how to add the forms to your store, customize the fields, and configure the email notifications.

// Input Field HTML

<div class="field">
          <input class="field__input" type="text" id="custom-question" name="contact[custom-question]" placeholder="Custom Question">
          <label class="field__label" for="custom-question">Custom Question</label>
        </div>



//Drop Down Menu HTML

<div class="field">
	<select id="request-type" name="contact[request_type]">
    <option>Returns</option>
    <option>Shipping</option>
    <option>Custom order</option>
    <option>Other</option>
  </select>
 </div>
 
//Drop Down Menu CSS

  #ContactForm .field select {
    position: initial;
    width: 100%;
    padding: 1.5rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    letter-spacing: .04rem;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
}

// Checkbox HTML

<div class="field checkbox">
  <label for="contact-time">When is the best time to reach you?</label>
	<input type="checkbox" name="contact[contact_time_1]" value="morning"><label for="Morning">Morning</label><br>
	<input type="checkbox" name="contact[contact_time_2]" value="evening"><label for="Evening">Evening</label><br>
	<input type="checkbox" name="contact[contact_time_3]" value="night"><label for="Night">Night</label>
</div>

// Checkbox CSS
  
#ContactForm .checkbox {

  padding: 10px 10px 10px 17px;
}


// Radio Buttons HTML

<div class="field radio-buttons">
  <label for="contact-method">How do you want us to contact you?</label>
  <input type="radio" name="contact[contact_method]" value="email" id="email"><label for="email">Email</label><br>
  <input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="phone">Phone</label><br>
  <input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="text">Text message</label>
</div>

// Radio Buttons CSS
  
#ContactForm .radio-buttons {
padding: 10px 10px 10px 17px;
}