PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Need to move Submit button to be in line with a field

  1. Nicolap
    Member

    I have searched through the forums here and tried various suggested methods, but nothing works for me.

    I am trying to move the Post (ie Submit) button on this form to be in line with the Attach Image field, on the right. I'm using Headway theme.

    http://www.damsels.org/testing/

    What CSS would I need for that? Thanks.

    Posted 7 years ago on Wednesday September 12, 2012 | Permalink
  2. Do I need to login to see the form or is it on another page?

    Posted 7 years ago on Wednesday September 12, 2012 | Permalink
  3. Nicolap
    Member

    Oops, sorry yes it's a login-only form! I will just change that. Try again now.

    Posted 7 years ago on Wednesday September 12, 2012 | Permalink
  4. No problem. This should do the trick for you (place into your theme's stylesheet):

    [css]
    #gform_widget-5 .gform_footer.top_label {
    float: right;
    margin: -85px 335px 0 0;
    }
    Posted 7 years ago on Wednesday September 12, 2012 | Permalink
  5. I'm trying to do the same thing on the home page of http://alabamacoolingandheating.com/ under the heading of "Quick Contact Form"

    I want to move the submit button, in-line, to the right of the phone number. I'm having difficulty targeting the button.

    Posted 6 years ago on Monday May 13, 2013 | Permalink
  6. Richard Vav
    Administrator

    @bamajr try adding the following towards the bottom of your theme's custom.css file

    #gform_wrapper_4 .gform_footer.top_label {
    float: right;
    margin: -55px 140px 0 0;
    }

    It should result in your form looking like this but you can play around with the margins to re-position it.

    Regards,
    Richard

    Posted 6 years ago on Tuesday May 14, 2013 | Permalink
  7. @Richard,

    Thank you... I must have missed the

    '#gform_wrapper_4'

    ID, because I've tried targeting just about everything else. This does work. Now I just have to work on resizing the button, so that it is similar in size, to the "Submit Post" button, on this support forum.

    Quick off-top question: What did you use, to display the code, to the right of the website, in the screenshot, you provided, above (I.E. what browser and add-ons)?

    Posted 6 years ago on Tuesday May 14, 2013 | Permalink
  8. Richard Vav
    Administrator

    I was using Google Chrome and the panel on the right is the developer tools (inspector) which on Windows can be accessed by pressing F12 or Ctrl+Shift+i or by right clicking an element on the page and selecting 'inspect element'. IE, Firefox, Opera and Safari all have their own version.

    As for the submit button you would target it like so

    #gform_wrapper_4 .gform_footer input.button {
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    Posted 6 years ago on Tuesday May 14, 2013 | Permalink
  9. Again Richard,

    Thanks....

    I don't know what the deal is, but I cannot get the developer tools, to open, using the shortcuts. I use them all the time, but didn't know they could be repositioned to the right, as you did it. They didn't look the same as I'm used to seeing them below, instead of on the right. I have been able to move them, now, but still can't access them via keyboard shortcuts... Oh well!

    I have the form and submit button, working and looking, the way my client wants it, now. I have one more question, about this form, but it is definitely something I need to post separately (using this form to populate another form). Any direction you can give, would be appreciated, though.

    Posted 6 years ago on Tuesday May 14, 2013 | Permalink
  10. I am trying to move the "Submit" button next to the email form field. Can you provide the css to accomplish this please. I am using an IThemes Builder template and the site is located at http://kathyfirak.kathyjf.com/MiracleB/ The form I am referring to is located in the top right corner. I need to do this for just this form because I will be adding other forms to this same website.
    Thanks,
    Kathy

    Posted 6 years ago on Tuesday June 4, 2013 | Permalink
  11. Richard Vav
    Administrator

    Hi Kathy,

    Try using the following CSS, your widget was too narrow for the field and button to be placed side by side so the first part of the CSS below increases it's width. I have only guessed the figures, you can play around with them until you get it looking how you want it.

    #gform_widget-3 {
    width: 50%;
    }
    #gform_widget-3 .gform_footer.right_label {
    float: right;
    margin: -52px 0 0 0;
    }

    Regards,
    Richard

    Posted 6 years ago on Tuesday June 4, 2013 | Permalink
  12. I'm trying to do the same thing: submit button on an email sign-up. Need it to float right so that widget bar isn't so tall. http://www.empoweredfrench.com

    Thanks so much!
    Madeleine

    Posted 6 years ago on Tuesday July 2, 2013 | Permalink
  13. Richard Vav
    Administrator

    Hi Madeline,

    Try adding the following CSS to your theme's stylesheet or wherever you add custom CSS

    #gform_widget-2 .gform_footer.top_label {
        float: right;
        margin: -67px -100px 0 0;
    }

    Regards,
    Richard

    Posted 6 years ago on Wednesday July 3, 2013 | Permalink
  14. Thanks Richard! I knew it was probably just a question of the margins I had to figure out, but since I'm an amateur coder & doing my own site (which is why I use Wordpress, iThemes, & Gravity Forms!), it would have taken me a week and loads of frustration to figure them out.

    Madeleine

    Posted 6 years ago on Wednesday July 3, 2013 | Permalink
  15. Richard Vav
    Administrator

    Madeleine, you're welcome.

    Posted 6 years ago on Wednesday July 3, 2013 | Permalink

This topic has been resolved and has been closed to new replies.