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]

Just to clarify. Are you using the embed code in a Marketo LP or in a Web Page? You don't need an embed code to display a Marketo form in a Marketo LP, just add a form: Landing Page with a Form - Marketo Docs - Product Docs

Then you select the option to prefill the form.

[Anonymous]

I am using the embed code in marketo LP because I am working on some functionality which requires 2 same form with a different layout in desktop and mobile view which is not possible in adding the form functionality.

[Josh_Hill13]

Please send us a link or clearer explanation.

• Marketo hosted Landing Page must use the native Form
• Embed code is for external sites. This code does not support all functions like prefill.
• Custom Form - you can write code to do special things, but that's up to you.
• CSS Mods - if you are having trouble with responsive, then you need CSS and other mods. You shouldn't need to re-code the entire Form.

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

Thanks, Sanford.

Could you please help me to assign the checkbox values also.

[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.

[SanfordWhiteman]

Which one is that?  Can you open a new thread and point to your running code?

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

      }

[SanfordWhiteman]

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