apostrophe-forms/lib/modules/apostrophe-forms-widgets/views/widget.html

Build forms for ApostropheCMS in a simple user interface.

{% set widget = data.widget %}
{% set form = data.widget._form %}
{% set classPrefix = data.widget.classPrefix %}
{% if form %}
  {% set params = false %}
  {% if form.queryParamList %}
    {% set params = '' %}
    {% for param in form.queryParamList %}
      {% if loop.last %}
        {% set params = params + param.key %}
      {% else %}
        {% set params = params + param.key + ',' %}
      {% endif %}
    {% endfor %}
  {% endif %}
  <form {% if classPrefix %}class="{{ classPrefix + '__form' }}"{% endif %} data-apos-forms-form="{{ form._id }}" autocomplete="off" {% if form.enableQueryParams %}data-apos-forms-params='{{params}}'{% endif %}>
    {{ apos.area(form, 'contents', {
      edit: false
    }) }}

    {% set recaptchaSite = apos.modules['apostrophe-forms'].getOption('recaptchaSite') %}
    {% if recaptchaSite %}
      <div id="aposRecaptcha{{widget._id}}" data-apos-recaptcha-slot="{{widget._id}}" data-apos-recaptcha-sitekey="{{ recaptchaSite }}"></div>
      <noscript>
        <p>{{ __('NOTE: The form above requires Javascript enabled in the browser for submission.') }}</p>
      </noscript>
    {% endif %}
    <button type="submit" {% if classPrefix %}class="{{classPrefix + '__submit' }}"{% endif %}>{{ form.submitLabel or 'Submit' }}</button>
  </form>
  <p role="alert" class="apos-forms-hidden apos-forms-error {{ classPrefix + '__error' if classPrefix }}" data-apos-forms-submit-error>
    {{ __("An error occurred submitting the form. Please try again.") }}
    <span data-apos-forms-global-error></span>
  </p>

  {% if recaptchaSite %}
    <p role="alert" class="apos-forms-hidden apos-forms-error {{ classPrefix + '__error' if classPrefix }}" data-apos-forms-recaptcha-error>
      {{ __("Please complete the reCAPTCHA validation.") }}
    </p>
  {% endif %}
  <p class="apos-forms-hidden {{classPrefix + '__spinner' if classPrefix }}" data-apos-forms-spinner>Submitting...</p>
  <div role="alert" class="apos-forms-hidden apos-forms-submission-thank-you {{ classPrefix + '__submission-thank-you' if classPrefix }}" data-apos-forms-thank-you>
    {% if form.thankYouHeading %}
      <h3>{{ form.thankYouHeading }}</h3>
    {% endif %}
    {% if not apos.areas.isEmpty(form, 'thankYouBody') %}
      {{ apos.area(form, 'thankYouBody', {
        edit: false
      }) }}
    {% endif %}
  </div>
{% endif %}