CMS Development

RElouahabi
Membre

Form fixing

Résolue

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 Votes
1 Solution acceptée
Teun
Solution
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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



Learn more about HubSpot by following me on LinkedIn or YouTube

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


Voir la solution dans l'envoi d'origine

0 Votes
16 Réponses
webdew
Guide | Partenaire solutions Diamond
Guide | Partenaire solutions Diamond

Form fixing

Résolue

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 Votes
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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.



Learn more about HubSpot by following me on LinkedIn or YouTube

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


RElouahabi
Membre

Form fixing

Résolue

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 Votes
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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>


Learn more about HubSpot by following me on LinkedIn or YouTube

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


0 Votes
RElouahabi
Membre

Form fixing

Résolue

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 Votes
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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>


Learn more about HubSpot by following me on LinkedIn or YouTube

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


0 Votes
RElouahabi
Membre

Form fixing

Résolue
0 Votes
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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



Learn more about HubSpot by following me on LinkedIn or YouTube

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


0 Votes
RElouahabi
Membre

Form fixing

Résolue

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 Votes
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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>


Learn more about HubSpot by following me on LinkedIn or YouTube

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


0 Votes
RElouahabi
Membre

Form fixing

Résolue

Hey Teun,

 

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

 

Have a good week!

0 Votes
Teun
Solution
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Form fixing

Résolue

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



Learn more about HubSpot by following me on LinkedIn or YouTube

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


0 Votes
piersg
Conseiller clé

Form fixing

Résolue

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

0 Votes
RElouahabi
Membre

Form fixing

Résolue

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 Votes
Kevin-C
Expert reconnu | Partenaire solutions
Expert reconnu | Partenaire solutions

Form fixing

Résolue

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!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
RElouahabi
Membre

Form fixing

Résolue

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

 

Thanks so much!

0 Votes