page-contact-custom.liquid

<!-- /templates/page.contact-custom.liquid -->
<div class="wrapper page-margin" data-section-id="{{ section.id }}">

  <div class="grid">

    <div class="grid__item large--two-thirds push--large--one-sixth">

      <h1 class="text-center h2">{{ page.title }}</h1>
{%- if section.settings.page_position == 'none' -%} 
      
{% endif %}            
{%- if section.settings.page_position == 'top' -%}      
      
      <div class="rte">
        {{ page.content }}
      </div>
      
{% endif %}            

      {% if section.settings.title != blank %}
        <h4 class="home__subtitle">{{ section.settings.title}}</h4>
      {% endif %}

      <div>
        {% form 'contact' %}
          {% if form.posted_successfully? %}

            <p class="note form-success">
              {{ 'contact.form.post_success' | t }}
            </p>
          {% endif %}

          {{ form.errors | default_errors }}

          {% for block in section.blocks %}

            {% case block.type %}

              {% when 'email' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden">{{ block.settings.label }}</label>
                  <input type="email" class="contactFormEmail" id="Form-{{ section.id }}-{{forloop.index0 }}" name="contact[email]" placeholder="{{ block.settings.label }}" autocorrect="off" autocapitalize="off" required/>
                </div>

              {% when 'body' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden">{{ block.settings.label }}</label>
                  <textarea rows="10" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormMessage" name="contact[body]" placeholder="{{ block.settings.label }}" required></textarea>
                </div>

              {% when 'text' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden uppercase">{{ block.settings.label }}</label>
                  <input type="text" class="contactFormText" id="Form-{{ section.id }}-{{forloop.index0 }}" name="contact[{{ block.settings.label | escape }}]" placeholder="{{ block.settings.label }}{% if block.settings.required %} (required){% endif %} " autocapitalize="words" value="" {% if block.settings.required %} required{% endif %} />
                </div>

              {% when 'textarea' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden">{{ block.settings.label }}</label>
                  <textarea rows="10" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormMessage" name="contact[{{ block.settings.label | escape }}]" placeholder="{{ block.settings.label }}{% if block.settings.required %} (required){% endif %}" {% if block.settings.required %} required{% endif %} ></textarea>
                </div>

              {% when 'telephone' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden">{{ block.settings.label }}</label>
                  <input type="tel" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormPhone" name="contact[{{ block.settings.label | escape }}]" placeholder="{{ block.settings.label }}{% if block.settings.required %} (required){% endif %}" pattern="[0-9\-]*" value="" {% if block.settings.required %} required{% endif %} />
                </div>

              {% when 'name' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden uppercase">{{ block.settings.label }}</label>
                  <input type="text" class="contactFormText" id="Form-{{ section.id }}-{{forloop.index0 }}" name="contact[{{ block.settings.label | escape }}]" placeholder="{{ block.settings.label }}{% if block.settings.required %} (required){% endif %}" autocapitalize="words" value="" {% if block.settings.required %} required{% endif %} />
                </div>

              {% when 'textHeading' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label uppercase">{{ block.settings.label }}</label>
                </div>        

              {% when 'radio' %}
                <div class="custom-form__block" {{ block.shopify_attributes }} style="margin-bottom: 1rem;">
                  <label for="{{ block.settings.label }} "class="label uppercase">{{ block.settings.name }}</label>
                  {% if block.settings.label-one != blank %}
                    <input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormRadio" name="contact[{{ block.settings.name | escape }}]" value="{{ block.settings.label-one }}"> {{ block.settings.label-one }}</input><br />
                  {% endif %}
                  {% if block.settings.label-two != blank %}
                    <input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormRadio" name="contact[{{ block.settings.name | escape }}]" value="{{ block.settings.label-two }}"> {{ block.settings.label-two }}</input><br />
                  {% endif %}
                  {% if block.settings.label-three != blank %}
                    <input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormRadio" name="contact[{{ block.settings.name | escape }}]" value="{{ block.settings.label-three }}"> {{ block.settings.label-three }}</input><br />
                  {% endif %}
                  {% if block.settings.label-four != blank %}
                    <input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormRadio" name="contact[{{ block.settings.name | escape }}]" value="{{ block.settings.label-four }}"> {{ block.settings.label-four }}</input><br />
                  {% endif %}
                  {% if block.settings.label-five != blank %}
                    <input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormRadio" name="contact[{{ block.settings.name | escape }}]" value="{{ block.settings.label-five }}"> {{ block.settings.label-five }}</input><br />
                  {% endif %}
                  {% if block.settings.label-six != blank %}
                    <input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormRadio" name="contact[{{ block.settings.name | escape }}]" value="{{ block.settings.label-six }}"> {{ block.settings.label-six }}</input><br />
                  {% endif %}
                </div>

              {% when 'checkboxHeading' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label uppercase">{{ block.settings.label }}</label>
                </div>

              {% when 'checkbox' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label--hidden">{{ block.settings.label }}</label>
                  <input type="checkbox" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormCheckbox" name="contact[{{ block.settings.label }}]" value="{{ block.settings.label }}"> {{ block.settings.label }}</input>
                </div>

              {% when 'select' %}
                <div class="custom-form__block" {{ block.shopify_attributes }}>
                  <label for="{{ block.settings.label }}" class="label uppercase">{{ block.settings.name }}</label>
                  <select id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormSelect" name="contact[{{ block.settings.name }}]">
                    {% if block.settings.label-one != blank %}
                      <option value="{{ block.settings.label-one }}">{{ block.settings.label-one }}</option>
                    {% endif %}
                    {% if block.settings.label-two != blank %}
                      <option value="{{ block.settings.label-two }}">{{ block.settings.label-two }}</option>
                    {% endif %}
                    {% if block.settings.label-three != blank %}
                      <option value="{{ block.settings.label-three }}">{{ block.settings.label-three }}</option>
                    {% endif %}
                    {% if block.settings.label-four != blank %}
                      <option value="{{ block.settings.label-four }}">{{ block.settings.label-four }}</option>
                    {% endif %}
                    {% if block.settings.label-five != blank %}
                      <option value="{{ block.settings.label-five }}">{{ block.settings.label-five }}</option>
                    {% endif %}
                    {% if block.settings.label-six != blank %}
                      <option value="{{ block.settings.label-six }}">{{ block.settings.label-six }}</option>
                    {% endif %}

                  </select>
                </div>
              {% else %}
            {% endcase %}

          {% endfor %}

          {% assign types = '' %}
          {% for block in section.blocks %}
            {% assign types = types | append: block.type  %}
          {% endfor %}

          <!-- <p>TYPES:{{ types }}</p> -->

          {% unless types contains "email" %}
            <label for="{{ block.settings.label }}" class="label">{{ block.settings.label }}</label>
            <input type="email" class="contactFormEmail" id="Form-{{ section.id }}" name="contact[email]" placeholder="Email address (required)" autocorrect="off" autocapitalize="off" required>
          {% endunless  %}

          {% unless types contains "body" %}
            <label for="{{ block.settings.label }}" class="label">{{ block.settings.label }}</label>
            <textarea rows="10" id="Form-{{ section.id }}" class="contactFormMessage" name="contact[body]" placeholder="Message (required)" required></textarea>
          {% endunless  %}

          {%- if section.settings.enable_captcha -%}
              <div class="captcha">
                  How much is: <input type="text" readonly="readonly" id="question"/>
                  Answer:* <input type="text" id="answer"/>
              </div>
          {% endif %}

			<input type="submit" class="btn right uppercase" value="{{ 'contact.form.send' | t }}">

        {% endform %}

      </div>

        {%- if section.settings.page_position == 'below' -%}      

              <div class="rte" style="margin-top: 5rem;">
                {{ page.content }}
              </div>

        {% endif %}      

    </div>

  </div>

</div>



{% schema %}
  {
    "name": "Contact Form",
    "class": "index-section",
    "settings": [

    {
      "type": "header",
      "content": "Page content"
    },
    {
      "type": "select",
      "id": "page_position",
      "options": [
        { "value": "top", "label": "Above form"},
        { "value": "below", "label": "Below form"},
        { "value": "none", "label": "Don't display"}
      ],
      "label": "Page content position",
      "default": "top"
    },
    {
      "type": "header",
      "content": "Custom Form",
      "info": "Add form fields with content section below. Tip: Add required Email field and Body field again to change sort position."
    },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Contact Form",
        "info": "Leave blank to remove heading."
      },
          {
            "type": "checkbox",
            "id": "enable_captcha",
            "label": "Use math captcha",
            "default": false
          }

    ],
    "blocks": [
      {
        "type": "email",
        "name": "Email field - required",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "label",
            "label": "Label",
            "default": "Email",
            "info": "The label cannot be left blank."
          }
        ]
      },
      {
        "type": "body",
        "name": "Body field - required",
        "limit": 1,
        "settings": [
          {
            "type": "textarea",
            "id": "label",
            "label": "Label",
            "default": "Message",
            "info": "The label cannot be left blank."
          }
        ]
      },

      {
        "type": "text",
        "name": "Text field",
        "settings": [
          {
            "type": "text",
            "id": "label",
            "label": "Label",
            "default": "Full Name",
            "info": "Use for any single line form input. The label cannot be left blank."
          },
          {
            "type": "checkbox",
            "id": "required",
            "label": "Required",
            "default": false
          }
        ]
      },

      {
        "type": "textHeading",
        "name": "Heading field",
        "settings": [
          {
            "type": "text",
            "id": "label",
            "label": "Label",
            "default": "Heading",
            "info": "The label cannot be left blank."
          }
        ]
      },

      {
        "type": "telephone",
        "name": "Telephone field",
        "settings": [
          {
            "type": "text",
            "id": "label",
            "label": "Label",
            "default": "Phone Number",
            "info": "The label cannot be left blank."
          },
          {
            "type": "checkbox",
            "id": "required",
            "label": "Required",
            "default": false
          }
        ]
      },
      {
        "type": "textarea",
        "name": "Text area",
        "settings": [
          {
            "type": "textarea",
            "id": "label",
            "label": "Label",
            "default": "Enter your message",
            "info": "Use for multi-line form input. The label cannot be left blank."
          },
          {
            "type": "checkbox",
            "id": "required",
            "label": "Required",
            "default": false
          }
        ]
      },
      {
        "type": "checkbox",
        "name": "Single checkbox",
        "settings": [
          {
            "type": "text",
            "id": "label",
            "default": "Newsletter One",
            "label": "Label",
            "info": "Example: Weekly newsletter. The label cannot be left blank."
          }
        ]
      },
      {
        "type": "checkboxHeading",
        "name": "Checkbox heading",
        "settings": [
          {
            "type": "text",
            "id": "label",
            "default": "Checkbox heading",
            "label": "Label",
            "info": "Example: Subscribe to Newsletters. The label cannot be left blank."
          }
        ]
      },
      {
        "type": "radio",
        "name": "Radio group",
        "settings": [
          {
            "type": "text",
            "id": "name",
            "default": "Pick an option",
            "label": "Heading",
            "info": "Example: Choose an option. Heading cannot be left blank."
          },
          {
            "type": "text",
            "id": "label-one",
            "default": "Radio option 1",
            "label": "Option one",
            "info": "Example: Option 1"
          },
          {
            "type": "text",
            "id": "label-two",
            "default": "Radio option 2",
            "label": "Option two",
            "info": "Example: Option 2"
          },
          {
            "type": "text",
            "id": "label-three",
            "default": "Radio option 3",
            "label": "Option three",
            "info": "Leave blank if not required"
          },
          {
            "type": "text",
            "id": "label-four",
            "default": "Radio option 4",
            "label": "Option four",
            "info": "Leave blank if not required"
          },
          {
            "type": "text",
            "id": "label-five",
            "default": "Radio option 5",
            "label": "Option five",
            "info": "Blank if not required"
          },
          {
            "type": "text",
            "id": "label-six",
            "default": "Radio option 6",
            "label": "Option six",
            "info": "Leave blank if not required"
          }
        ]
      },
      {
        "type": "select",
        "name": "Select group",
        "settings": [
          {
            "type": "text",
            "id": "name",
            "default": "Select an option",
            "label": "Instructions",
            "info": "Example: Choose a delivery location. Instructions cannot be left blank."
          },
          {
            "type": "text",
            "id": "label-one",
            "default": "Select option 1",
            "label": "Option one",
            "info": "Example: Home Address"
          },
          {
            "type": "text",
            "id": "label-two",
            "default": "Select option 2",
            "label": "Option two",
            "info": "Example: Work Address"
          },
          {
            "type": "text",
            "id": "label-three",
            "default": "Select option 3",
            "label": "Option three",
            "info": "Leave blank if not required"
          },
          {
            "type": "text",
            "id": "label-four",
            "default": "Select option 4",
            "label": "Option four",
            "info": "Leave blank if not required"
          },
          {
            "type": "text",
            "id": "label-five",
            "default": "Select option 5",
            "label": "Option five",
            "info": "Leave blank if not required"
          },
          {
            "type": "text",
            "id": "label-six",
            "default": "Select option 6",
            "label": "Option six",
            "info": "Leave blank if not required"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Contact Form",
        "category": "Form",
        "blocks": [
          {
            "type": "email"
          },
          {
            "type": "body"
          }
        ]
      }
    ]
  }
{% endschema %}


<script type="text/javascript">
     $(document).ready(function() {
       var n1 = Math.round(Math.random() * 10 + 1);
           var n2 = Math.round(Math.random() * 10 + 1);
       $("#question").val(n1 + " + " + n2);
       $(".contact-form").submit(function (e) {
               if (eval($("#question").val()) != $("#answer").val()) {
                     $("#answer").css('box-shadow', '0px 0px 7px red');
                     e.preventDefault(); 
               } 
           });
    });
</script>