Navigation

This content is old and no longer supported. You may use at your own risk, but no official support will be provided for anything listed here. If you are a Themeco customer, we invite you to check out our new community and forums, Apex.

Tagged: 

  • Author
    Posts
  • #1422553

    PanInternational
    Participant

    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

    #1422554

    PanInternational
    Participant
    This reply has been marked as private.
    #1422817

    Thai
    Moderator

    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 🙂

    #1423782

    PanInternational
    Participant

    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

    #1424066

    Thai
    Moderator

    Hi There,

    Would you mind providing us with your admin account?

    Thanks.

    #1424710

    PanInternational
    Participant
    This reply has been marked as private.
    #1424937

    Rue Nel
    Moderator

    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.

    #1424976

    PanInternational
    Participant

    Hi,

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

    Thank you

    #1424993

    Paul R
    Moderator

    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

    #1425737

    PanInternational
    Participant

    Hi,

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

    Thank you

    #1425981

    Paul R
    Moderator

    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

    #1427654

    PanInternational
    Participant

    That’s perfect.

    Thank you

    #1427820

    Christopher
    Moderator

    You are welcome.

Join Apex

This content is old and no longer supported. We invite you to check out our new community and forums, Apex.

Join Apex