Error Handling issues with HS Embedded Form on Wordpress Site w/Custom CSS (replacing Gravity Forms)

[navroop]

Hi All,

We've mostly worked through a transition away from Gravity Forms to a combination of Hubspot CTA (beta) and Embedded Forms. 

While doing so, we've laid out our new Hubspot versions of forms in staging right below the existing Gravity Forms to see how they compare on different screen sizes, widths, devices, etc.

One issue we ran into with Hubspot Embedded Forms is the formatting of error messages and how they're analyzed as you move from field to field immediately rather as you head to submit.

Laying out the sequence below.

1) How both forms look to begin with.

• Gravity Forms is on top.
• Hubspot Embedded Form w/ Custom CSS is below.
• We split the name field on purpose.
• Looks as expected.

2) The Gravity Forms form doesn't analyze errors / missing required fields as you tab through the form, but on submit displays a nice clean error message.

• Only analyzes errors / missing fields on attempted submit.
• Places a single easy to see error message above the form.

3) The Hubspot Form analyzes missing fields while tabbing through the form or while clicking from field to field.

• Error messages are printed under each field.
• Error messages are not red nor stand out.
• Starts objecting when you decide to fill out fields non sequentially, e.g. tap on First Name, but decide to fill in Company first, and you'll immediately start seeing errors.

4) On Submit Hubspot form prints multiple error messages field by field and overall.

• Error messages are printed under each field.
• Overall error message printed between fields and button.
• Error messages are not red nor stand out.

Questions:

1) What are the element names we need to adjust CSS for error messages? Figured out the others, but don't see these...

2) How can we stop immediate analysis of errors / missing required fields when clicking through and instead determine on submission attempt, and if not all filled in at that point then show a consolidated error message like what we have with Gravity Forms?

• Analyze on Submit attempt.
• No field-by-field error message.
• One consolidated message that stands out when finally needed.

Thanks!

Thanks!

[Anton]

Hi @navroop, 

let's start with the easier thing - the error classes:

for any kind of input fields use this class:

.hs-input.error{ /* this is the input field with the error */ }

for the error message it's this class:

ul.no-list.hs-error-msgs{ /* this is the wrapping container of the error message */ }
ul.no-list.hs-error-msgs .hs-error-msg{ /* this is the error message */ }

I think the most powerful/useful link @Jaycee_Lewis provided was the second one with embed code customization since you could modify the embed code to something like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "YOUR-HUBID",
    formId: "THE-FORM-ID",
css:"" // this will disable the default HubSpot styling, 
onBeforeFormSubmit: function($form){
// put the checking and consolidation script here
}
  });
</script>

best, 

Anton

[navroop]

This is helpful Anton. Is there a reference that lists out all of the CSS elements / classes in use? Where did you find .hs-input.error and ul.no-list.hs-error-msgs and ul.no-list.hs-error-msgs .hs-error-msg?

With these I can get started.

I'm assuming the addition of the onBeforeFormSubmit: script will enable me to custom print out errors if something goes wrong. Any examples? 

But, I'm also assuming this will still leave enabled the field by field check and display of error messages as you tab through the form even before attempting to submit once. True?

[Anton · Accepted solution]

Hi @navroop, 

you can find the classes if you click into - let's say - a required field and then inspect the element.

It looks like this for me:

btw - you can also add

errorClass: "" // CSS class that will be applied to inputs with validation errors instead of the default .invalid.error.

and

errorMessageClass: "" // CSS class that will be applied to error messages instead of the default .hs-error-msgs.inputs-list.

into the embed code to add custom classes. 

Also - you could use " onBeforeFormInit: " to stop the default validation.

Unfortunately I don't have examples, but I assume @Teun has plenty of them. Right, Teun? 😁

best, 

Anton

[navroop]

Helpful!

I've been able to "discover" them by doing as you've suggested using the inspect feature, but was hoping they would simply be documented so I wouldn't need to inspect field by field repeatedly.

I'm definitely new to this, so examples of how to do that with onBeforeFormInit: or onBeforeFormSubmit: would be helpful.

@Teun  -- thoughts?

[navroop]

Definitely a major improvement. Thank you all! Still would love help on figuring out how to skip the immediate error processing that takes place while tabbing through the form before even attempting a submit, but this already looks better.

Top is Gravity Forms Original. Below is our current version.

This controls the summary message for all errors at the bottom. 

selector .hs_error_rollup .no-list.hs-error-msgs.inputs-list{
background: #fff9f9;
border: 1.5px solid #c02b0a;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0,0,0,.11), 0 0 4px rgba(18,25,97,.041);
margin-bottom: 8px;
margin-top: 8px;
padding: 16px 16px 16px 48px;
position: relative;
width: 100%;
}

While this controls the individual field error messages:

selector .no-list.hs-error-msgs.inputs-list{
margin:0;
padding:0;
list-style-type: none;
color: #c02b0a;
font-size: 13.2px;
font-weight: 500;
}

Wouldn't mind figuring out how to move the summary of all errors to the top rather than the bottom...

[Jaycee_Lewis]

Hi, @navroop 👋 Thanks for your questions. It sounds like you've put a lot of thought and care into your user's experience. I don't want to just throw documentation at you, as it sounds like you've done your diligence. And here are the links to a few useful pages 😊 

• Style your embedded form with CSS in your external stylesheet
• How to customize the form embed code (JavaScript based)
• Create a Form | Customize your form

Hey, @Jnix284 @alyssamwilie @Anton @Indra, have you had any success with anything similar recently?

Thank you! — Jaycee

[navroop]

I've seen each of these. In general, my comment on the dev docs is that:

1. the legacy form docs don't list the actual CSS elements that can/need to be edited (realm of the possible)
2. I have yet to see developer docs that accurately list all the CSS elements Hubspot uses which would enable us to experiment more easily.