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