Styling the Form

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. http://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.

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.