Embed lead forms

1. Decide if you want to make completing a lead form optional or mandatory.
2. Grab the embed code from the form created in your marketing platform.
3. Select your template and open in edit mode. 
4. From the right hand toolbar click the Formsicon. This opens the Forms pane.
   
5. Complete the details.
   
   
   1. Enter a form name (#1).
   2. Paste the embed code from your marketing platform (#2).
   3. Enter a trigger (#3): on a screen, with a guide or Demo Floating Button. For a Demo Floating Button, enter the button text and set the button’s position.
   4. Set the Is the form mandatory toggle to ON if that’s what you want. 
   5. Select a guide (#4): Go to the guide you’d like to link it to, click the Link button, and select the form.
      
6. After submission (#5):  Select the option: Done (stay in screen) or select the relevant guide.
7. When the details are complete, click Save. The lead form shows in the right hand pane.

You’ll now find enriched demo data in Hubspot or Marketo, depending on your integrated platform.

NOTE: For each identified demo session your potential prospects view, we examine if there is a related lead already in our system. If such a lead exists, we update the demo information by:

• modifying lead attributes
• logging a new 'Demo View' activity

1. Select the template in Edit mode.
2. From the right hand toolbar click the Formsicon. This opens the Forms pane.
3. Select the screen, guide or Demo Floating Button to connect to the lead form.
   • If it’s connected to a screen, select the screen.
   • If it’s connected to a guide, then edit the Call to Action button and select the lead form. A confirmation message appears letting you know that the action will replace the original trigger.
     
   • If it’s a Demo Floating button, add the lead form to it.
4. Then, click Yes.
5. Check out the results by going to the new location.

1. Review the steps to create a Marketo lead form - see the article Forms API Reference (https://experienceleague.adobe.com/en/docs/marketo-developer/marketo/javascriptapi/forms-api-reference).
2. Follow the steps in the section Embed lead forms in demos (generic).
3. When a lead is generated, a Walnut activity is added to the contact and the contact attributes are updated with relevant demo data.

NOTES: 

• The enriched demo data appears in your Marketo account approximately two hours after the viewer completes the embedded lead form.
• If you have linked your Marketo form to different tools like ChillyPiper or Clearbit, you can also connect these tools to the form in the demo. To do this, include the necessary scripts along with the embed code in Walnut.
• Be sure you read the integration guide for each tool you add. Some tools might need you to load the script before or after Marketo, or set them up with the right Marketo ID.

MktoForms2.whenReady(function(form){

            const [_, search] = parent.parent.document.referrer.split('?');

                const params = new URLSearchParams(search);

                params.forEach((value, key) => {

                    document.querySelector(`input[name="${key}"]`).value = value;

                });

Learn more about embedding lead forms in Marketo

1. Follow the steps in the section Embed lead forms in demos (generic).
2. When a lead is generated, a Walnut activity is added to the contact and the contact attributes are updated with relevant demo data.
3. To customize the lead form add global CSS to the lead form code. For example:
   <div style="background-color: blue; padding: 20px; border-radius: 5px;">

NOTE: The enriched demo data appears in your Pardot account approximately two hours after the viewer completes the embedded lead form.

1. You must have experience of Pardot’s form settings and the relevant permissions.
2. Access your form. Log into your Pardot account and navigate to the form you want to edit.
3. Go to the form’s Settings and in step 3 change the look and feel. Click the Source icon to switch to the code view.
   
4. Copy this code and paste into the editor. This captures the email address.
   
   <script type="text/javascript">

var form = document.querySelector("#pardot-form");

 if (form) {

 form.addEventListener('submit', function (event) {

   var email = '';

   for (var i = 0, len = event.target.elements.length; i < len; i++) {

      var element = event.target.elements[i];

      if (element.value.includes("@")) {

         email = element.value;

         break; // Break the loop once the email is found

       }

      }

      window.parent.postMessage({ message: "PARDOT_DATA_READY", email: email }, "*");

});

}

</script>

5. Go to step 4: Completion Actions and open the Thank You Code tab.
   
6. Click the Source button and paste in this code to send a success message when a form is completed.
   
   <script> window.parent.postMessage({ message: "PARDOT_FORM_SUCCESS" }, "*");
   </script> 
7. Exit Source mode, then click Confirm & Save to save the changes to the form.

1. Follow the steps in the section Embed lead forms in demos (generic).
2. When a lead is generated, a Walnut activity is added to the contact and the contact attributes are updated with relevant demo data.
3. To customize the lead form add global CSS to the lead form code. For example:
   <div style="background-color: blue; padding: 20px; border-radius: 5px;">

NOTES: 

• The enriched demo data appears in your Hubspot account approximately two hours after the viewer completes the embedded lead form.
• If you have linked your Hubspot form to different tools like ChillyPiper or Clearbit, you can also connect these tools to the form in the demo. To do this, include the necessary scripts along with the embed code in Walnut.
• Be sure you read the integration guide for each tool you add. Some tools might need you to load the script before or after Hubspot, or set them up with the right Hubspot ID.