Marketo

A breakdown of our Marketo form needs, how we use them now, and what an ideal setup would look like.

Rundown

How we use Marketo in Webflow

All of our web forms are generated in Marketo. What we do in Webflow is simply embed scripts that will display these forms on page load, with a custom stylesheet to make the forms look more on-brand.

Actual form content and fields = Marketo
Form and fields styling and positioning = Webflow

In Marketo, we're able to add all sorts of field types to a form, mark them as required or not, and control what happens on form submission.

Resources:

‍Marketo forms JS documentation

Marketo forms JS examples

Leandata BookIt documentation

Marketo form styling in Webflow

The basic form

1-step Marketo form

<!-- Load Marketo -->
<script src="//people.lattice.com/js/forms2/js/forms2.min.js"></script>

<!-- Marketo form wrapper -->
<div id="marketo-form">
  <form id="mktoForm_1684"></form>
</div>

<!-- Marketo form script -->
<script>
MktoForms2.loadForm("//people.lattice.com", "372-AAD-485", 1684);
</script>

Let's get some bookings!

Content download form + cookies + instant ungating

<!-- Load Marketo -->
<script src="//people.lattice.com/js/forms2/js/forms2.min.js"></script>

<!-- Marketo form wrapper -->
<div id="marketo-form">
  <form id="mktoForm_1234"></form>
</div>

<!-- Marketo form script -->
<script>
  MktoForms2.loadForm(
    "//people.lattice.com",
    "372-AAD-485",
    1234,
    function (form) {
      // Select the demo request checkbox within the form
      var demoCheckbox = form
        .getFormElem()
        .find('input[name="Content_Demo_Request_LD_Special_Route__c"]');

      form.onSuccess(function (vals, followUpUrl) {
        // On succesful submit
        FxGlobalSubmit();

        // Tracking code for all submissions
        try {
          heap.track("content-ungate", {
            formid: "1234",
            contenttype: "TYPE",
            contentname: "TITLE",
          });
        } catch (e) {
          console.log("Heap didn't load");
        }
        try {
          intellimize.sendEvent("content-ungate", { value: "TYPE" });
        } catch (e) {
          console.log("Intellimize didn't load");
        }
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: "content-ungate",
          formid: "1234",
          contenttype: "TYPE",
          contentname: "TITLE",
        });

        // Check if the demo request checkbox is checked
        if (demoCheckbox.is(":checked")) {
          // If checkbox is checked
          FxDemoSubmit();

          // Additional tracking for demo requests
          try {
            heap.track("template-demo", {
              formid: "1234",
              contenttype: "TYPE",
              contentname: "TITLE",
            });
          } catch (e) {
            console.log("Heap didn't load");
          }
          try {
            intellimize.sendEvent("content-demo", {
              value: "TYPE",
            });
          } catch (e) {
            console.log("Intellimize didn't load");
          }
          window.dataLayer.push({
            event: "content-demo",
            formid: "1234",
            contenttype: "TYPE",
            contentname: "TITLE",
          });

          // Add hidden fields
          form.addHiddenFields({
            Demo_Form_Submission_Date_Time__c: new Date().toISOString(),
          });

          // Prevent redirections
          return false;
        } else {
          // If checkbox is not checked
          FxContentSubmit();

          // Prevent redirections
          return false;
        }
      });
    }
  );
  
  // Define dynamic cookie name
	var CookieName = 'content_ungate_SLUG';
	
	// On page load, check for cookie
	document.addEventListener('DOMContentLoaded', function() {	
	  // If cookie exists, ungate immediately
	  if (getCookie(CookieName)) {
	    FxGlobalSubmit();
	  }
	});

  // Actions to run when the form is submitted
  function FxGlobalSubmit() {
  	// Hide
    document.getElementById('gate-form').style.display = 'none';

    // Show
    document.getElementById('gate-rich').classList.remove('w-condition-invisible');
    document.getElementById('gate-toc').classList.remove('w-condition-invisible');
	document.getElementById('gate-thanks').style.display = 'flex';
    
    // Click
    document.getElementById('gate-download').click();
    document.getElementById('gate-doc').click();
        
    // Scroll
	document.getElementById('gate-anchor').click();
    
    // Set cookie
    setCookie(CookieName, 'true', 365);
  }

  // Actions to run when the form is submitted AND the demo request is checked
  function FxDemoSubmit() {
    // Show
    document.getElementById('gate-title').style.display = 'flex';
  }

  // Actions to run when the form is submitted BUT the demo request is NOT checked
  function FxContentSubmit() {
    //
  }
</script>

Lattice

Témoignages clients

Marketo