Docs

[PanInternational]

Hi,

I am using Gravity Forms for a simple Subscription form (1 field and 1 button)
By default, the submit button is under the last field on the left area.

I have search everywhere, but my CSS changes for some reason are not working.

I would like to have the button in line with the field, on the right part.
Also, would like to change the colour of the text and border to white.

Thank you

[PanInternational]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

#gform_13 .gform_body {
    width: calc( 100% - 110px );
    float: left;
}

#gform_13 input#gform_submit_button_13 {
    margin: 0;
    border-color: #fff;
    color: #fff;
}

#gform_13 .gform_footer.top_label {
    float: right;
    width: 96px;
    margin: 0;
    clear: none;
}

#gform_13 li#field_13_1 {
    padding: 0;
    margin: 0 !important;
}

form#gform_13 {
    margin-top: 36px;
}

Hope it helps 🙂

[PanInternational]

Hi,

Actually didn’t change nothing. I tried to apply this changes in CSS panel of that page, not on general customiser.
Maybe it didn’t work because I have already CSS on the general customiser for GF for different stuff.

I am using GF in different pages with different settings, so this one was an exception.

Can you help?

Thank you

[Thai]

Hi There,

Would you mind providing us with your admin account?

Thanks.

[PanInternational]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for sending the information. I have logged and checked your site. Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. Please let us know how it goes.

[PanInternational]

Hi,

I deactivated W3 Total Cache and deleted my browser cache but nothing changed.
Any solution?

Thank you

[Paul R]

Hi,

I went ahead and change the code to this.

#x-section-8 .gform_button.button {
   border-color:#fff;
   color:#fff;
}

#x-section-8 .gform_body,
#x-section-8 .gform_footer {
   float:left;
   width:auto;
   clear:none;
}
#x-section-8 .gform_body label {
   display:none;
}

#x-section-8 .gform_body input {
  min-height:46px;
}

Thanks

[PanInternational]

Hi,

Great! 🙂
It’s almost prefect.
Is it possible to make the field bigger (using all right column width)?

Thank you

[Paul R]

Hi,

To make the width bigger, please add the code below.

#x-section-8 .gform_body {
   width:80%;
}
#x-section-8 .gform_footer {
   width:20%;
}

You may change the value to adjust.

Thanks

[PanInternational]

That’s perfect.

Thank you

[Christopher]

You are welcome.

[Author]

Posts