Problem with Styling HTML Form (width and margin)

[vPhilipp]

Hey there,

I’m again in the process of styling an HTML Raw Hubspot form and have a problem with the width and margin.

I got a Design from our designer looking like this:

It seems that there is some automatic margin or something like this in the Hubspot code, because when I try to recreate it (currently doing this with codepen) I get the following result:

The width of the form is 432px and the space between the two middle fields should be 24px.

My code currently looks like this and I don’t know what I’m doing wrong:

.hs-form input {
box-sizing: border-box;
height: 42px;
width: 432px;
border: 1px solid #6928C6;
border-radius: 6px;
color: #383A3B;
background-color: #F7F4FC;
margin-bottom: 20px;
}

.hs-form .hs-firstname input{
width: 204px;
margin-right: 24px;
}

.hs-form .hs-lastname input {
width: 204px;
}

.hs-form .hs-email input {
width: 204px;
margin-right: 24px;
}

.hs-form .hs-phone input {
width: 204px;
}

.hbspt-form {
box-sizing: border-box;
color: #383A3B;
font-family: Lato;
font-size: 14px;
letter-spacing: 0.47px;
line-height: 25px;
width: 432px;

}

.hs-form textarea {
height: 80px;
width: 432px;
border: 1px solid #6928C6;
border-radius: 6px;
color: #383A3B;
background-color: #F7F4FC;
}
.hs-button.primary.large {
color: #6928C6;
background-color: #ffffff;
font-family: Lato;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.47px;
line-height: 17px;
text-align: center;
height: 35px;
width: 220px;
border: 1px solid #6928C6;
border-radius: 6px;
}

.hs-button.primary.large:hover {
background-color:#6928C6;
color:#FFFFFF;
border:solid 1px #FFFFFF;

}

I hope somebody can point me in the right direction! Thanks in advance!

Philipp

[Teun]

Hi @vPhilipp ,

We use the following code to fix the above issue:

.hs-form .form-columns-0 .input, 
.hs-form .form-columns-1 .input, 
.hs-form .form-columns-2 .input {
	 margin-right: 0 !important;
}

.hs-form .form-columns-2 .hs-form-field {
	 width: calc(100% / 2 - 0.5rem) !important;
	 float: left;
}

@media screen and (max-width: 620px) {
	 .hs-form .form-columns-2 .hs-form-field {
		 width: 100% !important;
	}
}

.hs-form .form-columns-2 .hs-form-field:last-child {
	 float: right !important;
}

[vPhilipp]

Hey @Teun

now my form looks like this with your code:

I’ve deleted all width sections from my previous code, but I still can’t get it to work right, sadly.

You can take a look at my Codepen here: https://codepen.io/pr1mus/pen/poPKBLo

[Teun]

Hi @vPhilipp ,

I forgot a small part, I rewrote your CSS. The following should work:

.hs-form .form-columns-0 .input,
.hs-form .form-columns-1 .input,
.hs-form .form-columns-2 .input {
 margin-right: 0 !important;
}

.hs-form .hs-input {
 width: 100% !important;
}

.hs-form .form-columns-2 .hs-form-field {
 width: calc(100% / 2 - 0.5rem) !important;
 float: left;
}

@media screen and (max-width: 620px) {
 .hs-form .form-columns-2 .hs-form-field {
 width: 100% !important;
 }

 .hs-form .hs-input {
 width: 100% !important;
 }
}

.hs-form .form-columns-2 .hs-form-field:last-child {
 float: right !important;
}

.hs-form input {
 border: 1px solid #6928c6;
 border-radius: 6px;
 height: 42px;
 color: #383a3b;
 background-color: #f7f4fc;
 margin-bottom: 20px;
}

.hbspt-form {
 color: #383a3b;
 font-family: Lato;
 font-size: 14px;
 letter-spacing: 0.47px;
 line-height: 25px;
}

.hs-form textarea {
 height: 80px;
 border: 1px solid #6928c6;
 border-radius: 6px;
 color: #383a3b;
 background-color: #f7f4fc;
}

.hs-button.primary.large {
 color: #6928c6;
 background-color: #ffffff;
 font-family: Lato;
 font-size: 14px;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 0.47px;
 line-height: 17px;
 text-align: center;
 height: 35px;
 width: 220px;
 border: 1px solid #6928c6;
 border-radius: 6px;
}

.hs-button.primary.large:hover {
 background-color: #6928c6;
 color: #ffffff;
 border: solid 1px #ffffff;
}

The width between the two fields is defined with (- 0.5rem)

width: calc(100% / 2 - 0.5rem) !important;

[vPhilipp]

This worked great! Thank you a lot!

[vPhilipp]

Hey @Teun ,

thanks for your answer. I’ll take a look at it. I’ve to rewrite my code for that to work I think.

I’ll message back in a bit to see if it worked.

[EBricenoLeone]

Hi, I got the same problem, but I don’t have the skill to write in HTML.

Look what’s going on with the margins on the Mobile.

Here’s my ugly code

<iframe style=“margin-right: 0px auto; margin-left 100% ; display: block; margin-left 100% display: block; margin: 0px auto; display: block;” xml=“lang” src=“https://app.livestorm.co/p/0b53ed7a-4ef7-4a6a-8644-6f0bffc9d347/form” width=“700” height=“700” frameborder=“0”></iframe>