Styling specific Contact Form – I've tried it all!

  • I’m at a loss. None of my styles are detected and I need help!

    the website is ocelotmedia.com. All the sidebar contact forms need to be styled differently than the contact forms in the body text area (on home page and contact page).

    Example of page with sidebar: https://ocelotmedia.com/services/consulting/

    I’ve tried creating custom styles and assigning the class into the shortcode.
    <div>[contact-form-7 id=”415″ html_class=”sidebar-contact” title=”Sidebar Contact Form”]</div>

    I’ve tried targeting the contact form with the specific wpcf7 id
    #wpcf7-f415-p52-o1 .wpcf7 input[type=”text”],
    #wpcf7-f415-p52-o1 .wpcf7 input[type=”email”],
    #wpcf7-f415-p52-o1 .wpcf7 input[type=”tel”] {
    width: 100%;
    height: 30px;
    }

    #wpcf7-f415-p52-o1 .wpcf7 textarea {
    width: 100%;
    }

    #wpcf7-f415-p52-o1 .wpcf7-submit {
    margin-right: 5px;
    margin-left: 5px;
    }

    #wpcf7-f415-p52-o1 .wpcf7-form {
    border: transparent;
    }

    I’ve tried inserting class=”sidebar-contact” into a <div> in the actual contact form.

    Please help! I feel like I’ve tried every combination I can think of.

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements. To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.

    Also, it appears that the media query of your CSS code affected much of the appearance of your form right now. You might want to modify this media query @media (min-width: 981px)

    Hope that help.

    Thanks

    Thread Starter rleegarrison

    (@rleegarrison)

    I’m using Divi, and yes I’m editing the CSS style sheets in my child theme. I’ve read that link you provided but it doesn’t answer this specific question. I have styled many Contact Form 7 forms so I don’t understand what’s happening in this specific instance.

    My media query was min-width: 991 I believe, but I changed it to 981px. Still not changes.

    PatriciaM

    (@patriciafitness)

    @rleegarrison: It’s been 9+ months since you posted, so hopefully you already found your solution. ??

    For anybody else going through similar trials-and-errors when it comes to styling an *individual* contact form, I found this solution worked for me (using GeneratePress theme):

    STEP ONE: In the page editor, add an html class to Contact Form 7 shortcode:

    [contact-form-7 id=”123″ html_class=”maincontact” title=”Contact Us”]

    STEP TWO: Add the following to the “Additional CSS” section:

    To style the form fields:

    .wpcf7 .maincontact {
    color: #00f;
    width: 50%;
    }

    To style the submit button:

    .wpcf7 .maincontact .wpcf7-submit {
    color: #00f;
    background-color: #ededed;
    width: 100%;
    }

    Happy WordPress-ing!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling specific Contact Form – I've tried it all!’ is closed to new replies.