At HubSpot, we're always trying to improve how both marketers and designers/developers work with the Content Optimization System. Today, we're introducing a new forms embed code that has a number of benefits over the previous version. In this post, we'll walk through the benefits of the new forms embed code and cover some of the technical changes in this new version.
Ready? Let's dive in.
Update: the new forms embed code is now live for all HubSpot customers.
What's new?
There are a number of new updates to the form embed code, including:
- Country-specific localization: You can now localize your forms for specific countries using "language-country" within the form.
- In-line thank you message support for forms embedded on external websites: You can now use in-line thank you messages within embedded forms.
- In-line error validation: In place of the bubble style error validation, error handling will be in-line with the field. If you have customized error styles you may have to redo them within .hsformerror.
- Internationalization of the date picker
In addition to the new form capabilities, there are some additional code-level changes that you should be aware of, including:
- Embedded forms no longer ship with jQuery by default. Although this was very rare, you should be aware in case you were depending on it.
- Deprecating "onBeforeValidationInit" as this step does not exist anymore. You should utilize "onFormReady" now.
- Some validation options are changing, in which the following code will change:
Former Code:
hbspt.forms.create {
validationOptions: {
errorClass: ‘errorClass'
messageClass: ‘messageClass’
grouped: false
lang: ‘zhHK'
}
Will now become:
hbspt.forms.create {
errorClass: ‘errorClass’
errorMessageClass: ‘errorMessageClass’
groupErrors: true
locale: ‘zh-hk'
}
- Some deprecated validation options include: offset, position, message, effect, formEvet, and InputEvent. Each of these are no longer supported with this new forms beta.
Current forms use current.js and will be upgraded to v2.js with this beta. This upgrade will happen automatically for COS forms.
Based on the upgrade to v2.js, if anything does break with the style of your form, it will automatically revert back to the default styling. None of these changes should impact or prevent form submission or the general operation of forms on your website.
All of these upgrades, internationalization, better form errors, and inline messaging set the stage for some much-anticipated form features.
Questions about the new forms embed beta? Let us know in the comments. In the meantime, check out other HubSpot updates.