topic Re: Form fixing in CMS Development

Form fixing

RElouahabi — Thu, 27 Jan 2022 14:50:42 GMT

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

Re: Form fixing

Kevin-C — Thu, 27 Jan 2022 23:13:36 GMT

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!

Re: Form fixing

RElouahabi — Fri, 28 Jan 2022 08:44:31 GMT

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

Thanks so much!

Re: Form fixing

piersg — Fri, 28 Jan 2022 10:03:28 GMT

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

Re: Form fixing

RElouahabi — Fri, 28 Jan 2022 10:06:37 GMT

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

Re: Form fixing

Teun — Fri, 28 Jan 2022 12:29:47 GMT

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.

Re: Form fixing

RElouahabi — Fri, 28 Jan 2022 15:09:30 GMT

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:

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

Re: Form fixing

Teun — Mon, 31 Jan 2022 07:22:10 GMT

Hi @RElouahabi ,

Try this:

Re: Form fixing

webdew — Mon, 31 Jan 2022 08:31:59 GMT

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.

Re: Form fixing

RElouahabi — Mon, 31 Jan 2022 09:01:12 GMT

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:

Re: Form fixing

Teun — Mon, 31 Jan 2022 09:09:09 GMT

Hi @RElouahabi ,

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

Re: Form fixing

RElouahabi — Mon, 31 Jan 2022 09:12:34 GMT

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

Re: Form fixing

Teun — Mon, 31 Jan 2022 09:25:37 GMT

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

Re: Form fixing

RElouahabi — Mon, 31 Jan 2022 09:41:10 GMT

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

What do you think is needed to fix this?

Re: Form fixing

Teun — Mon, 31 Jan 2022 09:53:57 GMT

Hi @RElouahabi ,

This should be it:

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

Re: Form fixing

RElouahabi — Mon, 31 Jan 2022 10:40:56 GMT

Hey Teun,

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

Have a good week!

Re: Form fixing

Teun — Mon, 31 Jan 2022 10:44:32 GMT

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