Want to create country dropdown that contains both country flag and country name in a form

nutan1 · ‎Dec 12, 2018

I want to create form that contains country dropdown with country flag and country name.To do that i check hubspot default properties as well as try to create custom property.But it doesn't work for my requirement.I have a solution to create custom html form for that and submit form with the help of add contact api in hubspot.Is it a right solution or any other option in hubspot to do that.All country related data get from api with ajax call . I want solution to work with attached form.Check attachment for same

Manobyte · ‎Dec 12, 2018

I have created a few custom forms using the form embed code, then hiding the huspot form. You can trigger the submit for the hubspot from from your custom html forms submit button and using an on submit to enter values from your custom form into the hubspot form.

hbspt.forms.create({
      portalId: '',
      formId: '',
      onFormSubmit: function($form) {
        $(question_id +' input').val(question_val).change();
        } 
});

here is some more information on editing hubspot form embeds https://developers.hubspot.com/docs/methods/forms/advanced_form_options

nutan1 · ‎Dec 13, 2018

I am still confused with given solution.Can you provide me in detail.

Thanks in advance

Manobyte · ‎Dec 13, 2018

The solution I was talking about would mean that you would build the form in both the hubspot form editor and and create a custom html one. The custom html one would be the one that people see and interact with, while the hubspot form would be loaded in with the embed code but hidden with your css. You can add a target to the embed code to tell it where to load so if you did something like this

hbspt.forms.create({
      portalId: '',
      formId: '',
      target: '.hidden-form', // this section here tells the form where to load
      onFormSubmit: function($form) {
        $(question_id +' input').val(question_val).change();
        } 
});

and then in your css you can make .hidden-form { display: none; }
you can then manipulate the values of the hubspot form in the onFormSubmit section so that when it submits it will submit the values from your custom html form.

I hope this helps, but if you have a solution that is working im not sure that this is necessarily a "better" way to do it, just a different way. So if you dont understand it I think it is fine to continue using the api.

APIs & Integrations