2

I want to make columned horizontal form with Contact Form 7, but I stuck with "acceptance" field layout on different devices.

I use this CSS to implement my case:

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

and this code on CF7 settings:

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

On desktop the result is: enter image description here

And this on mobile: enter image description here

But I want to see this: enter image description here

The question is how to reverse <div class="one-third last"> and <div class="wpcf-accept"> on devices smaller than 767px?

Thanks a lot!

1

You need a two-third column CSS and a layout like this:

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

So the CSS rules: (the ... means your code and 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;
}

...

The HTML part: (re-indented for clarity)

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

Try a demo here.

  • 1
    Thanks a lot! It works for me after some small modifications. – Alex P. Aug 21 '18 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.