web-dev-qa-db-fra.com

Horizontal (colonne) Formulaire de contact 7 et champ d'acceptation sur les appareils

Je veux créer un formulaire horizontal en colonnes avec le formulaire de contact 7, mais je suis resté bloqué avec la disposition de champ "acceptation" sur différents appareils.

J'utilise ce CSS pour implémenter mon cas:

.one-half,
.one-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 10px;
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.one-fourth {width: 22%;}

.last {
    margin-right: 0 !important;
    clear: right;
}

@media only screen and (max-width: 1024px) {
.one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

/*Horizontal form only*/
.wpcf-wrap {
    min-height: 90px;
}

div.wpcf7-response-output {
    width: 100%;
    clear: both;
    margin: 0;
}

.wpcf-accept > .wpcf7-form-control-wrap {
    display: inline-block !important;
}

et ce code sur les paramètres CF7:

<div class="wpcf-wrap">
<div class="one-third">
<label> Your Name (required)
    [text* your-name] </label>
</div>

<div class="one-third">
<label> Your E-mail (required)
    [email* your-email] </label>
</div>
<div class="one-third last">
[submit "Send"]
</div>
<div class="wpcf-accept">
[acceptance acceptance-487] I accept with <a href="/">agreement</a> of the personal data processing [/acceptance]
</div>
</div>
[response]

Sur le bureau, le résultat est:  enter image description here 

Et ceci sur mobile:  enter image description here 

Mais je veux voir ceci:  enter image description here 

La question est de savoir comment inverser <div class="one-third last"> et <div class="wpcf-accept"> sur des périphériques inférieurs à 767px?

Merci beaucoup!

plugin-contact-form-7
2
Alex P.

Vous avez besoin d'une colonne CSS two-third et d'une présentation comme celle-ci:

----------------------------------------------
|         .two-third         |  .one-third   |
----------------------------------------------
|  .one-half  |  .one-half   |               |
-----------------------------|    Submit     |
| Name column | Email column |    button     |
-----------------------------|    column     |
|     Acceptance column      |               |
----------------------------------------------

Donc, les règles CSS: (le ... signifie votre code et intact)

.one-half,
.one-third,
.two-third, /* Add this */
.one-fourth {
    ...
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 61.32%; }  /* Add this */
.one-fourth {width: 22%;}

...

@media only screen and (max-width: 767px) {
    /* Add the .two-third here, or somewhere else where appropriate based on your
       preferred mobile layout / design. */
    .one-half, .one-third, .two-third {
        ...
    }
}

/*Horizontal form only*/
...

 /* Add this.. */
.wpcf-accept {
  clear: both;
}

...

La partie HTML: (réindentée pour plus de clarté)

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-half">
      <label> Your Name (required)
          [text* your-name] </label>
    </div>

    <div class="one-half last">
      <label> Your E-mail (required)
          [email* your-email] </label>
    </div>

    <div class="wpcf-accept">
      [acceptance acceptance-487] I accept with <a href="/">agreement</a> of
      the personal data processing [/acceptance]
    </div>
  </div><!-- .two-third -->

  <div class="one-third last">
    [submit "Send"]
  </div>
</div>
[response]

Essayez une démo ici .

1
Sally CJ