Form Submit Button styling

[Shaykoo]

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 

[tjoyce · Accepted solution]

@Shaykoo - If it's an embed form, you can always use the form styler from Belch to accomplish that as well, without having to code.

[Shaykoo]

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.

[Jsum]

@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

[Shaykoo]

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.

[Jsum]

@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 You can play with targeting the form fields in real time.

Need help? Hire Us Here

[Shaykoo]

.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.

[Shaykoo]

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

.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%;
  }
}