user3169905 user3169905 - 1 month ago 12
CSS Question

Styling WordPress Contact Form 7 differently depending on page

I have implemented a Contact Form 7 plugin form on a website as a Bootstrap modal. When you click a "Request a Quote" button at various places on the site, the Bootstrap modal pops up and is styled a certain way from the global stylesheet.

However, the customer wants that same form to be inserted in a Contact Us page, not popped out as a Bootstrap modal, and with different styling for the form field tags and other elements.

I'm not understanding CSS specificity and inheritance enough to be able to create a differently-styled instance of the same form when it's inserted using the CF7 shortcode on the Contact Us page vs. when it's inserted using the CF7 shortcode in the Bootstrap code in the global footer.

I had thought that just inserting tags with more localized styling just ahead of the shortcode in the Contact Us page that it would style just that form that way. But when I push the global Request a Quote button, the Bootstrap modal also takes on that styling.

Can someone please educate me, or point me to a resource that would help me figure out how to do this instance of styling while keeping the Bootstrap modal styled in its own way?

Here's the Contact Us page with the rendered CF7 form shortcode, but minus the styling I want so you can see it in the "before" mode. Here's the code I was inserting in the page in the WP backend to try to affect just the styling of this page's form:

<style>
.wpcf7-form label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 100;
font-size:.8em;
}
</style>
[contact-form-7 id="1455" title="Request a Quote Form"]


If you view source you'll see the modal content in the footer. I'm thinking an answer can be determined using Chrome Inspector, but if not let me know.

Thanks.

Answer

I would just add a class (on-page) to the contact form instance on the Contact Us page and then use .on-page in all CSS definitions that are specific to this instance:

<style>
.wpcf7-form.on-page label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 100;
    font-size:.8em;
}
</style>
[contact-form-7 id="1455" html_class="on-page" title="Request a Quote Form"]