Forms

Syngency websites utilize the custom form Liquid tag to render contact, talent submission, password and package feedback forms on the page.

Refer to the tag documentation for usage and configuration.

Usage with Syngency themes

Syngency themes (e.g. Slayer) come bundled with numerous JavaScript functions for form conditionals, validation and testing.

Conditionals

Gender

When fields should only be shown to a specific gender, the value of select#gender determines visibility of elements with a data-gender value of female or male. When the select#gender value is 'Non-Binary', these conditional fields will show regardless.

<div data-gender="female">
  <label for="dress">Dress</label>
  {% select id: 'dress', name: 'measurements[dress]', options: dress_sizes, option_value: 'value', option_text: 'label' %}
</div>

Age

When fields should only be shown for a specific age group, the values of select.dob.day, select.dob.month and select.dob.year determine visibility of elements with a data-age-min and/or data-age-max value. This relies on each of these select.dob fields having a numerical data-current value for comparison.

<!-- Common date of birth configuration -->
<div id="dob_selects" class="input-group">
  {% assign year = 'now' | date: '%Y' %}
  {% assign firstYear = year | minus: 65 %}
  {% assign months = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec' | split: ',' %}
  <select class="form-control dob month" id="date_of_birth_month" name="date_of_birth[month]" aria-label="Date of birth: month" data-current="{{ 'now' | date: '%m' | times: 1 }}" required>
    <option value="">M</option>
    {% for month in months %}
      <option value="{{ forloop.index }}"{% if form.values.date_of_birth.month == forloop.index %} selected{% endif %}>{{ month }}</option>
    {% endfor %}
  </select>
  <select class="form-control dob day" id="date_of_birth_day" name="date_of_birth[day]" aria-label="Date of birth: day" data-current="{{ 'now' | date: '%e' }}" required>
    <option value="">D</option>
    {% for i in (1..31) %}
      <option{% if form.values.date_of_birth.day == i %} selected{% endif %}>{{ i }}</option>
    {% endfor %}
  </select>
  <select class="form-control dob year" id="date_of_birth_year" name="date_of_birth[year]" aria-label="Date of birth: year" data-current="{{ 'now' | date: '%Y' }}" required>
    <option value="">Y</option>
    {% for i in (firstYear..year) %}
      <option{% if form.values.date_of_birth.year == i %} selected{% endif %}>{{ i }}</option>
    {% endfor %}
  </select>
</div>

<!-- Age conditional -->
<div data-age-min="16">
  <label for="bust">Bust</label>
  {% select id: 'bust', name: 'measurements[bust]', options: bust_sizes, option_value: 'value', option_text: 'label' %}
</div>

Required Fields

When using conditionals, the required attribute needs to be removed when a field is hidden, and restored when shown. To handle this simply, use data-required on the wrapper of a conditional field.

<div data-gender="male" data-required>
  <label for="chest">Chest</label>
  {% select id: 'chest', name: 'measurements[chest]', options: chest_sizes, option_value: 'value', option_text: 'label' %}
</div>

Name fields

Contact forms require a name field, though when using this form type for email-based submissions, first and last name are typically split. To deal with this simply, we use .name-field on each of the split name inputs, and a hidden #full_name[name="name"] field which gets auto-populated on change.

{% input type: 'hidden', id: 'full_name', name: 'name' %}

<label for="name">First Name</label>
{% input type: 'text', id: 'first_name', name: 'first_name', class: 'name-field', required: 'required' %}

<label for="name">Last Name</label>
{% input type: 'text', id: 'last_name', name: 'last_name', class: 'name-field', required: 'required' %}

Upload validation

Upload field events trigger checks of data-status attributes and required classes to determine whether required uploads are complete on submit. Just use a required class on the upload tag to enforce.

{% upload id: 'headshot', type: 'image', class: 'required' %}
  <span class="upload"><i class="fal fa-arrow-circle-up"></i> Upload</span>
  <span class="uploading"><i class="fal fa-spin fa-spinner"></i> Uploading...</span>
  <span class="uploaded"><i class="fal fa-check-circle"></i> Uploaded</span>
{% endupload %}

Form testing

Syngency theme form markup includes support for test_dump and test_live querystrings. When either are present in the URL, all field required properties, data-required attributes and .required classes are removed for quick form testing.

See {% if querystring.test_live or querystring.test_dump %} blocks in forms for customizing send_to etc.

?test_dump=1

Dumps the POST data from the form submission back to the browser on submit to inspect. The form will not process and no emails are sent.

?test_live=1

Processes the form as usual, but without required fields and notification email sent to the testing recipient address.