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


#1

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


#2

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


#4

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

Thanks in advance


#5

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.


#6

But how to trigger onFormsubmit event from custom form submit button.I tried by ('#formid).submit(); it hits hubspot submit button and displayed form related validation messages (as i didn't hide the hubspot form to track what exactly happens here) but control never goes into onFormSubmit section of hubspot embed form section,as i have set value for hubspot form fields here, as you mentioned earlier reply( (question_id +' input').val(question_val).change():wink: .also i want to know what about hubspot form validation if i use custom form.


#7

You wont be able to use hubspot form validation since the form wont be visible. it would just end up not submitting and people would not know why. So you need to make your own validation before submitting it. Is the issue your having that it is not entering the values into the right fields? or that there is no onFormSubmit actions happening at all? You could try putting in a console.log('form trigger'); message it see if it has triggered. I thought onFormSubmit was supposed to happen before validation but maybe it doesn't that is why it is stopping the submit. I usually just turn off all required fields in the hubspot form and do my own validation.


#8

Same thing i have do earlier, here i have triggered ('#formid).submit(); on custom form submit button.Here formid will be id of the hubspot form.But console not print Form submit'
hbspt.forms.create({
portalId: "xyz",
formId: "xyz",
target: '.xyz', // this section here tells the form where to load
onFormSubmit: function(form) { // (question_id +' input').val(question_val).change();
console.log(' Form submit');

} 

});