Form with unique ID

[mzebib68]

how is it possible to create a form that is not change form & field IDs everytime we are editing the landing page?

I'm trying to implement a linkedin Autofill process on my LP but I need form and field IDs to be referenced in my script to make it work.

did anyone experienced the same issue?

thanks

Michael

[TiphaineCuisset]

Hi @mzebib68 

Thank you for reaching out. 

I want to tag some of our experts on this - @tjoyce @MatthewShepherd do you have any thoughts for @mzebib68 on this?

Thank you!

Best

Tiphaine

[tjoyce]

@mzebib68 - you would use the global javascript events for the forms. As you can imagine, the ID's cannot truly be locked because of the ability to add the same form to a page multiple times... this will cause invalidation because you can't have the same ID in a page twice.... try something like this

window.addEventListener("message", function(event){
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    var $form = $('form[data-form-id="' + event.data.id + '"]');
    var $firstName = $form.find('name=["first_name"]');
    $firstName.val(linkedInAutofill.first_name);
  }
});

[mzebib68]

@tjoyce thanks for your fast answer but in my scenario I need to extract the Hubspot form ID and replace in the script below all "12345" :

<script type="IN/Form2" data-form="12345" data-field-firstname="firstname-12345" data-field-lastname="lastname-12345" data-field-email="email-12345" data-field-company="company-12345" data-field-title="12345" data-field-country="country-12345"></script>

the goal is for the HS form to be filed with values from LinkedIn, not the opposite....

do you know how I can procede?

Thanks

Michael

[tjoyce]

@mzebib68 - It would be something like this 

window.addEventListener("message", function(event){
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    var formID = event.data.id;
    var s = document.createElement("script");
    s.type = "IN/Form2";
    s['data-form'] = formID;
    s['data-field-firstname'] = 'firstname-'+formID;
    s['data-field-lastname'] = 'lastname-'+formID;
    s['data-field-email'] = 'email-'+formID;
    s['data-field-company'] = 'company-'+formID;
    s['data-field-title'] = formID;
    s['data-field-country'] = 'country-'+formID;
    $("head").append(s);
  }
});

However, you specifically say that 

"the goal is for the HS form to be filed with values from LinkedIn, not the opposite....

do you know how I can procede?"
Which would be accomplished by my original answer

[mzebib68]

thanks @tjoyce,

I'm following LinkedIn guidelines in order to get the autofill option on our LP like they do here: https://business.linkedin.com/marketing-solutions/cx/17/02/the-sophisticated-marketers-guide-to-link... 

I'll test it and let you know if it solved my issue.

[mzebib68]

@tjoyce , in the scrript above do you know how to get the formInstanceID?

I noticed that fields ids are following this naming convention: <field-label>-formID-formInstanceID

thanks

[tjoyce · Accepted solution]

I'm not sure of a good way of getting the instance id without parsing one of the form's fields

something like

var forAttr = $form.find('input[name="first_name"]').attr('for');
var instanceID = forAttr.split("_")[1];

[mzebib68]

Thanks @tjoyce  & @TiphaineCuisset  we were able to customize the script as they suggest but it's not yet working.

I've the feeling the problem comes from Linkedin as the initial script we are loading that is not personalized with our form data doesn't render what it's supposed to do....

Thanks again for your help in this custoimization query.

Best

Michael