Form with unique ID

mzebib68
Contributor

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

6 Replies 6
TiphaineCuisset
Community Manager

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


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


tjoyce
Recognized Expert | Platinum Partner

@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
Contributor

@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

 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@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
Contributor

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.

0 Upvotes
mzebib68
Contributor

@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


image.png

 

thanks

0 Upvotes