Stylising Contact Form 7 with PRO

[tapoulton2]

Hi there,

I’m hopelessly trying to stylise WPCF7 similar to https://mn2s.com/contact/ without any progress. I want to use my theme font, etc., but any input on achieving layout and removing borders (excl. the bottom line) would be HUGELY appreciated. Hope you can help?

Best wishes as always,

Tom

[Prasant]

Hello Tom,

Thanks for writing in!

Please add following CSS under Pro > Theme Options > CSS:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border: 0;
}

Let us know how it goes.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[tapoulton2]

Superb! Thanking you kindly.

[Prasant]

You are most welcome.

[tapoulton2]

Hi @Prasant,

I’m looking for a simple line of CSS (or HTML?) to create two columns for the respective WPCF7 fields in this screenshot, along with similar spacing. The rest I’ve managed to work out. Is this something you could assist with?

[lely]

Hello There,

Please try using a combination of container shortcode and column shortcode. For spacing, try to use GAP shortcode. Alternatively, yes you can use direct html. See this thread for as guide.

Hope this helps.

[tapoulton2]

Thanks, @Lely. How would you create a horizontal gap using the shortcodes?

[christopher]

Hi Thomas,

You can not have a horizontal Gap with the Gap shortcode.

Thank you.

[tapoulton2]

Thanks, what HTML or CSS might I use to achieve a horizontal gap?

[christian]

Hey Thomas,

There’s none regretfully. You will need to learn and use CSS as a user of Contact Form 7. We already shared some guidance previously. Providing more custom codes here would be veering into custom development which is outside the scope of our support.

Thanks for understanding.

[tapoulton2]

Okey-doke. Thanks anyway.

[christian]

You’re welcome.