web-dev-qa-db-ja.com

デバイスの水平（列）連絡フォーム7および承認欄

Contact Form 7を使って列方向の横型を作成したいのですが、別のデバイスでは "accept"フィールドレイアウトを使用しました。

私は自分のケースを実装するのにこのCSSを使います。

.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;
}

そして、このコードは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]

デスクトップでは、結果は次のとおりです。 enter image description here

そしてこれは携帯電話では： enter image description here

しかし、私はこれを見たい： enter image description here

問題は、767pxよりも小さいデバイスで<div class="one-third last">と<div class="wpcf-accept">を逆にする方法です。

どうもありがとう！

plugin-contact-form-7
2
Alex P.

two-third列のCSSと次のようなレイアウトが必要です。

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

だからCSSのルール：（ ...は あなたの コードを意味しそのまま）

.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;
}

...

HTML部分：（明確にするために再インデント）

<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]

デモを試してみてください ここ 。

1
Sally CJ