Check out the Youtube channel

Editing Shopify Contact Forms Without an App

Written by Eduard Fastovski

Apr 16, 2022

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>

Multi-line Textarea

<div class="field">
    class="text-area field__input"
  <label class="form__label field__label" for="ContactForm-message">Message</label>

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">
<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>
    <svg class="icon-caret" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
      <use href="#icon-caret" />
  <label class="field__label" style="visibility: hidden;" for="ContactForm-Options">Choose an option:</label>


<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>

Want posts like this in your inbox? Subscribe to the newsletter.