Contact Form Multiple Column styling with Responsiveness

[craig11]

Hi Support,

I am creating a contact Form 7 that will have 2 rows of 2 columns, followed by a single row drop down selector then a text area.

I have applied the following in the contact form builder:

[text* your-name placeholder "First Name*"]

[text* text-161 placeholder "Last Name*"]

[email* your-email placeholder "Email*"]

[text YourNumber placeholder "Your Number"]

[select* ITServices include_blank "IT Services" "Cloud Services" "Telephony Services" "Security Services" "Connectivity Services"]

[textarea* your-message placeholder "How can we assist you today?*"]

[submit "Send us your message now"]

And the following in the CSS:
/* Contact 7 Forms
--------------------------------------------- */
.wpcf7 input[type=“text”], .wpcf7 textarea, .wpcf7 select, .wpcf7 input[type=“tel”], .wpcf7 input[type=“email”]
{ border:1px solid #000000 }
.wpcf7 input[type=“text”], .wpcf7 textarea, .wpcf7 select, .wpcf7 input[type=“tel”], .wpcf7 input[type=“email”]
{ border-radius: 10px 10px 10px 10px;}
.wpcf7 {
padding: 1em
}
.whole-form1 {
display: flex;
justify-content: center
}
.field-space1 {
padding-right:1%;
}
.whole-form2 {
display: flex;
justify-content: center;
}
@media only screen and (max-width: 600px) {
.whole-form1 {
flex-direction: column;
}
.whole-form2 {
flex-direction: column;
}
}

But i cant seem to get the tope 2 rows to go full width.

Any ideas on the top 2 rows with columns?

[craig11]

Sorry not sure how to show you the html as the div keeps being removed

[marc_a]

Hi @craig11,

Thanks for reaching out!

Upon checking on your CSS code, you just need to add flex: 0 0 50%; to your .field-space1{}. Please code the code below.

.field-space1 {
     padding-right: 2%;
    flex: 0 0 50%;
}

.field-space1:last-child {
     padding: 0;
}

That code will have a proper alignment of your top columns. The result should be like this:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[craig11]

@marc_a

.field-space1:last-child {
     padding: 0;
}

Perfect, worked exactly like i wanted it to

[friech]

You’re most welcome,

Cheers!

[wwashington0001]

I see that this was done using CSS, however I’ve read that this could also be achieved by using a column shortcode inside the Contact Form 7 editor. The article said to check and see if the theme you are using already has a column shortcode included, but if not to install a shortcode plugin.

@friech which do you recommend to do keeping in mind it needs to be responsive? Also does Pro theme include a column shortcode already that I can use if that’s recommended?

[friech]

Hi William,

Thank you for writing in, In that case, I would recommend the native container/column shortcode from the Theme (which PRO and X still supported).

But please note, while it is still possible to use these shortcodes, and they will always be supported, it is no longer something we recommend doing for new sites.

Cheers,