Skip to content

One form to rule them all: Reuse Marketing Forms Across Pages with Javascript

One thing I’ve often thought about—especially when working with Outbound Marketing—is how to integrate a marketing form in the easiest and most efficient way. For Outbound, I really liked using form captures. But when it comes to Real-Time Marketing, let’s be honest… I prefer creating my marketing form in Dynamics 365 and embedding them with the Javascript option on the website.

Most of my forms use a consistent set of fields, so duplicating them across websites is just extra work. My goal? One reusable form, embedded on multiple websites, that still lets me identify where each submission came from—so I can route leads into the right journey.

And yes, that’s totally possible—with one simple script. Let’s dive in!

Step 1: Create a marketing form

First things first:
Go to Feature switches and enable Custom unmapped fields. This allows you to add new custom fields to the form—which we’ll need later to pass dynamic campaign values.

Feature switch for custom unmapped fields

Create a new simple form and add a custom field of type Short Text. Name it something like Campaign, and hide the field from the user (I will not hide it yet for this demo purpose). Use a logical name like campaignValue. We’ll fill this hidden field dynamically via a Javascript we will add in the next step and it will be populated automatically. This same field will also be used for branching in your journey.

Marketing form with custom field for campaign

You can also add more hidden fields and fill them dynamically in the same way, depending on your use case.

Step 2: Add Javascript to the Marketing Form

Now let’s add a Javascript snippet to your marketing form. This script reads the campaign value from the website and injects it into the hidden field we just created.

Check my article if you need to know how to add Javascript to a marketing form: Read more.

				
					<script>
  (function () {
    /**
     * Retrieves the value of a the  attribute from the form container.
     * Falls back to <body> if #formContainer is not found.
     */
    function getAttributeFromPage(attribute) {
      const container = document.querySelector('#formContainer') || document.body;
      return container.getAttribute(attribute) || null;
    }

    /**
     * Finds the campaign input field in the form and sets its value from the attribute.
     */
    function injectFieldValues() {
      const campaign = getAttributeFromPage('data-campaign');
      const campaignInput = document.querySelector('[name="campaignValue"]');

      if (campaign && campaignInput) {
        campaignInput.value = campaign;
      }
    }

    /**
     * Uses MutationObserver to wait for the form to become available in the DOM.
     * Once the form is detected, it injects the campaign value.
     */
    function watchForFormLoad() {
      const observer = new MutationObserver((mutations, obs) => {
        const formReady = document.querySelector('[data-targetproperty]') && document.querySelector('.submitButton span');

        if (formReady) {
          injectFieldValues();
          obs.disconnect(); // Stop watching once we're done
        }
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    }

    /**
     * Waits for Marketing form load event before starting.
     */
    document.addEventListener('d365mkt-afterformload', function () {
      watchForFormLoad();
    });
  })();
</script>

				
			

Step 3: Embed the Form on Your Website

Once your form is ready, publish it and go to the publish options. From there, simply copy the embed Javascript code. You’ll use this same script on any page where you want the form to appear.

Publish options to embed marketing form with javascript

Your embed code should look something like this:

				
					<div
data-form-id='4fe1d6e7...46c848'
data-form-api-url='https://public-eur.mkt.dynamics.com/api/v1.0/orgs/f3be5b81-...248550/landingpageforms'
data-cached-form-url='https://assets1-eur.mkt.dynamics.com/f3be5b81-06a3-ef11-8a66-000d3a248550/digitalassets/forms/4...46c848' ></div>
<script data-minify="1" src = 'https://paulinekolde.info/wp-content/cache/min/1/eur/FormLoade/FormLoader.bundle.js?ver=1744573451'  data-rocket-defer defer></script>
				
			

Now here comes the magic:
Just add a <div> above your form script with a data-campaign attribute. This is where you define the campaign value for that specific page:

				
					<div id="formContainer" data-campaign="SpringCampaign2025"></div>
				
			

Tip: You can extend this by adding more data-* attributes (e.g., data-website=”xyz”) and handle them with additional JavaScript in the marketing form if needed.

On my WordPress site, it looks exactly like this—and works seamlessly:Screenshot from wordpress to embed a marketing form

 
 

Step 4: Create a Journey with Attribute Branches

Now that your form submits a hidden campaign value, let’s create a journey that responds differently based on that field.

  1. Start with the Marketing Form Submitted trigger.
  2. Add an attribute branch.
  3. Set conditions based on the submitted Field Localized Name. You can find this name in the field submission table of the form submission record.

Field submission with field localized name and field value

 

Use the Form Submission Field Snapshot to define the condition. Use the contains operator, and add the field name and value (e.g., campaignValue: SpringCampaign).

Attribute branch for form submission in journey

That way, the same form can drive different email journeys—depending on the website where it was embedded.

Journey with marketing form submitted trigger and attribute branch

Summary

And that’s it!
Now you’ve got one marketing form you can embed across multiple websites—while still tracking where each contact comes from. This lets you personalize the journey and keep your form management clean and scalable.

You can use this method with any hidden field and value. The possibilities are endless—so get creative!

Final Thought

You might be wondering: why not just use UTM parameters?

While UTM parameters are great for tracking customer acquisition sources, this method focuses on form organization and experience personalization. Instead of managing multiple forms for each use case, you maintain just one—and inject dynamic behavior with Javascript.

You think the post can also help others? Share it on LinkedIn:

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress Cookie Notice by Real Cookie Banner