Last active
February 17, 2025 11:18
-
-
Save ryangittings/35e8c156fcc38ea6c9c012da23b8e01f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% macro input(field, form) %} | |
| {% set id = form.id + '_' + field.name | slug %} | |
| <div class="{% if field.layout == 'full' %}col-span-full{% endif %} space-y-3xs"> | |
| {% if field.type == 'select' %} | |
| <label for="{{ id }}">{{ field.label | safe }}{% if field.required %}*{% endif %}</label> | |
| <select id="{{ id }}" name="{{ field.name }}" {% if field.required %}required{% endif %}> | |
| <option disabled selected>Please choose...</option> | |
| {% for option in field.options %} | |
| <option>{{ option }}</option> | |
| {% endfor %} | |
| </select> | |
| {% if field.help %}<p class="text--1">{{ field.help | safe }}</p>{% endif %} | |
| {% elseif field.type == 'checkbox' %} | |
| {% if field.options %} | |
| <fieldset class="space-y-3xs"> | |
| <legend>{{ field.label | safe }}</legend> | |
| {% for option in field.options %} | |
| {% set optionSlug = option.label | slug %} | |
| {% set optionID = id + '_' + optionSlug %} | |
| <div class="flex flex-wrap items-start gap-2xs"> | |
| <input type="checkbox" id="{{ optionID }}" name="{{ field.name }}[]" value="{{ option.label }}" /> | |
| <label for="{{ optionID }}">{{ option.label | safe }}</label> | |
| </div> | |
| {% endfor %} | |
| {% if field.help %}<p class="text--1">{{ field.help | safe }}</p>{% endif %} | |
| </fieldset> | |
| {% else %} | |
| {% set optionSlug = field.label | slug %} | |
| {% set optionID = id + '_' + optionSlug %} | |
| <div class="flex flex-wrap items-start gap-2xs"> | |
| <input type="checkbox" id="{{ optionID }}" name="{{ field.name }}[]" value="{{ option.label }}" /> | |
| <label for="{{ optionID }}" class="flex-1">{{ field.label | safe }}</label> | |
| </div> | |
| {% endif %} | |
| {% elseif field.type == 'radio' %} | |
| <fieldset class="space-y-3xs"> | |
| <legend>{{ field.label | safe }}</legend> | |
| {% for option in field.options %} | |
| {% set optionSlug = option.label | slug %} | |
| {% set optionID = id + '_' + optionSlug %} | |
| <div class="flex flex-wrap items-center gap-s"> | |
| <input type="radio" id="{{ optionID }}" name="{{ field.name }}" value="{{ option.label }}" data-points="{{ option.points }}" {% if field.required %}required{% endif %} /> | |
| <label for="{{ optionID }}">{{ option.label | safe }}</label> | |
| </div> | |
| {% endfor %} | |
| {% if field.help %}<p class="text--1">{{ field.help | safe }}</p>{% endif %} | |
| </fieldset> | |
| {% elseif field.type == 'textarea' %} | |
| <label for="{{ id }}">{{ field.label | safe }}{% if field.required %}*{% endif %}</label> | |
| <textarea id="{{ id }}" name="{{ field.name }}" {% if field.required %}required{% endif %}></textarea> | |
| {% if field.help %}<p class="text--1">{{ field.help | safe }}</p>{% endif %} | |
| {% else %} | |
| <label for="{{ id }}">{{ field.label | safe }}{% if field.required %}*{% endif %}</label> | |
| <input type="{{ field.type }}" id="{{ id }}" name="{{ field.name }}" {% if field.required %}required{% endif %}{% if field.multiple %}multiple{% endif %} /> | |
| {% if field.help %}<p class="text--1">{{ field.help | safe }}</p>{% endif %} | |
| {% endif %} | |
| </div> | |
| {% endmacro %} | |
| {% if not form %}{% set form = forms[block.id] %}{% endif %} | |
| <form action="{{ form.redirect | default('/thanks/') }}" method="POST" class="space-y-s" name="{{ form.id }}" target="{{ form.target }}" netlify> | |
| {% if form.fieldsets %} | |
| {% for fieldset in form.fieldsets %} | |
| <fieldset class="grid gap-s lg:grid-cols-2"> | |
| <legend class="col-span-full block">{{ fieldset.legend | safe }}</legend> | |
| {% for field in fieldset.fields %} | |
| {{ input(field, form) }} | |
| {% endfor %} | |
| </fieldset> | |
| {% endfor %} | |
| {% else %} | |
| <div class="grid gap-s lg:grid-cols-2"> | |
| {% for field in form.fields %} | |
| {{ input(field, form) }} | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| <div> | |
| <button type="submit" class="button"> | |
| {{ form.button | default('Submit') }} | |
| <span class="icon">{% include '../../../uploads/paw.svg' %}</span> | |
| </button> | |
| </div> | |
| </form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment