• Resolved dmaqg

    (@dmaqg)


    Could someone please explain how to style the form? I don’t like what was automatically done “to match my theme” …it doesn’t make sense. Specifically I want the labels to at least have spaces before the fields, at best put the labels on top of the fields, but I don’t see those options anywhere in my theme or in the plugin itself.

    Here’s the site.
    https://communicationssquared.com/powerhouse-club/

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Hi @dmaqg

    We don’t provide a UI at all for styling, as that’s a topic better left to the individual sites, either through their active theme’s stylesheet, or perhaps the CSS section in the customizer. It would be custom CSS selectors regardless, assuming a theme doesn’t have Constant Contact Forms styled for specifically.

    From the looks of the link provided, you actually have two spots from this stylesheet that are affecting things as a whole. https://communicationssquared.com/wp-content/themes/rttheme19/css/layout1/app.min.css Essentially, some generic selectors in the this specific layout were managing to affect the appearance.

    Take a look here: https://cloudup.com/cv27wcm6V2X In the top half, the text-align: center is playing an effect. In the bottom half, the display: inline-block is doing the rest of the effect.

    I dynamically changed the styles around, as shown in https://cloudup.com/cM46MvL-jfu and that produced a form that looks like this: https://cloudup.com/ckw_P3WTcG6 which I think is probably closer to what you’re looking for, though may not be exactly still.

    There should be plenty of ID and class attributes on our output for specific styling purposes, but we do try to be minimal where possible for maximum inheritance, though that sometimes provides little or generic results at times.

    Thread Starter dmaqg

    (@dmaqg)

    Um, sorry that looks like a good answer, but I find it very confusing. What do you mean by there should be plenty of ID and class attributes on our output for specific styling purposes? Where did you get .ctct-form-wrapper, etc.? I can add custom css to my post, but don’t know what to use for the selectors.
    Thanks.

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    For the forms that we output to the screen, we provide HTML ID and class attributes with the markup. For example, on the outer-most div that we display, we have a class of ctct-form-wrapper.

    <div class="ctct-form-wrapper">
    ...
    </div>
    

    Screenshot from the developer tools view, for the form: https://cloudup.com/cBtmE8elpzM
    All of the classes or IDs that start with ctct- are from us, for the site owners to utilize as necessary. You’ll want to have familiarity with writing CSS to change things around though.

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Any lingering questions or concerns here?

    Plugin Author Constant Contact

    (@constantcontact)

    Feel free to reply if something new comes up, but closing in the meantime.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling the Form’ is closed to new replies.