Form: Buy

Prototype

HTML
View
Context
Info
Notes


        
        <div class="u-text-center u-mb-large">
    <h1 class="u-heading-03"></h1>
    <p class="u-mb-large"></p>
</div>

<!-- billing shoose-->
<div class="u-p-base u-mb-large u-border-top-solid u-border-bottom-solid u-border-left-solid u-border-right-solid u-border-gray-light u-border-1">
    <h4 class="u-mb-none u-color-theme">Abbonamento «nome Testata»</h4>
    <span class="u-label-07 u-block">Prezzo Promo $</span>
    <span class="u-label-07 u-block">Prezzo a seguire $</span>
    <span class="u-label-07 u-block"> Tot. $</span>
    <span class="u-label-07 u-block u-mb-small">Data prossimo rinnovo.</span>
    <span class="u-label-07 u-block">Puoi disdire il tuo abbonamento quando vuoi.</span>
</div>
<!-- end billing shoose-->

<!-- -->
<div class="c-accordion u-mb-large">
    <label>
        <input type="checkbox" class="u-none">
        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-07 u-p-base u-flex  u-justify-between">
            Desideo la fattura
            <svg class="o-icon o-icon--md" data-dd-icon>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>
        </div>
        <div class="c-accordion__body">
            <!-- start forms -->
            <label class="c-form-radio">
                <span class="c-form-label u-label-07" for="">Azienda</span>
                <span class="c-form-radio__mark"></span>
                <input type="radio" value="private" id="company-form-radio" name="c-tabs__choice" checked>
                <div id="company-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
                    <!-- form fattura azienda -->
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Ragione sociale*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">P. IVA*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Indirizzo*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">N. civico*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Città*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">CAP*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Provincia*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <!-- end form fattura azienda -->
                </div>
            </label>

            <label class="c-form-radio">
                <span class="c-form-label u-label-07" for="">Privato</span>
                <span class="c-form-radio__mark"></span>
                <input type="radio" value="private" id="private-form-radio" name="c-tabs__choice">
                <div id="private-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
                    <!-- form fattura privato -->
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Nome*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Cognome*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Codice fiscale*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Indirizzo*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">N.civico*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Città*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">CAP*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Provincia*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <div class="u-mb-base">
                        <div class="">
                            <label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
                            <input class=" u-block u-size-full" type="text" placeholder="">
                        </div>
                    </div>
                    <!-- end form fattura privato -->
                </div>
            </label>
            <!-- end forms -->
        </div>
    </label>
</div>
<!-- -->

<!-- form carta -->
<div class="u-mb-base">
    <div class="">

        <label class="u-label-04 u-color-base" for="">Intestatario*</label>

        <input class=" u-block u-size-full" type="text" placeholder="">

    </div>

    <!-- TODO: REVIEW ICON POSITION -->

</div>
<div class="u-mb-base">
    <div class="">

        <label class="u-label-04 u-color-base" for="">Numero carta*</label>

        <input class=" u-block u-size-full" type="text" placeholder="">

    </div>

    <!-- TODO: REVIEW ICON POSITION -->

</div>
<div class="u-flex u-column u-row@md">
    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
        <div class="">

            <label class="u-label-04 u-color-base" for="">Scadenza*</label>

            <input class=" u-block u-size-full" type="text" placeholder="">

        </div>

        <!-- TODO: REVIEW ICON POSITION -->

    </div>
    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
        <div class="">

            <label class="u-label-04 u-color-base" for="">CVV*</label>

            <input class=" u-block u-size-full" type="text" placeholder="">

        </div>

        <!-- TODO: REVIEW ICON POSITION -->

    </div>
</div>
<!-- end form carta -->

<p class="u-mb-base">Proseguendo dichiari di accettare le Condizioni particolari per l'erogazione del servizio richiesto</p>

<div class="u-mb-base">
    <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
        <label class="c-form-radio">
            <span class="u-label-04 u-color-base u-inline-block" for="">
                Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.
            </span>
            <input type="radio" checked="checked" name="radio">
            <span class="c-form-radio__mark"></span>
        </label>
    </div>
</div>

<div class="u-mb-base">
    <button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Carta di credito</button>
</div>
<div class="u-mb-base">
    <button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Paypall</button>
</div>

