Latest COS Design Blogs

Designers Blog

Introducing a New and Improved HubSpot Forms Embed Code 

Written By Jeffrey Vocell on Jun 17, 2015 3:28:00 PM

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.

Subscribe to HubSpot's Designer Blog

Jeffrey Vocell

Jeffrey Vocell is a Product Marketing Manager at HubSpot. Jeffrey is passionate about aviation, tech, and inbound marketing. Connect with him on Twitter @JVocell.

Search HubSpot Designers Site