Form with unique ID

SOLVE
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

1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

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];

 

View solution in original post

8 Replies 8
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
tjoyce
Solution
Recognized Expert | Platinum Partner

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];

 

View solution in original post

mzebib68
Contributor

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

 

0 Upvotes