Editing Shopify Contact Forms Without an App

These are notes for the above video, you need to watch it to get the full picture. 

The following code snippets are examples of form fields for Dawn as well as all the free Shopify 2.0 themes - Craft, Crave, Sense, Taste, Ride, Studio, & Colorblock. 

 

One-line Text Input

For websites like this you can also use input type="url" if you want validation but that wasn't important for me.

  <div class="field">
    <input class="field__input" type="text" id="ContactForm-website" name="contact[website]" placeholder="Website">
    <label class="field__label" for="ContactForm-website">Website</label>
  </div>

Multi-line Textarea

  <div class="field">
    <textarea
      rows="10"
      id="ContactForm-message"
      class="text-area field__input"
      name="contact[message]"
      placeholder="Message"
    ></textarea>
    <label class="form__label field__label" for="ContactForm-message">Message</label>
  </div>

Select Dropdown

  <svg style="display: none">
    <symbol id="icon-caret" viewBox="0 0 10 6">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
    </symbol>
  </svg>
  <div class="field">
    <div class="select">
      <select class="field__input select__select" style="font-size: inherit; padding-top: 0.8rem;" id="ContactForm-Options" name="contact[options]" placeholder="Options">
        <option selected disabled required value="">Choose an option:</option>
        <option value="opt1">Option 1</option>
        <option value="opt2">Option 2</option>
        <option value="opt3">Option 3</option>
      </select>
      <svg class="icon-caret" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
        <use href="#icon-caret" />
      </svg>
    </div>
    <label class="field__label" style="visibility: hidden;" for="ContactForm-Options">Choose an option:</label>
  </div>

Checkbox

  <div style="margin-bottom: 2rem; display: flex; align-items: center;">
    <input type="checkbox" name="contact[gift]" value="yes" >
    <label for="gift">This is gift</label>
  </div>
Back to blog

2 comments

Excelent tutorial, I was able to finish the contact form after watching this!

Alejandro

Hey great tutorial! I followed along and was able to customize my contact form even without much coding knowledge. I was wondering if this could work for the email signup form too.

Florencia

Leave a comment

Please note, comments need to be approved before they are published.