CSS for multiple contact form 7's

[SecureSpot]

Hello

My website is now live yet I still have a lot of modifications to make and content to add.
I have a contact form 7 on my homepage which looks great and is working. I have used CSS to style it.

I want to add another contact form 7 on my contact page however I need to style it with CSS again and I need CSS to split the field boxes into 2 columns.

Can you please advise the best way to do this WITHOUT the use of another plugin?

Thanks and Kind Regards

Suzy

[nico]

Hi @SecureSpot,

Thanks for writing in.

As of now, the only part I understand is to add another contact form with a different CSS. You could achieve it by using the id or the class of the new form so that you could uniquely style the new form.

In regards to the split the field box, not sure what to achieve yet. In this case, please share us an image what you want to achieve and URL where your form is located.

Thanks

[SecureSpot]

Thank you. How would I add the class to the css. For example my current CSS starts

/* Home Contact Styles */
.wpcf7 {

so where would I add the class? I will try this first.
I have not yet created the form with 2 column forms but if I’m able to split the CSS I may be able to work it out.

Thanks again

[basanta]

Hi There,

Thanks for asking again!

.wpcf7 is the common class name for all contact form. Every contact form having its own unique ID. You can take the ID as the parent CSS selector and add CSS to the child element.

learn about CSS selector.
https://www.w3schools.com/cssref/css_selectors.asp

also learn about Chrome Dev tool how to check the ID or class of the HTML element in a page.

Hope this helps you to get different style for different contact form.

Thanks

[SecureSpot]

Thanks will see how I get on later

[SecureSpot]

The link unfortunately just caused confusion for me! Thanks anyway!
so if .wpcf7 is the common class name for all contact forms, how do I add the CSS for the id. The id on the homepage form is “8185”

Would you be able to provide the exact CSS code for me?

[basanta]

Hi There,

Thanks again for asking!
when you create any form it has its own ID.

similar to the class name, you can check this via chrome dev tools.
when you get the ID you can write the CSS selector by taking the ID as a container element for your form.

Example

#wpcf7-f302-p145-o1  input[type=text] {
border: 0px;
}

this will affect all input type text of the form whch has the #wpcf7-f302-p145-o1.
Similarly, you can insert HTML code with the class name inside the form and add CSS for that class name.

Hope this is clear now!