<!-- payment method -->
<h3 class="u-mb-large u-capitalize">Scegli metodo di pagamento</h3>
<div class="c-accordion u-block u-mb-large">

</div>
<!-- end payment method -->


        {# <form id="{{method}}-{{type}}-form" class="fw__wrapper" onsubmit="window.ga && ga( 'send', 'event', 'Community');" option.method="post" novalidate> #}

  <div class="u-text-center u-mb-large">
    <h1 class="u-heading-03">{{ page_title }}</h1>
    <p class="u-mb-large">{{ page_subtitle }}</p>
  </div>

  <!-- billing shoose-->
  <div class="u-p-base u-mb-large u-border-top-solid u-border-bottom-solid u-border-left-solid u-border-right-solid u-border-gray-light u-border-1">
    <h4 class="u-mb-none u-color-theme">Abbonamento «nome Testata»</h4>
    <span class="u-label-07 u-block">Prezzo Promo $</span>
    <span class="u-label-07 u-block">Prezzo a seguire $</span>
    <span class="u-label-07 u-block"> Tot. $</span>
    <span class="u-label-07 u-block u-mb-small">Data prossimo rinnovo.</span>
    <span class="u-label-07 u-block">Puoi disdire il tuo abbonamento quando vuoi.</span>
  </div>
  <!-- end billing shoose-->

  <!-- -->
  <div class="c-accordion u-mb-large">
      <label>
          <input type="checkbox" class="u-none">
          <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-07 u-p-base u-flex  u-justify-between">
            Desideo la fattura
            <svg class="o-icon o-icon--md" data-dd-icon>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>
          </div>
          <div class="c-accordion__body">
            <!-- start forms -->
            <label class="c-form-radio">
                <span class="c-form-label u-label-07" for="">Azienda</span>
                  <span class="c-form-radio__mark"></span>
                  <input type="radio" value="private" id="company-form-radio" name="c-tabs__choice" checked>
                <div id="company-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
              <!-- form fattura azienda -->
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Ragione sociale*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">P. IVA*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Indirizzo*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">N. civico*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Città*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">CAP*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Provincia*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <!-- end form fattura azienda -->
            </div>
            </label>

            <label class="c-form-radio">
                <span class="c-form-label u-label-07" for="">Privato</span>
                <span class="c-form-radio__mark"></span>
                <input type="radio" value="private" id="private-form-radio" name="c-tabs__choice">
                <div id="private-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
              <!-- form fattura privato -->
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Nome*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Cognome*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Codice fiscale*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Indirizzo*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">N.civico*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Città*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">CAP*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Provincia*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <div class="u-mb-base">
                  <div class="">
                    <label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
                    <input class=" u-block u-size-full" type="text" placeholder="">
                  </div>
              </div>
              <!-- end form fattura privato -->
            </div>
            </label>
          <!-- end forms -->  
          </div>
      </label>
    </div>
  <!-- -->


  <!-- form carta -->
  <div class="u-mb-base">
      {% render "@input--default", {label:'Intestatario*', placeholder:'', fieldLabel:'placeholderfieldLabel'}, true %}
  </div>
  <div class="u-mb-base">
      {% render "@input--default", {label:'Numero carta*', placeholder:'', fieldLabel:'placeholderfieldLabel'}, true %}
  </div>
  <div class="u-flex u-column u-row@md">
    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
        {% render "@input--default", {label:'Scadenza*', placeholder:'', fieldLabel:'placeholderfieldLabel'}, true %}
    </div>
    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
        {% render "@input--default", {label:'CVV*', placeholder:'', fieldLabel:'placeholderfieldLabel'}, true %}
    </div>
  </div> 
  <!-- end form carta -->

  <p class="u-mb-base">Proseguendo dichiari di accettare le Condizioni particolari per l'erogazione del servizio richiesto</p>

  <div class="u-mb-base">
    <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall {% if error %}c-form-error{% endif %}">
    <label class="c-form-radio">
      <span class="u-label-04 u-color-base u-inline-block" for="">
        Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.
      </span> 
      <input type="radio" checked="checked" name="radio">
      <span class="c-form-radio__mark"></span>
    </label>
    </div>
  </div>


  <div class="u-mb-base">
    <button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Carta di credito</button>
  </div>
  <div class="u-mb-base">
    <button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Paypall</button>
  </div>

  <!-- payment method -->
  <h3 class="u-mb-large u-capitalize">Scegli metodo di pagamento</h3>
  <div class="c-accordion u-block u-mb-large">
  {% for method in methods %}
    <label>
        <input type="radio" class="u-none" name="c-accordion__choice">
        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
            <img src="{{method.icon}}" alt="{{method.name}}">
            <span class="u-label-04 u-color-base">{{ method.name }}</span>
            <svg class="o-icon o-icon--md" data-dd-icon>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>
        </div>
        <div class="c-accordion__body">
            {% if method.slug == "creditcard" %}
            <!-- -->
            {% for item in method.type %}
              <div class="c-accordion u-block u-mb-4">
                <label for="{{ method.slug }}-{{ item.slug }}-form-radio" class="u-block u-cursor-pointer">
                  <input type="radio" value="type" id="{{ method.slug }}-{{ item.slug }}-form-radio" class="u-none" name="c-tabs__choice-{{method.slug}}" {% if item.checked %}checked{% endif %}>
                  <div id="{{ method.slug }}-{{ item.slug }}-form-tab" class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                    <span class="u-label-04 u-color-base">{{ item.name }}</span>
                  </div>
                  <div id="{{ method.slug }}-{{ item.slug }}-form-tab" class="c-accordion__body">
                    <!-- buy form -->
                    {% if item.slug == "private" %}
                      <fieldset data-toggle="{{method}}-{{type}}-fw__step" class="fw__inputs o-divider {{method}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Numero carta di credito', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-flex u-column u-row@md">
                          <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall {% if error %}c-form-error{% endif %}">
                            {% render "@select", {label:'Mese', fieldLabel:'placeholderfieldLabel'}, true %}
                          </div>
                          <div class="u-mb-base u-size-full u-size-1-2 {% if error %}c-form-error{% endif %}">
                            {% render "@select", {label:'Anno', fieldLabel:'placeholderfieldLabel'}, true %}
                          </div>
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Intestatario', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'CVV', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %}">
                          {% render "@checkbox", {label:'Richiesta fattura', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>

                        <p class="u-label-07 u-color-secondary u-block u-mb-large">
                          Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                        </p>
                        <div lass="u-mb-large">
                          {% for item in legals %}
                          <div class="u-mb-base {% if errors %}c-form-error{% endif %}">
                            {% render "@radio--default", {label:item.description, name:item.name, fieldLabel:'placeholderfieldLabel', cheked: item.cheked}, true %}
                          </div>
                          {% endfor %}
                        </div>

                        <div class="u-mt-large">
                        {% render "@stepcontrols", {
                          submitForm: 'TRUE',
                          actionLabel: actionLabel,
                          deleteLabel: deleteLabel,
                          prevStep: 'FALSE',
                          prevStepIndex: 'FALSE',
                          prevStepForLabel: 'intro-form-radio',
                          skipStep: 'FALSE',
                          backLabel:'← Indietro',
                          nextLabel:'Avanti →',
                          mode: mode,
                          type: type
                        }, true %}
                      </div>
                      </fieldset>
                    {% elif item.slug == "companies" %}
                      <fieldset data-toggle="{{method}}-{{type}}-fw__step" class="fw__inputs o-divider {{method}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Numero carta di credito', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-flex u-column u-row@md">
                          <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall {% if error %}c-form-error{% endif %}">
                            {% render "@select", {label:'Mese', fieldLabel:'placeholderfieldLabel'}, true %}
                          </div>
                          <div class="u-mb-base u-size-full u-size-1-2 {% if error %}c-form-error{% endif %}">
                            {% render "@select", {label:'Anno', fieldLabel:'placeholderfieldLabel'}, true %}
                          </div>
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Intestatario', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'CVV', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %}">
                          {% render "@checkbox", {label:'Fattura', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>

                        <p class="u-label-07 u-color-secondary u-block u-mb-large">
                          Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                        </p>
                        <div lass="u-mb-large">
                          {% for item in legals %}
                          <div class="u-mb-base {% if errors %}c-form-error{% endif %}">
                            {% render "@radio--default", {label:item.description, name:item.name, fieldLabel:'placeholderfieldLabel', cheked: item.cheked}, true %}
                          </div>
                          {% endfor %}
                        </div>

                        <div class="u-mt-large">
                        {% render "@stepcontrols", {
                          submitForm: 'TRUE',
                          actionLabel: actionLabel,
                          deleteLabel: deleteLabel,
                          prevStep: 'FALSE',
                          prevStepIndex: 'FALSE',
                          prevStepForLabel: 'intro-form-radio',
                          skipStep: 'FALSE',
                          backLabel:'← Indietro',
                          nextLabel:'Avanti →',
                          mode: mode,
                          type: type
                        }, true %}
                      </div>
                      </fieldset>
                    {% endif %}
                    <!-- end buy form -->
                  </div>
                </label>
              </div>
            {% endfor %}
            <!-- -->
            {% elif method.slug == "paypal" %}
            <!-- -->
            {% for item in method.type %}
              <div class="c-accordion u-block u-mb-4">
                <label for="{{ method.slug }}-{{ item.slug }}-form-radio" class="u-block u-cursor-pointer">
                  {# <span class="u-label-04 u-color-base">{{ item.name }}</span>
                  <span class="c-form-checkbox__mark"></span> #}
                  <input type="radio" value="type" id="{{ method.slug }}-{{ item.slug }}-form-radio" class="u-none" name="c-tabs__choice-{{ method.slug }}" {% if item.checked %}checked{% endif %}>
                  <div id="{{ method.slug }}-{{ item.slug }}-form-tab" class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                    <span class="u-label-04 u-color-base">{{ item.name }}</span>
                  </div>
                  <div id="{{ item.slug }}-form-tab" class="c-accordion__body">
                    <!-- buy form -->
                    {# {{ item | dump}} #}
                    {% if item.slug == "private" %}
                      {# {{method.slug}}-----{{item.slug}} #}
                      <fieldset data-toggle="{{options.method}}-{{options.type}}-fw__step" class="fw__inputs o-divider {{options.method}}-{{options.type}}-fw__step u-pl-none u-pr-none u-mb-medium">
                        <div class="u-mb-base {% if error %}c-form-error{% endif %}">
                          {% render "@select", {label:'Paese', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %}">
                          {% render "@checkbox", {label:'Fattura', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <h3>dati fatturazione</h3>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Nome', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Cognome', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Indirizzo', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Cap', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Provincia', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Località', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Codice fiscale', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Codice fiscale', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Emai (per ricezione fattura)', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>

                        <p class="u-label-07 u-color-secondary u-block u-mb-large">
                          Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                        </p>
                        <div lass="u-mb-large">
                          {% for item in legals %}
                          <div class="u-mb-base {% if errors %}c-form-error{% endif %}">
                            {% render "@radio--default", {label:item.description, name:item.name, fieldLabel:'placeholderfieldLabel', cheked: item.cheked}, true %}
                          </div>
                          {% endfor %}
                        </div>

                        <div class="u-mt-large">
                        {% render "@stepcontrols", {
                          submitForm: 'TRUE',
                          actionLabel: actionLabel,
                          deleteLabel: deleteLabel,
                          prevStep: 'FALSE',
                          prevStepIndex: 'FALSE',
                          prevStepForLabel: 'intro-form-radio',
                          skipStep: 'FALSE',
                          backLabel:'← Indietro',
                          nextLabel:'Avanti →',
                          mode: mode,
                          type: type
                        }, true %}
                      </div>
                      </fieldset>
                    {% elif item.slug == "companies" %}
                      {# {{method.slug}}-----{{item.slug}} #}
                      <fieldset data-toggle="{{options.method}}-{{options.type}}-fw__step" class="fw__inputs o-divider {{options.method}}-{{options.type}}-fw__step u-pl-none u-pr-none u-mb-medium">
                        <div class="u-mb-base {% if error %}c-form-error{% endif %}">
                          {% render "@select", {label:'Paese', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Codice destinatario', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'PEC', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Ragione sociale', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Indirizzo', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Cap', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Provincia', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %}">
                          {% render "@select", {label:'Località', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'P.IVA', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>
                        <div class="u-mb-base {% if error %}c-form-error{% endif %} gggg">
                          {% render "@input--default", {label:'Codice fiscale', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel'}, true %}
                        </div>

                        <p class="u-label-07 u-color-secondary u-block u-mb-large">
                          Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                        </p>
                        <div lass="u-mb-large">
                          {% for item in legals %}
                          <div class="u-mb-base {% if errors %}c-form-error{% endif %}">
                            {% render "@radio--default", {label:item.description, name:item.name, fieldLabel:'placeholderfieldLabel', cheked: item.cheked}, true %}
                          </div>
                          {% endfor %}
                        </div>

                        <div class="u-mt-large">
                        {% render "@stepcontrols", {
                          submitForm: 'TRUE',
                          actionLabel: actionLabel,
                          deleteLabel: deleteLabel,
                          prevStep: 'FALSE',
                          prevStepIndex: 'FALSE',
                          prevStepForLabel: 'intro-form-radio',
                          skipStep: 'FALSE',
                          backLabel:'← Indietro',
                          nextLabel:'Avanti →',
                          mode: mode,
                          type: type
                        }, true %}
                      </div>
                      </fieldset>
                    {% endif %}
                    <!-- end buy form -->
                  </div>
                </label>
              </div>
            {% endfor %}
            <!-- -->
            {% endif %}
        </div>
    </label>
  {% endfor %}
  </div>
  <!-- end payment method -->


        
            
            {
  "limit": 9,
  "stories": [
    {
      "index": 1,
      "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
      "label": "Emergenza Coronavirus",
      "date": "ieri pomeriggio, 15:51",
      "author": "Violetto Gorrasi",
      "number": 1,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 2,
      "title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
      "label": "Sei arresti",
      "date": "ieri pomeriggio, 15:51",
      "author": "Matteo Scarlino",
      "number": 2,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 3,
      "title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
      "label": "Esteri",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 3,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 4,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 4,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 5,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Veronica Altimari",
      "number": 5,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 6,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Alberto Berlini",
      "number": 6,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 7,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 7,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 8,
      "title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 8,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 9,
      "title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
      "label": "Economia",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 9,
      "summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    }
  ],
  "opinions": [
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "17 luglio, 2020",
      "author": "Carlo Sala"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "12 luglio, 2020",
      "author": "Massimiliano Dona"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "30 giugno, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 giugno, 2020",
      "author": "Marilia Parente"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "27 maggio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "13 aprile, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "11 aprile, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "04 marzo, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "18 febbraio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "01 febbraio, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "25 gennaio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 gennaio, 2020",
      "author": "Luciano Lanna"
    }
  ],
  "googlePlayStoreImg": "/assets/images/site/app/google_play_store.svg",
  "iosAppStoreImg": "/assets/images/site/app/ios_app_store.svg",
  "type": "buy",
  "steps": 5,
  "switchPrivacy": "Ho letto <a>fgddg</a>",
  "switchPersonalData": "Acconsento <a>fgddg</a>",
  "succededImg": "/assets/images/site/illustrations/end_wizard_lead-min.svg",
  "legals": [
    {
      "item": null,
      "name": "subscriptioncontract",
      "description": "Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.",
      "confirm": "Accetto",
      "decline": "Non accetto"
    }
  ],
  "billing": [
    {
      "item": null,
      "name": "billing",
      "label": "Annuale",
      "cheked": true
    },
    {
      "item": null,
      "name": "billing",
      "label": "Mensile",
      "cheked": false
    }
  ]
}

Handle: @form--buy
Variants (20): Default , Avatar , Login , Logout , Delete , Recovery , Activate , Signup , Buysignup , Buysignupshort , Signup Social , Edit , Edit Profile , Edit Subscriptions , Edit Payments , Edit Arguments , Edit Notifications , Lead , Buy , Subscription
Preview:
- With layout
- Component only
Filesystem Path: src/lib/templates/form/form--buy.njk
References (5): @input--default, @select, @checkbox, @radio--default, @stepcontrols
Referenced by (3): @form--buysignup, @form--buysignupshort, @buy

Forms templates

Items templates are used to display forms.

Parameters

type - toggle input email/phone, accepted values: login, logout, recovery, delete, activate, signup, edit, lead
mode - toggle input email/phone, accepted values: email, phone, social, user,
zoneRequired - toggle required zone fieldset, accepted values: bolean

Variants

Default - Unused
Login - Used for login form
Logout - Used for logout form
Delete - Used for delete account
Recovery - Used for recovery credentials
Activate - Used for activate account
Signup - Used for new account registration
Edit - Used for edit user profile
Lead - Used for marketing lead generation