[odedkineretParticipant]

Hello,
I have a form using Contact Form 7. I want to have the form in 2 columns ( The first 11 fields in the first column) and the rest in the second.
Can u please advise me how to do that ?
Thanks
K

[ChristianModerator]

Hey K,

This is under Contact Form 7 development which regretfully falls outside the scope of our support. But to give you a tip, you can use X’s column classes to build two columns in your contact form. Please see https://cloudup.com/c91sgnG78GW

Below is the sample code you can test in your contact form.

<div class="x-column x-sm x-1-2">
<!-- 1st column fields -->

<p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

</div>

<div class="x-column x-sm x-1-2 last">
<!-- 2nd column fields -->

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

</div>

The best way to know X column classes is to go to http://theme.co/x/demo/integrity/1/shortcodes/columns/ and inspect the columns using Chrome Dev Tools.

Hope that helps. 🙂

[RifftParticipant]

Hello guys,

Thanks for the tip, it’s working well.
However, when you send your message, the sending confirmation goes all over the form (cf img).

I understand that falls outside the scope of your support but if you have another tip go get the classic style (green background just around the confirmation message), it will be really great 🙂

Thanks a lot.

[RupokMember]

Hi there,

Could you provide your URL and clarify the issue a bit? I mean I am not sure about the screenshot. Is that something you want to achieve or it’s the current situation? Kindly let us know a bit details with another screenshot.

Cheers!

[RifftParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back. The issue is actually related with your setup so it would be a bit tricky to control this. However I can suggest you a workaround but further customization from here would be getting into custom development, which is outside the scope of support we can offer.

You can add this under Custom > CSS in the Customizer.

.wpcf7-response-output {
  float: right;
  min-width: 350px;
  width: 48%;
}

Hope this helps.

Cheers!

[RifftParticipant]

It’s one more time perfect.
Thanks a lot !

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts