Hi! I hace 2 contact forms 7 in my website and I am trying to style the one in the screenshot but I can’t seem to find the correct css for it. I tried following a tutorial from: https://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/ but what the tutorial makes me do is not working for me. I’m sure I’m doing something wrong, please help?
I also want to make the button be next to the text area. Is there any css that can help me achieve this?
Thank you in advance.
Hello Delfina,
Thanks for writing in! When customizing the contact forms in Pro Editor or Cornerstone, please check out our Youtube tutorials here:
Hope this helps.
That helped me. thanks!
You are most welcome!
Hi @ruenel!
I’m having an issue being able to style different contact form 7, that are on the same page, differently. I tried css and following different tutorials but I can’t seem to make it work. Please help!
Thank you
Hey Delfina,
When customizing two different contact forms on one page, it is best that you insert a custom ID to your sections first. You can then use the section ID to reference the contact form that you have on the page. Take the illustration below as an example:
1.) In your section settings, find the “Customize” tab and insert an element ID e.g. section-1
2.) You will have to do the same for the other section that has a contact form.
3.) And then you can utilize the ID in your custom CSS. For example;
#section-1 .wpcf7 input.element-class {
// your styling here
}
#section-2 .wpcf7 input.element-class {
// your styling here
}
Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.
Hope this helps.
Oh!! okay, thats what I was missing. Thank you so much for the example!
Hi Delfina,
It’s our pleasure to help you.
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.