[MattModerator]

Hi Guys

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

[MattModerator]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

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.

[MattModerator]

Thanks, will that have any effect on the responsive nature of the form within X?

[ChristopherModerator]

Hi there,

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.

[MattModerator]

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…

[ChristopherModerator]

Hi there,

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.

[MattModerator]

This is the site that it is on, with CSS Output set to on:
http://staging1.lawclaim.net

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…

[Paul RModerator]

Hi Matt,

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.

[MattModerator]

Thanks and sorry for the delay in responding.

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…?

[ZeshanMember]

Hi Matt,

You may use following CSS code:

.gform_wrapper form {
    text-align:center;
}

.gform_wrapper .gform_body,
.gform_wrapper .gform_footer.left_label, 
.gform_wrapper .gform_footer.right_label {
    display:inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0;
    padding: 0;
    width: calc(50% - 3px);
}

.gform_wrapper input {
    width: 100% !important;
    margin: 0;
}

body .gform_wrapper label.gfield_label+div.ginput_container,
.gform_wrapper form ul.left_label li {
    margin: 0;
}

However, it will be applied to all GF forms.

Thanks!

[MattModerator]

Thanks again.

I know I’m being a pain here but I guess what I was hoping for was a more ‘out of the box’ solution/integration. Ok so I can tweak the CSS and stick it in the customiser but thinking bigger picture, if I do lots of forms on a site, that’s a lot of messing around with CSS (which I only have basic knowledge of, but you’ll be pleased to know I’m learning!) and then I might have to look at using child themes etc so as to avoid future issues.

It seems that GF themselves have some ready classes that can be implemented from within the plugin, but this relies on the theme not causing any conflicts, which it appears X is. So it would seem right now that the only option is to keep manually doing this within the confines of the customiser.

But there must be an easier way! Is this something that is likely to be worked on? Ie. either a tighter integration without the conflict which allows the native GF options to be utilised, or better still more direct access to styling from within a Cornerstone element?

Matt

[John EzraMember]

Hi there,

Thanks for updating the thread! I will add this as a feature request to be considered for future development. I can’t promise implementation or a timeline, but we’ll be sure to announce it if it does get added in later. Thanks for the suggestion!

[Author]

Posts