Docs

[OCcreates]

Hello again,

Thanks for the awesome support. I tried some similar topics in the forum, but couldn’t find an answer. I have some custom CSS for 2 different Contact Form 7 forms, and they play nicely together on the home page, but the custom CSS doesn’t stick on the rest of the pages.

It’s the form I have set into the footer. It appears just fine on the home page, but does not pull the custom CSS on the rest of the pages.

Any ideas? (Site info in next post.)

Thanks!

[OCcreates]

This reply has been marked as private.

[OCcreates]

I just noticed that the footer form appears as it should on the Contact page as well. Both the Contact page and the home page have both forms on them, looking as they should. On the other pages that only have the footer form, that form does not appear as it should with the custom css.

Thanks!

[Rupok]

Hi there,

Thanks for writing in! It seems you are using the ID as selector which is different for the forms in different pages :

#wpcf7-f214-o2 input[type="text"] {
  width:200px;
}

You can update this code to following :

#wpcf7-f214-o1 input[type="text"], #wpcf7-f214-o2 input[type="text"]{
  width:200px;
}

But it would be better approach if you add your custom class to the form and use this as selector.

Cheers!

[OCcreates]

That worked, thank you! It took me a while to figure out how to use CF7, and this was the only way I could figure out to customize the style. How would I do as you suggest, add the custom class to the form?

[Jade]

Hi there,

Please see the image on how to add a class to a contact form field.

Then you can reference the textfield using the class this way:

input.my-class {
    width:200px;
}

Hope this helps.

[OCcreates]

Ohhhhhh, wow can’t believe I missed that.

Thanks again!

[Joao]

You are welcome.

Let us know if we can help with anything else.

Joao

[Author]

Posts