Web Forms: Customizing Error Message (Required Fields)

Developer Support APIs & Integrations
1

Hello:

I want to customize the error message for required fields. The error message should be speficic to each field. For example:

“Please fill out your first name!”

“Please fill out your last name!”

Here are 2 ideas for making this happen, but I need yoru experiuse in how to do this.

Option 1: Append the message with the field name.

translations: {
en: {
required: “Please fill out” + [name_of_field]
}
}

Option 2: Used nested messages for each field.

translations: {
en: {
Field:FirstName {
required: “Please fill out first name!”
}
Field:LastName {
required: “Please fill out last name!”
}
}
}

2

Hi @RJosefs

You can customise the Form Embed Code to add custom validation messages, translations and more.

You can only do this with a Pro or Enterprise subscription because the form must be set to Raw HTML.

Have fun

Mike

Here to learn more about HubSpot and share my HubSpot Knowledge. I’m the founder of Webalite a Gold HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world’s first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

3

Thank you Mike,

I have the ability to “set to Raw HTML”, but I still don’t know where to create a custom validation message. Do I customize it in the embed code (on website) OR on the form itself (in HubSpot)? And can you send a screen shot or show me where this is done?

4

Thank you @Mike_Eastwood

I have the ability to “set to Raw HTML”, but I still don’t know where to create a custom validation message. Do I customize it in the embed code (on website) OR on the form itself (in HubSpot)? And can you send a screen shot or show me where this is done?

5

Hi @RJosefs

If you are using one form, on one page, then I would customise the embed coded using the HTML Module on the page something like this:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 portalId: "123456",
 formId: "AAAAAA-BBBB-CCCC-DDDD-123456789"
 locale: 'en',
 translations: {
 en: {
 required: "Hey! That's required!",
 invalidDate: "Please enter a real date",
 submitText: "Custom Submit Button Text",
 submissionErrors:{ 
 MISSING_REQUIRED_FIELDS: "Please fill in all required fields!" 
 },
 fieldLabels: {
 email: "Electronic mail"
 }
 }
 }
 });
</script>

If you need to customise the form on several pages then I would create a Custom Module, that customises the embed code, so you can reuse it.

It took me a while to get my head around it but it was completely worth the effort - I do this all the time.

Have fun

Mike

6

Make sure you include the “,” after the Form ID or this won’t work.

7

Hi @Mike_Eastwood! Looking to do this on a form I made but I can’t find how to get the code added to the form. Is there a screenshot or screen recording that you can share?

8

@Mike_EastwoodI read your replies twice to make sure I did not miss anything. I do not see a solution for creating a custom error message for each required field. I only see a solution for customizing the error message for ALL fields (that’s generic). I need this:

First Name Field => Please fill in your first name.

Last Name Field => Please fill in your last name.

Company Name Field => Please fill in your company name.