# Form customizations - adjusting submit button position

**URL:** <https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116>\
**Category:** CMS Development\
**Created:** [December 12, 2017, 8:40pm UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116 "2017-12-12T20:40:46Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chandler](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chandler/32/31639_2.png) [@Chandler](https://community.hubspot.com/u/Chandler)\
**Post date:** [December 12, 2017, 8:40pm UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/1 "2017-12-12T20:40:46Z")

</div>

Hi – Wondering if anyone has had any luck positioning the submit button in a form inline with the rest of the colums. Inside of the form builder, you have the option to position fields to the side of each other, but not the submit button.  
I’m assuming this can be done using css, targeting:  
body .hs-button.primary,  
body input[type=“submit”],  
body input[type=“button”] {}

display: inline-block; doesn’t seem to do the trick.

Any input?

Thanks!

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [December 13, 2017, 6:32am UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/2 "2017-12-13T06:32:51Z")

</div>

Hi @Chandler,

Follow our video tutorial and add below CSS to your stylesheet.

```auto
form > div {
 width:48%;
 margin-right:4%;
 display:inline-block;
 vertical-align:top;
 margin-bottom:20px;
}

form > div:nth-of-type(2n) {
 margin-right:0;
}

form > div.hs_submit {
 vertical-align:bottom;
}

```

and here is a video tutorial link,

[Video link](https://drive.google.com/file/d/1bjMimyVjE40wqGUCUGCxfS8O3r8pcu6X/view?usp=sharing)

Did my post help answer your query? Help the Community by **marking it as a solution.**

**Team TRooInbound**

---

<div class="post-metadata">

**Author:** ![Chandler](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chandler/32/31639_2.png) [@Chandler](https://community.hubspot.com/u/Chandler)\
**Post date:** [December 13, 2017, 2:12pm UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/3 "2017-12-13T14:12:04Z")

</div>

Thanks for the thoughtful response. I’m afraid I am building the whole site with pure HTML / CSS / JS

When I implemented your CSS it moved the submit button to the right, but it is still not inline with the other form fields. Let me see if I can provide you with some useful assets…

 ![Screen Shot 2017-12-13 at 9.08.26 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/9/956925ea7e6544b5f8276fafb3e0f36613263c8e.png)

Above is what I am trying to achieve, below is where I am at.

 ![Screen Shot 2017-12-13 at 9.09.33 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/3/33decb63e66d12aaf0f2b9fc817a0b40871528bf.png)

Form section HTML:

\<!-- ==============================================  
Inbox CTA  
=============================================== --\>  
\<section class=“blue-bg light-typo”\>  
\<div class=“container”\>  
\<div class=“row padding-top-md padding-bottom-sm”\>  
\<div class=“col-md-4”\>  
\<h2\>Get us in your inbox\</h2\>  
\</div\>  
\<div class=“col-md-6”\>  
\<!-- [if lte IE 8] --\>  
\<script charset=“utf-8” type=“text/javascript” src=“[//js.hsforms.net/forms/v2-legacy.js](https://js.hsforms.net/forms/v2-legacy.js)”\>\</script\>  
\<![endif]--\>  
\<script charset=“utf-8” type=“text/javascript” src=“[//js.hsforms.net/forms/v2.js](https://js.hsforms.net/forms/v2.js)”\>\</script\>  
\<script\>  
hbspt.forms.create({  
portalId: ‘697792’,  
formId: ‘026cd40c-7df8-4b9e-86d7-4df3029cb5d6’,  
css: ‘’  
});  
\</script\>  
\</div\>

\</div\>  
\</div\>

\</section\>

CSS:

/\* Submit buttons (selectors for all non-CTA buttons)  
========================================================================== \*/

body .hs-button.primary,  
body input[type=“submit”],  
body input[type=“button”] {  
display:inline-block; margin:0;  
color:white;  
border:none;  
float:right;  
}

body .hs-button.primary:hover,  
body input[type=“submit”]:hover,  
body input[type=“button”]:hover {  
display:inline-block; margin:0;  
color:white;  
border:none;  
}

body .hs-button.primary:focus,  
body input[type=“submit”]:focus,  
body input[type=“button”]:focus {border:none;}

form \> div {  
width:100%;  
margin-right:4%;  
display:inline-block;  
vertical-align:top;  
margin-bottom:20px;  
}

form \> div:nth-of-type(2n) {  
margin-right:0;  
}

form \> div.hs\_submit {  
vertical-align:bottom;  
}

Sorry for lengthy post,

Cheers!

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [December 15, 2017, 6:31am UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/4 "2017-12-15T06:31:02Z")

</div>

Hi @Chandler,

remove above only my CSS and add my new CSS,

```auto
fieldset {
 max-width:100% !important;
 width:66.666%;
 display:inline-block;
 vertical-align:bottom;
}

input { 
 width:100%;
}

.hs_submit {
 width:33.33%;
 display:inline-block;
}

```

Did my post help answer your query? Help the Community by **marking it as a solution.**

**Team TRooInbound**

---

<div class="post-metadata">

**Author:** ![CHK613](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chk613/32/99678_2.png) [@CHK613](https://community.hubspot.com/u/CHK613)\
**Post date:** [August 12, 2018, 6:58am UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/5 "2018-08-12T06:58:11Z")

</div>

Hi! I am still having issue with this! We want the sign up form of our newsletter to look like the landing page of Finimize -including the inline submit button.

 ![subscriber form.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/4/146cd5d2c00d262ad8e36a26bd75a79441fea827.png)  
Inspired by FinimiseI’ve tried pretty much every css and html header trick but I keep running into difficulties.

1) With the new GDPR, Hubspot places the privacy text between the field and the submit button. So coding tricks to wrap next line around field don’t work as it just wraps the privacy text around it to.

Our clients are not EU so we really don’t need GDPR text but we need to put if we want to subscribe people.

2) It work only in desktop; one method we tried (without GDPR) worked only in desktop by making email field very small. However for mobiile the text on the button went vertical.

If some could help us with this - we’d greatly apperciate it!

Thanks

---

<div class="post-metadata">

**Author:** ![warnerjm](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/warnerjm/32/100107_2.png) [@warnerjm](https://community.hubspot.com/u/warnerjm)\
**Post date:** [February 4, 2019, 4:17pm UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/6 "2019-02-04T16:17:08Z")

</div>

@TRooInbound

So, I have applied this to my stylesheet but now I’m getting a space between the email field and the submit button.

 ![Screen Shot 2019-02-04 at 11.15.43 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/8/386ed44c2e6a06d0916cb90b269fb6a9c8606e8d.png)

---

<div class="post-metadata">

**Author:** ![DevonC](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/devonc/32/99730_2.png) [@DevonC](https://community.hubspot.com/u/DevonC)\
**Post date:** [July 6, 2019, 9:12pm UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/7 "2019-07-06T21:12:11Z")

</div>

Anybody solve this? This is marked as “solved” but doesn’t seem to be…

---

<div class="post-metadata">

**Author:** ![paulopes](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/paulopes/32/27474_2.png) [@paulopes](https://community.hubspot.com/u/paulopes)\
**Post date:** [June 29, 2020, 10:30am UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/8 "2020-06-29T10:30:21Z")

</div>

Actually, I’d like to do the same but just with the normal form (adding it to Wordpress)  
Apparently, HubSpot now has the possibility to change the width in style but is for the whole form and not the button and other fields only.  
Would be really valuable to have that feature for cases where there is only one field as a newsletter.

Someone know this or has similar problem?

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [June 29, 2020, 1:28pm UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/9 "2020-06-29T13:28:54Z")

</div>

Hi @paulopes - can you please share your page link here? I will check and let you know

---

<div class="post-metadata">

**Author:** ![VMarketer](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@VMarketer](https://community.hubspot.com/u/VMarketer)\
**Post date:** [October 28, 2024, 12:39am UTC](https://community.hubspot.com/t/form-customizations-adjusting-submit-button-position/4116/10 "2024-10-28T00:39:46Z")

</div>

I would like to be able to do this also. Our current site, using Constant Contact forms, allows for this (see image).

 ![VMarketer_0-1730075972113.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/0/1097dac3b66375f48a34710cfbf71e15d324fd3d.png)