CMS Development

lucabartoli
Member | Diamond Partner
Member | Diamond Partner

Custom Form validation

Hi all,

We need to create a form with custom fields with custom validation.

It is possible to get all field options from a Json webservice from our client (we can also develop another endpoint with a different data representation).

 

We have three fields.

The first field is a list of region, the second field (Centers) depends on the first and the third one (Provinces) depends on the second and is mandatory only in some cases (in the other cases it should be hidden).

 

To better explain, this is a simplified version of our json:

{
	"Region1": [
		{
			"name": "Option1",
			"province": [
				"Option1.1",
				"Option1.2"
			]
		},
		{
			"name": "Option2",
			"province": null
		},
	],
	"Region2": [
		{
			"name": "Option3",
			"province": null
		},
		{
			"name": "Option4",
			"province": [
				"Option4.1",
				"Option4.2"
			]
		}
	]
}

The logic I have to reproduce is the following:

  1. Only Region and Center fields are visible. Region Contains "Region1" and "Region2" and the second is empty with a placeholder
  2. The user selects "Region1", the Center field get populated with "Option1" and "Option2".
  3. If the user selects "Option1" the Province field appears with options "Option1.1" and "Option1.2" (its province field children) (mandatory). The user can't submit the form without selecting a valid Province between the two availables.
  4. If the user selects "Option2" the Province field doesn't show (or disappear) (because "province" is null inside the Json) and the user can submit the form

Any suggestion?

 

We already did this kind of logic on other platforms, but hubspot seems to be quite restrictive on form logic.

For example, a field depending on another one can't have depending fields, so we can't recreate the form fields directly.

We are considering to do this in javascript, but hubspot forms run in ReactJS and we don't know if it's possible to interact with the React layer, without causing any issue.

In addiction, these options can change often, but we don't want to update the contacts already in "Contact", we only want to update form fields.

 

Our best scenario is to be able to insert a javascript function to populate and validate this data, retrieving the json from the endpoint in realtime every time the form is shown.

Eventual lack of server side validation could be considered.

 

Thank you all

1 Reply 1
Anonymous
Not applicable

Custom Form validation

Hey @lucabartoli are you using HubSpot's Forms API? If so, you might find further assistance here.

0 Upvotes