tara-m of Underwaterpistol Code Snippets
1/30/2019 - 2:49 PM

Form Fields (Blocks)

Add form fields to page form (in this snippet are included: Text, Textarea, and Dropdown)

<!-- ADD THE FOLLOWING BLOCKS TO THE SECTION

"blocks": [
	  {
		"name": "Text Field (Oneline)",
		"type": "text",
		"settings": [
		  {
			"type": "checkbox",
			"id": "required",
			"label": "Required",
			"default": true
		  },
		  {
		    "type": "text",
			"id": "title",
			"label": "Text field label"
		  },
		  {
			"type": "select",
			"id": "type",
			"options": [
				{"value": "text", "label": "Standard Text"},
				{"value": "email", "label": "Email Address"},
				{"value": "tel", "label": "Phone Number"}
			],
			"label": "Text Field Data"
		  }
		]
	  },
	  {
		"name": "Text Field (Multiline)",
		"type": "textarea",
		"settings": [
		  {
			"type": "checkbox",
			"id": "required",
			"label": "Required",
			"default": true
		  },
		  {
		    "type": "text",
			"id": "title",
			"label": "Text field label"
		  }
		]
	  },
	  {
		"name": "Dropdown Box",
		"type": "dropdown",
		"settings": [
		  {
			"type": "checkbox",
			"id": "required",
			"label": "Required",
			"default": true
		  },
		  {
		    "type": "text",
			"id": "title",
			"label": "Dropdown label"
		  },
		  {
			"type": "textarea",
			"id": "dropdown_options",
			"label": "Dropdown Box Options",
			"info": "Please separate options with a comma"
		  }
		]

-->
  
<!-- FORM SNIPPET -->  
  <div class="grid--full">
      <div class="grid__item large--two-thirds push--large--one-sixth">

        <div class="contact-us-page form-vertical">
              {% form 'contact' %}

              {% comment %}
              Successful message
              {% endcomment %}
              {% if form.posted_successfully? %}
              <p class="note form-success">
                {{ 'contact.form.post_success' | t }}
              </p>
              {% endif %}
              {{ form.errors | default_errors }}

          
		<!-- Begin going through blocks and adding fields to the Form -->  
          {% for block in section.blocks %}
				
          	<!-- Field Type: Text -->
              {% if block.type == 'text' %}
                <label for="DemoForm{{block.settings.title}}" class="hidden-label">{{ block.settings.title }}</label>
                <input type="{{block.settings.type}}" 
                       id="DemoForm{{block.settings.title}}" 
                       class="input-full" 
                       name="contact[{{ block.settings.title }}]" 
                       placeholder = "{{ block.settings.title | capitalize }}{% if block.settings.required %}*{%endif%}" 
                       {% if block.settings.required %} required{% endif %}
                       {% if block.settings.type == 'text' %} autocapitalize="words"
                       {% elsif block.settings.type == 'email' %} autocorrect="off" autocapitalize="off"
                       {% else %} pattern="[0-9\-]*" {% endif %}
                 >
              {% endif %}

          
          	<!-- Field Type: Textarea -->
              {% if block.type == 'textarea' %}
                <label for="DemoFormName" class="hidden-label">{{ block.settings.title }}</label>
              	<textarea rows="10" id="DemoFormMessage" 
                          class="input-full" 
                          name="contact[{{block.settings.title}}]" 
                          {% if block.settings.required %} required {%endif%}
                >{{block.settings.title | capitalize}}{% if block.settings.required %}*{%endif%}</textarea>
              {% endif %}

          
          	<!-- Field Type: Dropdown -->
              {% if block.type == 'dropdown' %}
          		{% assign options = block.settings.dropdown_options | split: ',' %}
				<select name = "{{block.settings.title}}" {% if block.settings.required %}required{%endif%}>
                  <option disabled selected value = "{{block.settings.title}}">
                    {{ block.settings.title | capitalize }}{% if block.settings.required %}*{% endif %}
                  </option>
                  {% for option in options %}
	                  <option value = "{{option | strip }}">{{option | strip }}</option>
                  {% endfor %}
          		</select>
              {% endif %}
          

          {% endfor %} 
          <!-- End Block Loop -->


          <input type="submit" class="btn left" value="{{section.settings.cta_label}}">

        {% endform %}
        </div>
        
     </div>
  </div>