# Form Submit Button styling

**URL:** <https://community.hubspot.com/t/form-submit-button-styling/10311>\
**Category:** CMS Development\
**Created:** [September 20, 2018, 5:50am UTC](https://community.hubspot.com/t/form-submit-button-styling/10311 "2018-09-20T05:50:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shaykoo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shaykoo/32/99730_2.png) [@Shaykoo](https://community.hubspot.com/u/Shaykoo)\
**Post date:** [September 20, 2018, 5:50am UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/1 "2018-09-20T05:50:26Z")

</div>

Hi, I am trying to put the submit button on the right hand side of the input feild. I have tried many css tricks but it’s not working. Worked on

body .hs-button.primary,

body input[type=‘Submit’],

body input[type=‘button’]{}

tried applying float: right; but it’s not working. Please let me know how to solve this.

Thanks In Advance

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [September 20, 2018, 8:58am UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/2 "2018-09-20T08:58:28Z")

</div>

@Shaykoo,

It really depends on whether you are working in Hubspot or outside, in WordPress for instance.

Either way, if you use your inspector tool you will see the stucture for the form provided by Hubspot. Assuming your working in Hubspot, you will see that the submit button can be target like so:

`form.hs-form div.hs_submit div.actions input[type="submit"]`

This may be the same with form embeds but I can’t say off of the top of my head that this is correct.

I like to give a group or module wrapper to my forms a specific class, like ‘form\_wrap’, then target the form fields beginning with that class. It is a good idea to be specific and deep with your targeting because, in my experience, Hubspot’s framework is specific, deep, and takes precedence in the document hierarchy.

I’ve been passing this around a bit lately and I recommend it: [https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol](https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol) You can play with targeting the form fields in real time.

Need help? [Hire Us Here](https://www.upwork.com/o/companies/_~0124e15ff34efb3871/)

---

<div class="post-metadata">

**Author:** ![Shaykoo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shaykoo/32/99730_2.png) [@Shaykoo](https://community.hubspot.com/u/Shaykoo)\
**Post date:** [September 20, 2018, 11:21am UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/3 "2018-09-20T11:21:02Z")

</div>

Alright, that works nice. But there is one problem. I am editing existing form in hubspot and the feilds like input feild has rounded corners and the submit button too has rounded corner, I just want to make them rectangle. Tried removing all the border-radius from the form CSSbut nothing is changing

```auto
.sign-up-form .hs-fieldtype-text {
 	display: inline-block; 
 border-radius:100px;
}

.sign-up-form .hs-form .hs-form-field{
	display: none;
 border-radius:100px;
}

.sign-up-form .show-error-msg a {
	color: #ff3366;
}

.show-error-msg a:hover {
	color: #e94362;
}

 .sign-up-form .hs_cos_wrapper_type_module {
	display: inline-block;
 width: 600px;
 height: 150px;
 position: relative;
} 

.sign-up-form .show-success-msg {
 height: auto; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 text-align: center;
 background-color:#D3D3D3;
 margin:auto;
}

.sign-up-form .show-success-msg .main-text {

 font-size: 16px;
 margin-right:150px;
 border-radius:100px;
}

.sign-up-form .show-success-msg .sub-text {
 font-weight: 300;
 font-size: 14px;
/* margin-bottom: 10px; */
 margin-right:150px;
/* background-color:#ffffff;
	color: #000000; */
}

.sign-up-form .show-success-msg ul.checkmark li {
	font-size: 30px;
 list-style-type: none;
 margin-bottom: 1em;
 padding: .25em 0 0 2.5em;
 position: relative;
 margin:auto;
}

.sign-up-form .show-success-msg ul.checkmark li:before {
	content: " ";
 display: block;
/* border: .8em #11BB88;
 border-radius: .8em; */
 height: 0;
 width: 0;
 position: absolute;
 left: 43%;
 top: 50%;
 margin-top: -0.5em;

}

 .sign-up-form .show-success-msg ul.checkmark li:after {
 content: " ";
 display: block;
 width: 0.4em;
 height: .8em;
/* border: none #fff;
 border-width: 0 .2em .2em 0; */
 position: absolute;
 left: 46%;
 top: 70%; 
 margin-top: -0.2em; 
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 margin-right:300px;
 }

.sign-up-form .show-error-msg {
 display: in-block;
 justify-content: center;
 align-items: center;
 background-color: rgba(255, 153, 0, 0.20999999344348907);
/* border: 1px none #FF9900;
 	border-radius: 1px; */
 	padding: 10px;
 text-align: center;
 	color: #FF9900;
}

a {
 text-decoration: underline !important;
}

.sign-up-form .hs_error_rollup {
	display: none;
}
 .sign-up-form .hs-form input[type="email"] {
 border-radius: 6px !important;
	border: 1px none #bcbcbc !important; 
 width: 300px !important;
 border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
 line-height: 22px !important;
} 

.sign-up-form .reload-text {
	font-weight: 300;
 cursor: pointer;
 margin-bottom: 0;
}

.sign-up-form .hs-input:not([type="radio"]):not([type="checkbox"]):focus, #hs-pwd-widget-password:focus {
	box-shadow: none !important;
}

.sign-up-form .hs_terms_and_conditions {
	padding: 0 !important;
 padding-left: 8px !important;
}

.sign-up-form .hs-form-booleancheckbox-display {
	color: #bcbcbc;
 font-weight: 300;
}

.sign-up-form .hs-form .hs-error-msgs label{
	color: #bcbcbc;
 font-weight: 300;
}

.sign-up-form .hs-submit .actions {
	position: absolute;
 right: 25%;
 top: 13px;
}

body .sign-up-form .hs-button.primary,
.sign-up-form input[type="submit"],
.sign-up-form input[type="button"] {
 border-radius: 0;
 border-top-right-radius: 6px;
 border-bottom-right-radius: 6px;
 margin: 0;
 padding: 10px 30px;
 width: 150px;
 font-size: 14px;
 font-weight: initial;
 float:right !important; 
}

::-webkit-input-placeholder { /* Webkit Browsers */
	color: #bcbcbc;
}

:-moz-placeholder { /* Firefox 18- */
 color: #bcbcbc;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #bcbcbc;
}
:-ms-input-placeholder { /* IE10 */
 color: #bcbcbc;
}

.hs-input:-moz-placeholder {
 color: #bcbcbc;
}

.hs-input::-webkit-input-placeholder {
 color: #bcbcbc;
}

@media only screen and (max-width: 600px) {
 .sign-up-form .hs_cos_wrapper_type_module {
 	width: 300px;
 }

 .sign-up-form .hs-submit .actions {
 	position: initial;
 }

 .body .sign-up-form .hs-button.primary,
	body input[type="submit"],
 body input[type="button"] {
/* border-radius: 6px !important; */
 width: 100% !important;
 float: right !important;
 }

 .sign-up-form .hs-form input[type="email"] {
/* border-radius: 0 !important; */
 }

 .sign-up-form .hs_terms_and_conditions {
 	padding-left: 4px !important;
 margin: 15px 0;
 }

 .field > .input {
 padding: 0 !important;
	}

 li.hs-form-booleancheckbox {
 margin: 15px 0;
 position: relative;
 }

 .hs-form-booleancheckbox-display {
 font-size: 14px;
 margin-left: 25px;
 }

 input[type="radio"], input[type="checkbox"] {
 position: absolute;
 top: 5%;
 left: 0;
 zoom: 1.5;
 }

 .sign-up-form .show-success-msg ul.checkmark li:before {
 	left: 35%;
 }

 .sign-up-form .show-success-msg ul.checkmark li:after {
 	left: 42%;
 }
} 	

```

---

<div class="post-metadata">

**Author:** ![Shaykoo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shaykoo/32/99730_2.png) [@Shaykoo](https://community.hubspot.com/u/Shaykoo)\
**Post date:** [September 20, 2018, 11:52am UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/4 "2018-09-20T11:52:38Z")

</div>

```auto
.sign-up-form .hs-fieldtype-text {
 	display: inline-block; 
 border-radius:100px;
}

.sign-up-form .hs-form .hs-form-field{
	display: none;
 border-radius:100px;
}

.sign-up-form .show-error-msg a {
	color: #ff3366;
}

.show-error-msg a:hover {
	color: #e94362;
}

 .sign-up-form .hs_cos_wrapper_type_module {
	display: inline-block;
 width: 600px;
 height: 150px;
 position: relative;
} 

.sign-up-form .show-success-msg {
 height: auto; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 text-align: center;
 background-color:#D3D3D3;
 margin:auto;
}

.sign-up-form .show-success-msg .main-text {

 font-size: 16px;
 margin-right:150px;
 border-radius:100px;
}

.sign-up-form .show-success-msg .sub-text {
 font-weight: 300;
 font-size: 14px;
/* margin-bottom: 10px; */
 margin-right:150px;
/* background-color:#ffffff;
	color: #000000; */
}

.sign-up-form .show-success-msg ul.checkmark li {
	font-size: 30px;
 list-style-type: none;
 margin-bottom: 1em;
 padding: .25em 0 0 2.5em;
 position: relative;
 margin:auto;
}

.sign-up-form .show-success-msg ul.checkmark li:before {
	content: " ";
 display: block;
/* border: .8em #11BB88;
 border-radius: .8em; */
 height: 0;
 width: 0;
 position: absolute;
 left: 43%;
 top: 50%;
 margin-top: -0.5em;

}

 .sign-up-form .show-success-msg ul.checkmark li:after {
 content: " ";
 display: block;
 width: 0.4em;
 height: .8em;
/* border: none #fff;
 border-width: 0 .2em .2em 0; */
 position: absolute;
 left: 46%;
 top: 70%; 
 margin-top: -0.2em; 
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 margin-right:300px;
 }

.sign-up-form .show-error-msg {
 display: in-block;
 justify-content: center;
 align-items: center;
 background-color: rgba(255, 153, 0, 0.20999999344348907);
/* border: 1px none #FF9900;
 	border-radius: 1px; */
 	padding: 10px;
 text-align: center;
 	color: #FF9900;
}

a {
 text-decoration: underline !important;
}

.sign-up-form .hs_error_rollup {
	display: none;
}
 .sign-up-form .hs-form input[type="email"] {
 border-radius: 6px !important;
	border: 1px none #bcbcbc !important; 
 width: 300px !important;
 border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
 line-height: 22px !important;
} 

.sign-up-form .reload-text {
	font-weight: 300;
 cursor: pointer;
 margin-bottom: 0;
}

.sign-up-form .hs-input:not([type="radio"]):not([type="checkbox"]):focus, #hs-pwd-widget-password:focus {
	box-shadow: none !important;
}

.sign-up-form .hs_terms_and_conditions {
	padding: 0 !important;
 padding-left: 8px !important;
}

.sign-up-form .hs-form-booleancheckbox-display {
	color: #bcbcbc;
 font-weight: 300;
}

.sign-up-form .hs-form .hs-error-msgs label{
	color: #bcbcbc;
 font-weight: 300;
}

.sign-up-form .hs-submit .actions {
	position: absolute;
 right: 25%;
 top: 13px;
}

body .sign-up-form .hs-button.primary,
.sign-up-form input[type="submit"],
.sign-up-form input[type="button"] {
 border-radius: 0;
 border-top-right-radius: 6px;
 border-bottom-right-radius: 6px;
 margin: 0;
 padding: 10px 30px;
 width: 150px;
 font-size: 14px;
 font-weight: initial;
 float:right !important; 
}

::-webkit-input-placeholder { /* Webkit Browsers */
	color: #bcbcbc;
}

:-moz-placeholder { /* Firefox 18- */
 color: #bcbcbc;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #bcbcbc;
}
:-ms-input-placeholder { /* IE10 */
 color: #bcbcbc;
}

.hs-input:-moz-placeholder {
 color: #bcbcbc;
}

.hs-input::-webkit-input-placeholder {
 color: #bcbcbc;
}

@media only screen and (max-width: 600px) {
 .sign-up-form .hs_cos_wrapper_type_module {
 	width: 300px;
 }

 .sign-up-form .hs-submit .actions {
 	position: initial;
 }

 .body .sign-up-form .hs-button.primary,
	body input[type="submit"],
 body input[type="button"] {
/* border-radius: 6px !important; */
 width: 100% !important;
 float: right !important;
 }

 .sign-up-form .hs-form input[type="email"] {
/* border-radius: 0 !important; */
 }

 .sign-up-form .hs_terms_and_conditions {
 	padding-left: 4px !important;
 margin: 15px 0;
 }

 .field > .input {
 padding: 0 !important;
	}

 li.hs-form-booleancheckbox {
 margin: 15px 0;
 position: relative;
 }

 .hs-form-booleancheckbox-display {
 font-size: 14px;
 margin-left: 25px;
 }

 input[type="radio"], input[type="checkbox"] {
 position: absolute;
 top: 5%;
 left: 0;
 zoom: 1.5;
 }

 .sign-up-form .show-success-msg ul.checkmark li:before {
 	left: 35%;
 }

 .sign-up-form .show-success-msg ul.checkmark li:after {
 	left: 42%;
 }
} 	

```

Here is the CSS of the form, I just want to make input feild and submit button rectangular they are rounded now. I tried removing all the border-radius in the CSS but it still remains the same.

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 20, 2018, 12:17pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/5 "2018-09-20T12:17:29Z")

</div>

@Shaykoo - If it’s an embed form, you can always use the f[orm styler from Belch](https://forms.belch.io) to accomplish that as well, without having to code.

---

<div class="post-metadata">

**Author:** ![Shaykoo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shaykoo/32/99730_2.png) [@Shaykoo](https://community.hubspot.com/u/Shaykoo)\
**Post date:** [September 20, 2018, 1:00pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/6 "2018-09-20T13:00:07Z")

</div>

Thankyou so much, now the form seems amazing. Now I have the form code and I dont know where to embed it to show it in my hubspot pages.Could you help me in this too.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [September 20, 2018, 1:06pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/7 "2018-09-20T13:06:35Z")

</div>

@Shaykoo,

I really dont thing you should use an embed for your form in Hubspot. I’ve experienced issues with forms not updating through the embed, but also you lose page editor functionality. You should really use a form module I think.

Need help? [Hire Us Here](https://www.upwork.com/o/companies/_~0124e15ff34efb3871/)

---

<div class="post-metadata">

**Author:** ![Shaykoo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shaykoo/32/99730_2.png) [@Shaykoo](https://community.hubspot.com/u/Shaykoo)\
**Post date:** [September 20, 2018, 1:27pm UTC](https://community.hubspot.com/t/form-submit-button-styling/10311/8 "2018-09-20T13:27:31Z")

</div>

I do understand but I just need to see how the embed forms looks like in the hubspot page. Could you tell me where to embed the form script.