JMT Alimentation Animal
Project version : 1.0.3

Form Default

<div role="form" class="wpcf7" id="wpcf7-f14338-o1" dir="ltr" lang="fr-FR">
    <div class="screen-reader-response"></div>
    <form action="/contact/#wpcf7-f14338-o1" method="post" class="wpcf7-form" novalidate="novalidate" _lpchecked="1">
        <div style="display: none;">
            <input type="hidden" name="_wpcf7" value="14338">
            <input type="hidden" name="_wpcf7_version" value="5.1.4">
            <input type="hidden" name="_wpcf7_locale" value="fr_FR">
            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f14338-o1">
            <input type="hidden" name="_wpcf7_container_post" value="0">
        </div>
        <span class="form-input form-input--required">
         <label>Prénom</label>
         <span class="wpcf7-form-control-wrap your-firstname"><input type="text" name="your-firstname" value=""
               size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
               aria-invalid="false"
               style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></span>
        </span>

        <span class="form-input form-input--required">
         <label>Nom de famille</label>
         <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40"
               class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
               aria-invalid="false"></span>
        </span>

        <span class="form-input form-input--required">
         <label>Adresse e-mail</label>
         <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40"
               class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
               aria-required="true" aria-invalid="false"></span>
        </span>

        <span class="form-input">
         <label>N° de téléphone</label>
         <span class="wpcf7-form-control-wrap your-phone"><input type="tel" name="your-phone" value="" size="40"
               class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span>
        </span>

        <span class="form-input form-input--two">
         <label>Votre message</label>
         <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"
               class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span>
        </span>

        <span class="form-input form-input--two form-input--checkbox">
         <span class="wpcf7-form-control-wrap privacy-policy"><span
               class="wpcf7-form-control wpcf7-acceptance optional"><span class="wpcf7-list-item"><label><input
                        type="checkbox" name="privacy-policy" value="1" aria-invalid="false"><span
                        class="wpcf7-list-item-label">J'ai lu et accepte <a href="#">la politique de
                           confidentialité</a></span></label>
        </span>
        </span>
        </span>
        </span>

        <span class="form-input form-input--two form-input--submit">
         <button type="submit" class="button button--tertiary button--shadow">Nous contacter</button>
      </span>
        <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>
</div>
<div role="form" class="wpcf7" id="wpcf7-f14338-o1" dir="ltr" lang="fr-FR">
   <div class="screen-reader-response"></div>
   <form action="/contact/#wpcf7-f14338-o1" method="post" class="wpcf7-form" novalidate="novalidate" _lpchecked="1">
      <div style="display: none;">
         <input type="hidden" name="_wpcf7" value="14338">
         <input type="hidden" name="_wpcf7_version" value="5.1.4">
         <input type="hidden" name="_wpcf7_locale" value="fr_FR">
         <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f14338-o1">
         <input type="hidden" name="_wpcf7_container_post" value="0">
      </div>
      <span class="form-input form-input--required">
         <label>Prénom</label>
         <span class="wpcf7-form-control-wrap your-firstname"><input type="text" name="your-firstname" value=""
               size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
               aria-invalid="false"
               style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></span>
      </span>

      <span class="form-input form-input--required">
         <label>Nom de famille</label>
         <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40"
               class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
               aria-invalid="false"></span>
      </span>

      <span class="form-input form-input--required">
         <label>Adresse e-mail</label>
         <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40"
               class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
               aria-required="true" aria-invalid="false"></span>
      </span>

      <span class="form-input">
         <label>N° de téléphone</label>
         <span class="wpcf7-form-control-wrap your-phone"><input type="tel" name="your-phone" value="" size="40"
               class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span>
      </span>


      <span class="form-input form-input--two">
         <label>Votre message</label>
         <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"
               class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span>
      </span>

      <span class="form-input form-input--two form-input--checkbox">
         <span class="wpcf7-form-control-wrap privacy-policy"><span
               class="wpcf7-form-control wpcf7-acceptance optional"><span class="wpcf7-list-item"><label><input
                        type="checkbox" name="privacy-policy" value="1" aria-invalid="false"><span
                        class="wpcf7-list-item-label">J'ai lu et accepte <a href="#">la politique de
                           confidentialité</a></span></label></span></span></span>
      </span>

      <span class="form-input form-input--two form-input--submit">
         <button type="submit" class="button button--tertiary button--shadow">Nous contacter</button>
      </span>
      <div class="wpcf7-response-output wpcf7-display-none"></div>
   </form>
</div>
/* No context defined for this component. */
  • Content:
    .wpcf7-form {
       display: grid;
       grid-gap: $grid-gap-m;
       grid-gap: var(--grid-gap, $grid-gap-m);
    
       .form-input {
          display: block;
          font-size: rem(18);
    
          &--required {
             label {
                display: flex;
                align-items: center;
                justify-content: space-between;
    
                &::after {
                   content: "REQUIS";
                   color: $c-label;
                   font-size: rem(14);
                   margin-left: .5rem;
                }
             }
          }
    
          &--submit {
             text-align: right;
             margin-top: 5px;
    
             @include mediaWQuery($media-query-m) {
                .button { padding: $margin-m 80px }
             }
          }
       }
    
       @include mediaWQuery($media-query-m) {
          grid-template-columns: repeat(2, 1fr);
    
          .form-input {
             &--two { grid-column: span 2 }
          }
       }
    
       // Notifications
       .wpcf7-response-output {
          margin: 0;
          @include mediaWQuery($media-query-m) {
             grid-column: span 2;
          }
       }
    
       // Input not valid.
       .wpcf7-not-valid {
          border-color: $c-red!important;
          box-shadow: inset 0 1px 3px 0 rgba($c-red, .3)!important;
       }
    
       .wpcf7-not-valid-tip {
          color: $c-red;
          font-weight: 700;
       }
    }
  • URL: /components/raw/form-default/form-default.scss
  • Filesystem Path: components/05-objects/03-forms/01-form-default/form-default.scss
  • Size: 1.2 KB

There are no notes for this item.