https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field Gravity Support Forums Topic: Need to move Submit button to be in line with a field en-US Sun, 19 Apr 2026 18:40:15 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-360177 Wed, 03 Jul 2013 14:35:19 +0000 Richard Vav 360177@https://legacy.forums.gravityhelp.com/ <p>Madeleine, you're welcome. </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-360120 Wed, 03 Jul 2013 14:07:19 +0000 madoLATF 360120@https://legacy.forums.gravityhelp.com/ <p>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 &amp; doing my own site (which is why I use Wordpress, iThemes, &amp; Gravity Forms!), it would have taken me a week and loads of frustration to figure them out.</p> <p>Madeleine </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-359376 Wed, 03 Jul 2013 06:12:30 +0000 Richard Vav 359376@https://legacy.forums.gravityhelp.com/ <p>Hi Madeline,</p> <p>Try adding the following CSS to your theme's stylesheet or wherever you add custom CSS<br /> <pre><code>#gform_widget-2 .gform_footer.top_label { float: right; margin: -67px -100px 0 0; }</code></pre> <p>Regards,<br /> Richard </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-358352 Tue, 02 Jul 2013 17:45:45 +0000 madoLATF 358352@https://legacy.forums.gravityhelp.com/ <p>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. <a href="http://www.empoweredfrench.com" rel="nofollow">http://www.empoweredfrench.com</a></p> <p>Thanks so much!<br /> Madeleine </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-300334 Tue, 04 Jun 2013 03:09:36 +0000 Richard Vav 300334@https://legacy.forums.gravityhelp.com/ <p>Hi Kathy,</p> <p>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.<br /> <pre><code>#gform_widget-3 { width: 50%; } #gform_widget-3 .gform_footer.right_label { float: right; margin: -52px 0 0 0; }</code></pre> <p>Regards,<br /> Richard </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-299683 Mon, 03 Jun 2013 20:37:27 +0000 kathyjf 299683@https://legacy.forums.gravityhelp.com/ <p>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 <a href="http://kathyfirak.kathyjf.com/MiracleB/" rel="nofollow">http://kathyfirak.kathyjf.com/MiracleB/</a> 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.<br /> Thanks,<br /> Kathy </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-252868 Tue, 14 May 2013 12:35:55 +0000 bamajr 252868@https://legacy.forums.gravityhelp.com/ <p>Again Richard,</p> <p>Thanks....</p> <p>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!</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-252554 Tue, 14 May 2013 08:39:54 +0000 Richard Vav 252554@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>As for the submit button you would target it like so<br /> <pre><code>#gform_wrapper_4 .gform_footer input.button { padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }</code></pre> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-252530 Tue, 14 May 2013 08:06:24 +0000 bamajr 252530@https://legacy.forums.gravityhelp.com/ <p>@Richard,</p> <p>Thank you... I must have missed the </p> <p>'#gform_wrapper_4'</p> <p>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.</p> <p>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)? </p> https://legacy.forums.gravityhelp.com/topic/need-to-move-submit-button-to-be-in-line-with-a-field#post-252235 Tue, 14 May 2013 04:44:24 +0000 Richard Vav 252235@https://legacy.forums.gravityhelp.com/ <p>@bamajr try adding the following towards the bottom of your theme's custom.css file<br /> <pre><code>#gform_wrapper_4 .gform_footer.top_label { float: right; margin: -55px 140px 0 0; }</code></pre> <p>It should result in your form looking like <a href="http://i.imgur.com/oy9aQHv.png" rel="nofollow">this</a> but you can play around with the margins to re-position it.</p> <p>Regards,<br /> Richard </p>