CMS Development

RElouahabi
Member

Form fixing

SOLVE

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

0 Upvotes
1 Accepted solution
Teun
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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



Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Form fixing

SOLVE

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. 

0 Upvotes
Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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:
Schermafbeelding 2022-01-28 om 13.28.59.png
However, you probably need some more styling if you set it as a Raw HTML form.



Did my answer solve your issue? Help the community by marking it as the solution.
RElouahabi
Member

Form fixing

SOLVE

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>

0 Upvotes
Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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>


Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
RElouahabi
Member

Form fixing

SOLVE

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: 

RElouahabi_0-1643619652313.png

 

0 Upvotes
Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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>


Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
RElouahabi
Member

Form fixing

SOLVE
0 Upvotes
Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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



Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
RElouahabi
Member

Form fixing

SOLVE

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

 

Screenshot 2022-01-31 at 09.40.23.png

 

What do you think is needed to fix this?

0 Upvotes
Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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>


Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
RElouahabi
Member

Form fixing

SOLVE

Hey Teun,

 

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

 

Have a good week!

0 Upvotes
Teun
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Form fixing

SOLVE

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



Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
piersg
Key Advisor

Form fixing

SOLVE

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

0 Upvotes
RElouahabi
Member

Form fixing

SOLVE

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

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Form fixing

SOLVE

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
Member

Form fixing

SOLVE

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

 

Thanks so much!

0 Upvotes