landing_page/qdrant-landing/themes/qdrant/layouts/partials/steps-form.html

{{ $seed := "foo" }}
{{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}
<!--suppress XmlDuplicatedId -->
<div class="steps-form row">
    <form class="steps-form__form col-12 col-md-10 col-lg-6" name="cloud-request"
          method="POST" id="{{ $random }}" novalidate data-netlify="true">
        <div class="spinner-border steps-form__spinner" role="status" style="width: 5rem; height: 5rem;">
            <span class="sr-only">Loading...</span>
        </div>
        <section class="owl-carousel">
            {{ range .Params.Form }}
            <div class="form-group" data-step="{{ .id }}">
                <label class="steps-form__label steps-form__label_big" for="{{ .id }}{{ .name }}">
                    {{ if .header }} <h2>{{ .header | safeHTML }}</h2> {{ end }}
                    {{ .label | safeHTML }}
                    {{ if eq .type "radio"}}(Choose one){{ end }}
                    {{ if eq .type "checkbox"}}(Choose as many as you want){{ end }}
                </label>
                {{ if eq .type "select" }}
                <select class="steps-form__input custom-select" id="{{ .id }}{{ .name }}" name="{{ .name }}">
                    <option selected>Open this select menu</option>
                    {{ range .options }}
                    <option value="{{ . }}">{{ . }}</option>
                    {{ end }}
                </select>
                {{ else if or (eq .type "radio") (eq .type "checkbox")}}
                {{ $input := . }}
                <div class="checkbox mb-5">
                    {{ range .options }}
                    <input class="checkbox__input" type="{{ $input.type }}" name="{{ $input.name }}"
                           id="{{ $input.id }}{{ $input.name }}{{ . }}"
                           value="{{ . }}">
                    <label class="steps-form__label checkbox__label" for="{{ $input.id }}{{ $input.name }}{{ . }}">
                        {{ . }}</label>
                    {{ end }}
                </div>

                {{ else if eq .type "text"}}
                <textarea class="form-control steps-form__input" id="{{ .id }}{{ .name }}" name="{{ .name }}"
                          rows="{{ .rows }}" {{ if .required }}required{{ end }} placeholder="{{ .placeholder }}"></textarea>
                {{ else }}
                <input type="{{ .type }}" name="{{ .name }}"
                       class="steps-form__input form-control" id="{{ .id }}{{ .name }}"
                       {{ if .required }}required{{ end }} placeholder="{{ .placeholder }}">
                <div class="invalid-feedback">
                    Please provide a valid {{ .type }}.
                </div>
                {{ end }}
            </div>
            {{ end }}

            <div class="form-group" data-step="{{ len .Params.Form }}">
                <p class="steps-form__label steps-form__label_big">Ta-da! We'll happily be in touch with you very soon! 🥳</p>
                <div class="checkbox">
                    <input class="checkbox__input" type="checkbox" name="termsConsent"
                           id="termsConsent" required>
                    <label class="steps-form__label checkbox__label d-flex align-items-center mb-2" for="termsConsent">
                        <span>I am consent to all of
                        <a href="/legal/terms_and_conditions/" target="_blank">terms and conditions</a>
                            and you agree to be contacted again for your onboarding.*</span>
                    </label>
                    <div class="invalid-feedback">
                        You must accept the terms and conditions
                    </div>
                </div>
                <button type="submit" class="btn btn-style-four btn-style-four_reversed
                                             btn-style-four_big btn-style-four_border mt-4">
                    <span class="text">Submit</span>
                </button>
            </div>
        </section>
    </form>
</div>

<script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';

    function checkForm(form)
    {
      if(!form.termsConsent.checked) {
        alert("Please indicate that you accept the Terms and Conditions");
        form.termsConsent.focus();
        return false;
      }
      return true;
    }


    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      const form = document.getElementById({{ $random }});

      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();

          const invalidFieldNames = Array.from(form.querySelectorAll(':invalid')).map(field => field)
          const nextInvalid = $(invalidFieldNames[0]).closest('[data-step]').data('step');

          stepsFormCarousel.trigger('to.owl.carousel', [nextInvalid]);
        }

        form.classList.add('was-validated');

        /**
         * form.querySelectorAll('.form-group').forEach(input => {
          console.log(input)
          input.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
              event.preventDefault();
              stepsFormCarousel.trigger('next.owl.carousel');
            }
          });
        }); */
      });

      const stepsFormCarousel = $('.owl-carousel').owlCarousel({
        items: 1,
        mouseDrag: false,
        touchDrag: false,
        nav: true,
        rewind: false,
        slideTransition: 'easy',
        loop: false,
        margin: 10,
        stagePadding: 5,
        navText: ['<div class="btn btn-style-four btn-style-four_small btn-style-four_border"><span class="text"> <i class="fas fa-chevron-left"></i> Back</span></div>', '<div class="btn btn-style-four btn-style-four_small btn-style-four_border"><span class="text"> Next question <i class="fas fa-chevron-right"></i></span></div>'],
        onInitialized: () => {
          document.getElementsByClassName('spinner-border')[0].remove();
        }
      });
    }, false);
  })();

</script>