Form Prefill Functionality is not working in embed form

[Anonymous]

Hi

I have used the embed code of the form in the marketo LP and to prefill the form I am using rest API's of the marketo but I am getting the error " No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.".

Please let me know if anyone has solved this type of problem.

[Anonymous]

Checkout this script: MarTech/Form-Prefill

It prefills embedded Marketo forms using AJAX request to a native Marketo landing page, so you don't need to code anything or use the REST API to query the lead's data.

I'd love to hear your feedback!

[SanfordWhiteman]

Marketo changed their CORS policy?

[Anonymous]

I would apreciate if form-prefill would work in external embedded forms.

Or is there another solution to use the prefill function in external pages?

[SanfordWhiteman]

There's a method I've used w/my clients for the last couple of years and I'm getting tired of teasing it -- before EOY I'm going to open the source.

[Anonymous]

Hi Sandford, I would be happy if you would share your code here 🙂 Best Johanna

[SanfordWhiteman]

It'll be on my blog, but it will be shared.

[Scott_McKeighe2]

Have you released this from the lab yet? Asking "for a friend"

[SanfordWhiteman]

Couple of commercial proposals are still open w/clients... wouldn't be right to open-source it just yet.

[SanfordWhiteman]

You mean coercing "1" and "" to true and false?

[Anonymous]

yes.

[SanfordWhiteman]

{

  myBooleanField: !!+"{{Lead.Boolean Field}}"

}

[Anonymous]

Hi All

I am prefilling around 40 fields with the above method and out of 2 fields are not prefilling. I am using the correct API Name and 1 of them is  Company name and 1 is the custom field. Could you please help me in this case.

[SanfordWhiteman]

Need more info.  What distinguishes the fields that aren't working? What's the exact output into the JS? Are there syntax errors?

[Anonymous]

There is no error in the script. There is no difference in all fields. I am using the same method as  Company:  "{{Lead.Company Name}}",

but for the company field, it's not working.

[SanfordWhiteman]

It's

     {{Company.Company Name}}

[SanfordWhiteman · Accepted solution]

I have used the embed code of the form in the marketo LP and to prefill the form I am using rest API's of the marketo but I am getting the error " No 'Access-Control-Allow-Origin' header is present on the requested resource.

Never, ever, ever even think about exposing the REST API directly from a webpage.  The security and reliability consequences are absurd.  Honestly, you should shut down your web presence before considering this.

In your case, there's no need to consider this.  If it's a Marketo LP using the embed code instead of a named Form element (not advisable, but you can do it if you insist) then you can for the most part fill the form using tokens:

MktoForms2.whenReady(function(form){
  form.setValues({
    LastName : "{{Lead.Last Name}}"
  });
});

Also be aware that multiple Marketo forms with the same ID on the same page have subtle problems (yes, even if one of them is set to display: none;). You can check some of my posts here for pointers.

[Anonymous]

Sanford, Do you have a suggestion on where to use form.setValues() within the 2-step-form script you created (which is working great btw)? I really only need to pre-populate the first form if that would make a difference.

[Anonymous]

Working for me so far here,

      /* --- NO NEED TO TOUCH ANYTHING BELOW THIS LINE */

      // utility fns

      var injectMktoForm = function(parentEl, insertBeforeEl, instanceHost, munchkinId, formid, onReady) {

        var formEl = document.createElement('FORM');

        formEl.id = 'mktoForm_' + formid;

        try {

          parentEl.insertBefore(formEl, insertBeforeEl)

        } catch (e) {

          parentEl.appendChild(formEl)

        }

        MktoForms2.loadForm.apply(MktoForms2, Array.prototype.slice.apply(arguments, [2]));

      }

        MktoForms2.whenReady(function(form){

form.setValues({ 

          LastName : "{{Lead.Last Name}}",

          FirstName : "{{Lead.First Name}}",

          Company: "{{Company.Company Name}}",

          Email: "{{Lead.Email Address}}",

          Phone: "{{Lead.Phone Number}}"

      }); 

      });

      var ejectElement = function(formEl) {

        formEl.parentNode.removeChild(formEl);

      }

      var arrayPushGet = function(ary, pushable) {

        return ary[ary.push(pushable) - 1];

      }

[Mark_Brailsford]

Ryan,

This looks like what I need. A couple of questions:

1. Is this script a replacement for the provided embed code?
2. I would replace instanceHost, munchkinId, formid with the values from the embed code?
3. I would just need to replace the field token pairs?

[SanfordWhiteman]

OK, so... what's the question?