Styling one wpcf7 form different from another form

  • Resolved Katharine

    (@valentk)


    3 years, 5 months ago

    Not the form fields, which you can style differently by putting a div into the form when you create it, but the form itself.

    “wpcf7” identifies all these forms in CSS. What distinguishes one form from another, and what is the syntax to use in the CSS?

    What I’m trying to do is specify a width difference in two different forms on a site I’m building. Form 1 should always be at 100% because it is in a sidebar. For 2 should be about 75% because it is on a page and on the landing page as well. (On the landing page, it looks even odder than it does on the link I entered above, to the page I need help with.)

    I’ll also need to use max-width or min-width (I think) to know when to apply the different CSS, so Form 2 can display at 100% on mobile.

    Thanks if you can help.

    • This topic was modified 3 years, 5 months ago by Katharine.

    The page I need help with: [log in to see the link]

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

  • you can style differently using different classes
    https://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

    o more simply, use the wrapper to define the scope of the css code

    .sidebar .wpcf7 {}
.content .wpcf7 {}
    Thread Starter Katharine

    (@valentk)

    Erik, thanks for your attempt to resolve this issue. However, neither of these work on the form; instead, they work on the form elements. You can see the problem on https://thispenforhire.website/get-started/. Using either of these solutions just affects the fields but does not affect the area of the form that the border and background surround. But again, thanks.

    sorry, I wasn’t clear, use this classes to identify the sidebar / content in your theme:

    .widget-area .wpcf7 { width: 100%; .......... }

.entry-content .wpcf7 { width: 75%; .......... }

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
}
    • This reply was modified 3 years, 5 months ago by Erik. Reason: typo
    • This reply was modified 3 years, 5 months ago by Erik. Reason: adds the style needed to get 100% width input in the content
    Thread Starter Katharine

    (@valentk)

    Worked! And on the landing page, it is:

    .lp-text-content .wpcf7 { width: 75%; }

    Again, thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling one wpcf7 form different from another form’ is closed to new replies.