topic Re: Pressing Embed Form CSS Issue - Going Mad! in Lead Capture Tools

Pressing Embed Form CSS Issue - Going Mad!

JohnInDallas — Thu, 24 Aug 2023 01:42:34 GMT

hey guys - thank you in advance. i will try to be as clear as possible.

I have form that's been created. I've elected to do an embed form because that's how we can style it. BUT nothing I seem to do works as expected.

Site is wordpress. Avada theme. All up to date.

I've managed to update the button but they want to display it in a one thirds two thirds column layout.

Here's how it looks when i start it.

So this is a test form - the email field is on a line by itself because the form I have to edit has the same element.

When i inspect the form - i see a class "fieldset" with a max-width of 500px - when i turn that off - the form looks like this. (below)

Side note - i have the width set to 50% because if i say 100 then i get every field on a line by itself and our design team says no bueno.

In front of the fieldset class is a long id that starts with hs- and i've tried to edit the id, the class, everything and I can NOT ge that email field to go acroos the screen like it does here in the example.

I'd rate myself as a novice CSS guy and can typically make sense of this sort of stuff but the behavior is so inconsistent I'd really appreciate some guidance here so I can stop going crazy over here.

I'm minifying my css and adding it to the code block in avada using the style tags but it just can NOT get it to work consistently.

I apologize in advance for possibly not explaining this very well but I'm happy to expound upon this if you have questions.

Thank you for any direction or insight you can provide - fighting the clock on this one so any help would be appreciated.

Re: Pressing Embed Form CSS Issue - Going Mad!

TomM2 — Thu, 24 Aug 2023 12:15:08 GMT

Hey @JohnInDallas are you using a raw html form or a HubSpot theme form? You'll need to enable set as raw html to add custom style to your form, otherwise it will load in an iframe and not take in custom css.

Have you tried overriding the style but using that same class and setting something like "max-width: 100% !important" in your stylesheet?

Re: Pressing Embed Form CSS Issue - Going Mad!

JohnInDallas — Thu, 24 Aug 2023 13:38:43 GMT

Hey @TomM2 - thank you for the response - i am indeed using the raw html format.

I will try again to confirm but sometimes it seems i put in a class as i see it in the inspector and it does nothing. Do I need to use the hs-form number or the class it's in front of? Or both?

Re: Pressing Embed Form CSS Issue - Going Mad!

JohnInDallas — Thu, 24 Aug 2023 14:03:55 GMT

So, this is what confuses me sooooooo much.....

When i inspect it's clearly identified when i hover over the email field.

If i add this to the style tag in the code block within style tags in the avada column nothing changes. I've tried making the hs-form and ID, i've tried just using field set and i've tried using the class called form-columns-1 but they do NOT seem to make an impact.

.hs-form-e16d0398-5bed-48e7-91a7-ebda327b148c_cbf654dc-f741-4b8c-a68f-57e1af3a68c8 fieldset {max-width:100%!important;}

Is there a document or video that identifies the class files affiliated with hubspot gernerated forms? I'm grasping at straws here you guys.

Re: Pressing Embed Form CSS Issue - Going Mad!

JohnInDallas — Thu, 24 Aug 2023 14:44:47 GMT

Okay - so the MAX-WIDTH issue is resolve on the main container - i used this:
.hs-form fieldset {max-width: none !important;}

Now - if i can get the class .forms-columns-1 to go full with without forcing everything into its own line i'll be good. I've had no luck with input fieldset or hs-input

Re: Pressing Embed Form CSS Issue - Going Mad!

TomM2 — Thu, 24 Aug 2023 15:07:29 GMT

Hey @JohnInDallas there's no offical documentation listing all of the form markup anymore, but do you have a link to the page you're looking at so I can take a look please?

Re: Pressing Embed Form CSS Issue - Going Mad!

JohnInDallas — Thu, 24 Aug 2023 15:10:17 GMT

sent it in a message