[Mark SingerParticipant]

Hello,

I know there are topics on this on the form. But this code doesn’t seem to work for me:

[column type=”one-half”] [text* text-159] [/column]
[column type=”one-half” last=”true”] [text* text-159] [/column]

The extra text besides the cf7 tags just shows above and below the fields. Plus the field are still in one colum each, one below the other. Propably because the line isn’t recognised.

Where is my mistake?

Best regards
Mark

[DarshanaModerator]

Hi there,

Thanks for writing in! Please provide us with a URL to your referenced page, so that we can assist you with a possible CSS workaround.

Basically you can limit the width of the form controls. Please refer to the following thread (https://community.theme.co/forums/topic/contact-form-customization/).

Thanks!

[Mark SingerParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Mark,

Thanks for the URL!

First add a class of cf7-textarea to the paragraph tag that contains the textarea field. For example:

<p class="textarea"></p>

Then add a class of cf7-submit to the paragraph tag that contains the form submit button following the same method as for textarea field.

Then add following CSS code under Custom > CSS in the Customizer:

.wpcf7 p {
    float: left;
    width: 50%;
}

.wpcf7 p:nth-of-type(2n+1) {
    padding-right: 10px;
    clear: both;
}

.wpcf7 p:nth-of-type(2n+2) {
    padding-left: 10px;
}

.wpcf7 p {
    float: left;
    width: 50%;
}

.wpcf7 p.cf7-textarea,
.wpcf7 p.cf7-submit {
    float: none;
    width: 100%;
    clear: both;
}

Thank you!

[Mark SingerParticipant]

Wonderful, that worked fine!

One other Question: What would I have to alter in these settings if I needed 3 or 4 columns?

Anyway thanks of course for the quick reply and great support:)

Best regards
Mark

[Rue NelModerator]

Hello Mark,

It’s good to know that it is working for you. If you need more columns (3 or 4 columns maybe), you probably need this setup:

For 3 columns, you need this:

.wpcf7 p {
    float: left;
    width: 33%;
}

.wpcf7 p:nth-of-type(3n+1) {
    padding-right: 10px;
    clear: both;
}

.wpcf7 p:nth-of-type(3n+2) {
    padding-left: 10px;
}

.wpcf7 p:nth-of-type(3n+3) {
    padding-left: 10px;
}

.wpcf7 p {
    float: left;
    width: 33%;
}

.wpcf7 p.cf7-textarea,
.wpcf7 p.cf7-submit {
    float: none;
    width: 100%;
    clear: both;
}

You might also check out this topic for more advanced and no css code setup,
https://community.theme.co/forums/topic/contact-form-7-improvements-featured-sub-in-pricing-table/#post-644380

Please let us know if this works out for you. Thank you.

[Author]

Posts