CMS Development

Janyx
Member

Styling of Embeded Form Failing to Load

I apologize if this isn't the correct forum.  I was curious if there was a bug with the embeded form lacking style attributes.  My site's form still had the custom styling applied at least a couple weeks ago.  Below is a screen shot of the form in its current state.  Users can't even click the send button as the "Powered by Hubspot" branding is obstructing the button.

 

Styling not appliedStyling not applied

Below is a screen shot of how the embed form should appear with styling applied.

 

Sample FormSample Form

The documentation appears to be out of date as it references a checkbox for default styling that no longer exists.  I've read multiple posts on the subject but none seem to apply to this specific case.  I updated my CSS markup to include the override of the styling with no avail (see below).

 

input.hs-input
{
    background-color: #333333 !important;
    border: 1px solid #333333 !important;
    border-bottom: 1px solid #CED4DA !important;
    color: #FFFFFF !important;
    width: 100% !important;
}

When viewing the applied styling to the embed form "inline" styling is the only attributes being applied, presumably from the injected style nodes.

 

I saw a post recommending the tool at https://forms.belch.io which also doesn't appear to update to override the embeded styling of the form.  As you can see from the screen shot below, the labels are not updating to white.

 

Belch FormBelch Form

I did notice that an iframe was being rendered on Edge, Chrome, and Firefox:

 

<iframe id="hs-form-iframe-0" class="hs-form-iframe" scrolling="no" style="position: static; border: medium none; display: block; overflow: hidden; width: 540px; height: 311px;" width="540" height="311">
    <html>
        <head>...</head>
        <body>...</body>
    </html>
</iframe>

It's been a long time since I have done front-end development.  To my knowledge, you are not able to modify the contents of an iframe without javascript tweaking added into the mix.  Is anybody else experiencing or have experienced this issue that can provide a solution? 

 

Thanks,

4 Replies 4
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Styling of Embeded Form Failing to Load

Hi @Janyx - I am the developer on the Belch builder and I just recently had a similar conversation with another Belch user regarding this very issue.  This particular user also mentioned that they once, were able to style their HubSpot form and just within the past 5 days have not been able to. 

 

"The v2.js embed code is standard for HubSpot Marketing Basic, Professional, and Enterprise subscriptions, while the shell.js embed code is standard for HubSpot Marketing Free and Starter. Most of the customization features that come with the v2.js embed code are specific to Basic/Pro/Enterprise portals, and the shell.js code doesn't allow custom styling through the page's stylesheets. It's not possible to choose between embed codes; if you have a Marketing Basic/Pro/Enterprise subscription, you'll have the v2.js embed code, and vice versa for Marketing Free/Starter."

 

So, it would appear your form is using the shell.js and injecting the iframe instead of the javascript form. 

 

This particular user's instance didn't really match up with the quoted text above but we did discover that they were grandfathered into a free/low cost tier that HubSpot has recently converted to the shell.js version. Most likely HubSpot is doing some house cleaning and you may have been effected by that (maybe they can chime in on this) @lukesummerfield.

 

Please, let us know your findings since this has started to become a common issue.

 


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Janyx
Member

Styling of Embeded Form Failing to Load

Hi @tjoyce, thank you for the response, it was insightful and reassuring that I was not the only one encountering this specific issue.  Hopefully, the issue can be addressed by HubSpot soon as I cannot leave the form in its current state on a public facing website.

 

Best Regards,

tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Styling of Embeded Form Failing to Load

You're welcome @Janyx, I would also recommend contacting HubSpot support directly. It might help everyone in the same scenario if you report back any findings.

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Styling of Embeded Form Failing to Load

@Janyx - I have pushed out an update to the Belch form styler that should now allow you to style these forms. Connect with me on Slack if you have questions.


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

0 Upvotes