WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Issue With Custom CSS And New Version Of CF7 (5 posts)

  1. jasonpel
    Member
    Posted 1 year ago #

    Hi,

    Great plugin! I have a question please. In your previous versions of CF7 I was able to set custom CSS for a form that was displayed site-wide in a sidebar widget. But now the CSS is no longer working and I have noticed that the form is using what appears to be the page name "p72" in the div id wpcf7-f107-p72-o1. The previous versions I was able to add custom CSS to the id #wpcf7-f107-w1-o1 that modified the form on all of the pages. I am trying to style the form in the sidebar ONLY with the following code:

    #wpcf7-f107-w1-o1 {
    background: #f9f9f9;
    padding: 13px 0 5px 0 !important;
    border: 0px;
    }

    At this website: http://www.abcdentalcare.com/general-dental-services/root-canal-therapy-las-vegas/

    I would appreciate your suggestions with this!

    Thank you,
    Jason

    https://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 1 year ago #

    The CF7 form in the widget has a different CF7 form id - in this case wpcf7-f107-p72-o1.

    You can get this id using Firebug or Chrome Dev Tools - see Styling a Specific Contact Form 7 Form

    Following CSS should work:

    #wpcf7-f107-p72-o1 {
    background: #f9f9f9;
    padding: 13px 0 5px 0 !important;
    border: 0px;
    }

    RE: The previous versions I was able to add custom CSS to the id #wpcf7-f107-w1-o1 that modified the form on all of the pages.

    Different CF7 forms on the same page have always had different ids - wpcf7-f107-w1-o1, wpcf7-f107-w1-o2 etc.

    Note that the CF7 form id will normally change when you make any changes to the forms location.

  3. jasonpel
    Member
    Posted 1 year ago #

    Thanks for your input. I have tried using the code you posted above. The problem is that with the newer version of CF7, every page now has a different id (p72 for example used for the form on this particular page) that wasn't present in previous versions. I used Firebug to give me the exact div id you posted above, but that doesn't fix the CSS on ALL of the pages that contain this sidebar form, just that particular page.

    I have a demo/work site setup with the previous version and it works just fine with a previous version of CF7: http://abcdentalcare.lasvegaswebsites.com/general-dental-services/root-canal-therapy-las-vegas/

    This version used "wpcf7-f107-w1-o1" instead of "wpcf7-f107-p72-o1" in the code.

    Hope this helps!

  4. buzztone
    Member
    Posted 1 year ago #

    In latest update to CF7 you can now add an id and class to a form by adding the html_id and html_class attributes into a [contact-form-7] shortcode.

    Example: [contact-form-7 id="1234" title="Contact form 1" html_id="contact-form-1234" html_class="form contact-form"]

    See http://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

    You could add class "cf7-widget" to the relevant form as follows:

    [contact-form-7 id="1234" title="Contact form 1" html_class="cf7-widget"]

    and target your CSS to that class as follows:

    .cf7-widget {
    background: #f9f9f9;
    padding: 13px 0 5px 0 !important;
    border: 0px;
    }

    CSS should be applied to all forms with that class.

  5. jasonpel
    Member
    Posted 1 year ago #

    Hey buzztone, thanks for taking the time to research this and post it here! I created the html_class as you posted above for the sidebar form and it worked great. :) I also created a custom class for forms that appear in posts such as the contact form and the reviews form and everything is sorted now. Thanks again! :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic