I am using GF but want to style the form. If I use GFs basic styling with the setting to output CSS turned on, there appears to be a theme conflict as the styling is messed up. Is there an easy way to resolve this? Although I understand the basics of CSS and am happy to learn more, as things stand I am unsure how I would go about styling the form outside of GFs in-built options… Also I want to ensure that whatever changes I make, I am not affecting the responsiveness of the site…

Thanks
Matt

You can connect through FTP account and rename ‘gravity_forms’ folder to ‘gravity_forms_old’ under wp-content/themes/x/framework/css/site.

Hope it helps.

Not sure if gravity forms themselvse are responsive, but X has included responsive rules. You can easily try to rename folder and check the result.

Thanks.

I’ve tried renaming the folder but this has not worked. I’ve tried turning on and off each setting in the GF settings too and whenever CSS Output is turned on, the styling is still messed up…

By renaming folder you should not see X’s style on your form.
Can you provide us with some screen shots of how it should look so we may be able to help you with it.

Thanks.

You’ll see at the top that there is a form. I have applied the CSS class gf_simple_horizontal to the form, which should display the field and button horizontally as per https://www.gravityhelp.com/documentation/article/css-ready-classes/

It is not doing that and having the CSS class entered makes no difference to the appearance of the form. What I do know is that whilst renaming the folder did make a difference to how the form was displayed, the only thing that sets the form how it should be displayed by default is by turning CSS Output off in the GF settings, hence leading me to believe that this is a theme conflict rather than an issue with the plugin…

You can try adding this under Custom > CSS in the Customizer.

.home #x-section-1 .gform_wrapper form {
      text-align:center;
}

.home #x-section-1 .gform_body {
       display:inline-block;
       vertical-align:middle;
       max-width: 405px;
       width:405px;
}

.home #x-section-1  .gform_wrapper input {
      width:100% !important;
}

.home #x-section-1 .gform_footer {
        display:inline-block;
        vertical-align:middle;
	max-width:219px;
	padding:0;
	margin:0;
        width:219px;
}

Hope that helps.

Whilst I appreciate what you’ve done, that only helps solve the immediate issue of that particular form in that particular place. Isn’t there a more permanent fix?

Support for GF must pretty high up surely, with the amount of people that use it?

Don’t get me wrong, your support is awesome and I seriously love you guys, I’m just thinking that this is surely something that must come up time and time again…?