Form Layout problem.. need help

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 for a general explanation of styling CF7 forms using CSS.

There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Thanks for your reply. It worked fine before I tried using the Contact Form 7 Styler… after that the checkboxes and the main message body widths were shortened. I didn’t know where to look for he affected file to fix it but I did apply css styling to override what ever was done… Would still like to know what exactly broke…

I don’t understand what you are referring to with Contact Form 7 Styler – please supply link.

It is a plugin you can use with Contact Form 7 to add a ‘skin’ to your form. https://www.ads-software.com/plugins/contact-form-7-style/

My forms layout appearance was fine until I tried to use the ‘custom’ option to design my own form.

Here is a screen shot of how my form looked after I used the plugin Screen Shot of problem

I was able to apply add a fix by adding a snippet to my style sheet but I am still wanting to figure out what went wrong… (drives me batty when I can’t find my error )Thanks for responding!

That plugin changes the CSS used on your CF7 form using Javascript. You will need to over-ride any changes it makes, that you don’t want, using further more specific CSS, as you have. Alternatively don’t use the plugin and just style the form as you want using suitable CSS.

That’s what I figured…. might you know about where to look so I can fix it?

It will be relatively difficult to find and then either stop or reverse some of the changes made to CSS via Javascript in the CF7 style plugin.

??You would need to understand the Javascript used and then write another plugin that hooks into the CF7 style plugin, if you don’t want any changes over-written when you update the CF7 style plugin.

??Easiest way is to just over-ride any changes it makes that you don’t want, using further more specific CSS.

??Alternatively don’t use the plugin and just style the form as you want using suitable CSS – that’s how I would do it.

Yeah figured as much…. I am pretty good with the code but I don’t think it is worth my time *giggles* would be easier to start over…. I did apply some custom css and now it is ‘purdy’ *wink* thanks for you help and discussion!

Make it a great day!
Maddie