1. cliveportman
  2. /code
  3. /craft-cms-frontend-forms-with-super-table-with-examples-for-semantic-ui

Craft CMS frontend forms with Super Table (with examples for Semantic UI)

Start as normal then when ready for the Super Table field, init the field with the following:

        {% set fieldHandle = 'travelDetails' %}
        {% set field = craft.fields.getFieldByHandle(fieldHandle) %}
        {% set blocktype = craft.superTable.getSuperTableBlocks(field.id)[0] %}
        {# Start with the top-level Super Table field #}
        <input type="hidden" name="fields[{{ fieldHandle }}]" value="">

In my case, I only ever have need for one block. But before creating a new one I need to test for an existing one (if it's an edit form maybe):

        {% set existingBlock = '' %}
        {% if customer.travelDetails | length %}
          {% for block in customer.travelDetails %}
            {% set existingBlock = block %}
          {% endfor %}
        {% endif %}

Then I init the block, testing for the existing block:

        {# Add a new row of data - note the `new1` #}
        <input type="hidden" name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][type]" value="{{ blocktype }}">
        <input type="hidden" name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][enabled]" value="1">

Now we can start adding the fields. In this example I'm using Semantic UI to create a completely fresh backend, so you won't need all of this.

Dropdown

        {% set subField = 'nationality' %}{# DON'T FORGET TO ADD EXPLICITLY TO THE VALUE #}
        <div class="eight wide field required">
          <label for="">Nationality</label>
          <div class="ui fluid search selection dropdown country">
            <input type="hidden" 
              name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" 
              value="{{ existingBlock.nationality }}" 
              class="countryid">
            <i class="dropdown icon"></i>
            <div class="default text">Select nationality</div>
            <div class="menu">
              {% include '_hq/application/_incs/_dropdownCountries' %}
            </div>
          </div>
        </div>

Lightswitch (using checkbox on the frontend)

        {% set subField = 'doYouHoldADualPassport' %}{# DON'T FORGET TO ADD EXPLICITLY TO THE VALUE #}
        <input type="hidden" name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" value="">
        <div class="field">
          <label>Do you hold a dual passport?</label>
          <div class="ui showmore checkbox">
            <input type="checkbox" 
              name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" 
              value="1" {{ existingBlock.doYouHoldADualPassport == '1' ? 'checked' }}
              class="hidden">
            <label>Yes</label>
          </div>
        </div>

Lightswitch (using radios on the frontend)

          <div class="four wide field">
            {% set subField = 'departureConfirmed' %}{# DON'T FORGET TO ADD EXPLICITLY TO THE VALUE #}
            <input type="hidden" name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" value="">
            <div class="grouped fields">
              <label>Is this date approximate or confirmed?</label>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" 
                    name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" 
                    value="" {{ existingBlock.departureConfirmed != '1' ? 'checked' }}
                    class="hidden">
                  <label>Approximate</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" 
                    name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" 
                    value="1" {{ existingBlock.departureConfirmed == '1' ? 'checked' }}
                    class="hidden">
                  <label>Confirmed</label>
                </div>
              </div>
            </div>

Date (using Semantic's calendar plugin)

          {% set subField = 'departureDate' %}{# DON'T FORGET TO ADD EXPLICITLY TO THE VALUE #}
          <div class="four wide field required ">
            <label>Departure Date</label>
            <div class="ui calendar">
              <div class="ui input left icon">
                <i class="calendar icon"></i>
                <input type="text" class="calendar-text" value="{{ existingBlock.departureDate | date('d/m/Y') }}" placeholder="Select date">
              </div>
            </div>
            <input type="hidden" name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}][date]" class="calendar-date" value="{{ existingBlock.departureDate | date('d/m/Y') }}">
          </div>

Plain text

        {% set subField = 'secondNationality' %}{# DON'T FORGET TO ADD EXPLICITLY TO THE VALUE #}
        <div class="five wide field required">
          <label for="{{ fieldHandle }}-{{ subField }}">
            Second nationality
          </label>
          <input type="text" 
            name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}]" 
            value="{{ existingBlock.secondNationality }}" 
            id="{{ fieldHandle }}-{{ subField }}" 
            placeholder="">
        </div>

Table

 {% set subField = 'currentPassportOrTravelDocument' %}{# DON'T FORGET TO ADD EXPLICITLY TO THE VALUE #}
        <div class="field">
          <label for="">Current passport/travel document</label>
          <div class="ui segment" style="margin-top: 0;">
            <div class="fields">               <div class="four wide field">
                <label for="{{ fieldHandle }}-{{ subField }}">
                  Passport number
                </label>
                <input type="text" 
                  name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}][0][col1]" 
                  value="{{ existingBlock.currentPassportOrTravelDocument[0].number }}" 
                  id="{{ fieldHandle }}-{{ subField }}" 
                  placeholder="">
              </div>               <div class="four wide field">
                <label for="{{ fieldHandle }}-{{ subField }}">
                  Place of issue
                </label>
                <input type="text" 
                  name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}][0][col2]" 
                  value="{{ existingBlock.currentPassportOrTravelDocument[0].placeOfIssue }}" 
                  id="{{ fieldHandle }}-{{ subField }}" 
                  placeholder="">
              </div>               <div class="eight wide field">
                <label for="{{ fieldHandle }}-{{ subField }}">
                  Issuing authority
                </label>
                <input type="text" 
                  name="fields[{{ fieldHandle }}][{{ existingBlock | length ? existingBlock.id : 'new1' }}][fields][{{ subField }}][0][col3]" 
                  value="{{ existingBlock.currentPassportOrTravelDocument[0].issuingAuthority }}" 
                  id="{{ fieldHandle }}-{{ subField }}" 
                  placeholder="">
              </div>
              
            </div>
          </div>
        </div>