Form fixing

[RElouahabi]

hi there,

Just need some help. I'm not great at styling and was told to the only way to make changes on the HubSpot forms is through CSS (Which I'm not great at).

Would you guys be kind enough to provide some CSS to fix this form I have? here is a loom for explanation:

https://www.loom.com/share/cf01b876b95143c0b9432bee38cd1b46

[webdew]

Hi @RElouahabi ,

We can't fix the issue until can check the form on browser, there is one mistak as I am able to check, you have placed css inside script tag: https://prnt.sc/26ma5bg

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards. 

[Teun]

Hi @RElouahabi ,

First of all, your form is loaded as an iFrame and because of that, you can not apply custom styling. So in your form settings, set it as a 'Raw HTML form' (styling tab).
If you set it as a Raw HTML form, all HubSpot styling will be removed, so you will need to add some CSS of your own.
The CSS you need to achieve what you need is the following:

.hs-form {
    position: relative;
}

.hs-form .form-columns-2 .hs-form-field:first-child {
    width: 40%; // Change this to whatever you want
    float: left;
}

.hs-form .form-columns-2 .hs-form-field:last-child {
    width: 60%; // Change this to whatever you want
    float: left;
}

.hs-form .form-columns-2 .hs-form-field input {
    width: 100%;
}

.hs-form .hs-submit {
    position: absolute;
    top: 8px;
    right: 14px
}

.hs-form .hs-submit .actions {
    padding: 0;
    margin: 0;
}

.hs-form .hs-submit .hs-button {
    padding: 8px 24px;
}

Screenshot of result:

However, you probably need some more styling if you set it as a Raw HTML form.

[RElouahabi]

Ah great, thanks Teun. So I set the form as raw HTML and added it to the webpage, whereabouts do I add the CSS?

Because I added it on this page:  https://rachids-stupendous-site.webflow.io/landing-2 and its now disappeared? here's what I did:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "4704500",
formId: "d6e7fdd5-70e1-4064-9230-b9e612091b68"
});

.hs-form {
position: relative;
}

.hs-form .form-columns-2 .hs-form-field:first-child {
width: 40%; // Change this to whatever you want
float: left;
}

.hs-form .form-columns-2 .hs-form-field:last-child {
width: 60%; // Change this to whatever you want
float: left;
}

.hs-form .form-columns-2 .hs-form-field input {
width: 100%;
}

.hs-form .hs-submit {
position: absolute;
top: 8px;
right: 14px
}

.hs-form .hs-submit .actions {
padding: 0;
margin: 0;
}

.hs-form .hs-submit .hs-button {
padding: 8px 24px;
}
</script>

[Teun]

Hi @RElouahabi ,

Try this:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "4704500",
formId: "d6e7fdd5-70e1-4064-9230-b9e612091b68"
});
</script>
<style>

.hs-form {
position: relative;
}

.hs-form .form-columns-2 .hs-form-field:first-child {
width: 40%; // Change this to whatever you want
float: left;
}

.hs-form .form-columns-2 .hs-form-field:last-child {
width: 60%; // Change this to whatever you want
float: left;
}

.hs-form .form-columns-2 .hs-form-field input {
width: 100%;
}

.hs-form .hs-submit {
position: absolute;
top: 8px;
right: 14px
}

.hs-form .hs-submit .actions {
padding: 0;
margin: 0;
}

.hs-form .hs-submit .hs-button {
padding: 8px 24px;
}
</style>

[RElouahabi]

Hey Teun,

It looks like gone back to what the form was originally 😬 -  https://rachids-stupendous-site.webflow.io/landing-2

just need it to show as you done with your screenshot: 

[Teun]

Hi @RElouahabi ,

It is still an iFrame, so the style isn't working.
Could you try this:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "4704500",
formId: "d6e7fdd5-70e1-4064-9230-b9e612091b68",
cssRequired: ""
});
</script>
<style>

.hs-form {
position: relative;
}

.hs-form .form-columns-2 .hs-form-field:first-child {
width: 40%; // Change this to whatever you want
float: left;
}

.hs-form .form-columns-2 .hs-form-field:last-child {
width: 60%; // Change this to whatever you want
float: left;
}

.hs-form .form-columns-2 .hs-form-field input {
width: 100%;
}

.hs-form .hs-submit {
position: absolute;
top: 8px;
right: 14px
}

.hs-form .hs-submit .actions {
padding: 0;
margin: 0;
}

.hs-form .hs-submit .hs-button {
padding: 8px 24px;
}
</style>

[RElouahabi]

this is what appears now: https://rachids-stupendous-site.webflow.io/landing-2

[Teun]

Hmm still an iFrame, use the code I send before and go to the form settings to set it as an Raw HTML Form.

[RElouahabi]

ok, done that, looks like it's getting there. this is what I get now:

What do you think is needed to fix this?

[Teun]

Hi @RElouahabi ,

This should be it:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "4704500",
formId: "d6e7fdd5-70e1-4064-9230-b9e612091b68"
});
</script>
<style>
.hs-form {
  position: relative;
}

.hs-form .form-columns-2 {
  width: 100%;
  max-width: 100%;
}

.hs-form .form-columns-2 .hs-form-field input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

.hs-form .form-columns-2 .hs-form-field input:focus {
  outline: none;
}

.hs-form .hs-error-msgs {
  list-style: none;
  padding: 0;
}

.hs-form .hs-error-msgs > li label {
  font-size: 14px;
  font-weight: 400;
  color: white;
}

.hs-form .hs-submit .actions {
  padding: 0;
  margin: 0;
}

.hs-form .hs-submit .hs-button {
  padding: 10px 24px;
  background: #ff3f21;
  color: white;
  border: 0;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

@media screen and (min-width: 767px) {
  .hs-form .form-columns-2 .hs-form-field:first-child {
    width: 40%; // Change this to whatever you want
    float: left;
  }

  .hs-form .form-columns-2 .hs-form-field:last-child {
    width: 60%; // Change this to whatever you want
    float: left;
  }

  .hs-form .hs-submit {
    position: absolute;
    top: 8px;
    right: 12px;
  }
}
</style>

[RElouahabi]

Hey Teun,

All working. Thanks so much for your time & patience with me, I really do appreciate it!

Have a good week!

[Teun · Accepted solution]

No worries mate! If it did solve your issue, would you mind marking it as the answer?

[piersg]

@RElouahabi What do you want the form to look like/what changes do you want to make?

[RElouahabi]

Would you guys be kind enough to provide some CSS to fix this form I have? here is a loom for explanation:

https://www.loom.com/share/cf01b876b95143c0b9432bee38cd1b46

[Kevin-C]

Hey @RElouahabi 

If you could drop us a public link to the page we should be able to get you a solution or 2 rather quickly!

[RElouahabi]

Hey Kevin, this is the link:  https://rachids-stupendous-site.webflow.io/landing-2

Thanks so much!