Lightbox Forms: Can we append custom HTML and why no prefill?

[Robb_Barrett]

Wondering if anyone <cough>Sanford Whiteman​ </cough> has an example of appending custom HTML to a lightbox.  I'd like to put program-specific information on the top of the lightbox, such as "Fill out this form to learn more about ABC..."

Also, why no prefill on Lightbox forms embedded on a Marketo LP?

This is kind of a dealbreaker for using the Lightbox function.  It might be better to replicate with CSS.

[Geoff_Krajeski1]

Yes, we are doing this at PR Newswire.

To prefill the lightbox we're using Forms 2.0 and custom JS to do the fill.

See here: Engage in Social Conversations around a Brand​ as the first example, then go here: Media Monitoring Solutions Buyer’s Guide | PR Newswire

[Geoff_Krajeski1]

Although, this is on our website, and not LPs, but definitely a solid alternative.

[SanfordWhiteman]

How are you managing DoS attacks against your API call limit tho...

[Robb_Barrett]

Geoff, this is exactly what I need. How did you achieve the header? Is that Rich Text on the form?

[Robb_Barrett]

Looks like this was all done in Bootstrap. Nice, but I don't have that luxury.

If I'm reading it correctly, you create the Modal Dialog div and put the form in the div. The form actually renders immediately but you slow down it's display by fading in the Modal.  When you submit the form, you hide the modal information as well.

You're not using the Lightbox option, if I'm not mistaken.  You're creating your own lightbox through CSS and Jquery (which is like graffiti to my eyes...you kids.)

This is an option for sure, but I wanted to see if I could use the built-in Lightbox function instead of writing my own.

[Geoff_Krajeski1]

Yes, that seems to be correct after I actually reviewed our code.

We use the forms on our site vs. LPs as there is more brand equity and CMS leverage for gated articles and such.

[SanfordWhiteman]

Prefill works automatically on lightboxed forms, but you have to use a true Form (mktoForm) Element + MktoForms2.whenReady(). If you use the embed code it'll be treated as foreign JS with no special treatment.

If you must use the embed code on an LP for some reason, you can still use prefill. Create the window.mktoPreFillFields object w/tokens. I posted an example some time back.

[Robb_Barrett]

OK, here's the code I'm using which is the same code I use on other pages, with the addition of the lightbox line. Are you saying that I want to replace the form.vals (or encapsulate it within) a whenReady()? Or is the problem that I'm showing the lightbox too early?

function showMainForm() {

  document.getElementById("form-div").innerHTML = document.getElementById("form-html").innerHTML;

    MktoForms2.loadForm("//app-sj02.marketo.com", "005-SHS-767", {{my.Form ID}},

      function(form) {

      MktoForms2.lightbox(form).show();

      form.vals({"web_capture_country":"{{lead.Web Capture Country}}",

        "Phone":"{{lead.Phone Number}}",

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

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

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

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

                 "City":"{{lead.City}}",

                 "web_capture_state":"{{lead.Web Capture State}}",

                 "Title":"{{lead.Job Title}}",  

                 "PostalCode":"{{lead.Postal Code}}",

                 "Address":"{{lead.Address}}",

                 "form_product_interest":getFPI(),

                 "formProgramID": getCampID(),

                 "flexField1": getDPI(),

          "facility_type":"{{lead.Facility Type}}"

                });

      var formEl = form.getFormElem()[0];

  MktoForms2.whenReady(function(form){

     document.getElementById("mktoForm_{{my.Form ID}}").setAttribute("autocomplete","on");

     document.getElementById("Email").setAttribute("autocomplete","email");

      document.getElementById("Phone").setAttribute("autocomplete","tel");

      document.getElementById("FirstName").setAttribute("autocomplete","given-name");

      document.getElementById("LastName").setAttribute("autocomplete","family-name");

      document.getElementById("Company").setAttribute("autocomplete","organization");

      document.getElementById("City").setAttribute("autocomplete","address-level2");

      document.getElementById("web_capture_state").setAttribute("autocomplete","address-level1");

      document.getElementById("Title").setAttribute("autocomplete","organization-title");

      document.getElementById("PostalCode").setAttribute("autocomplete","postal-code");

      document.getElementById("Address").setAttribute("autocomplete","street-address");

        });     

      form.onSuccess(function() {

          window.location.assign(LinkURL);

    return false;

      });

    });

  }

[SanfordWhiteman]

There's no reason manually setting the field values from tokens (which you were already doing, now that I remember) won't work with a lightbox. Check here: MktoForms2 :: nation.marketo.com/thread/3473​.

While someone reading the code might think it makes more sense to set the values before loading the lightbox, it makes no real difference. Also no problem injecting HTML, as I also show in the demo link. I suspect something else is going on on this page (maybe a JS syntax error). If you post the real URL I can tell ya.