In this guide, we will walk you through the integration of opt-in forms with affiliate IDs for effective marketing strategies. We will show you the detailed process of hardcoding affiliate IDs in Mailvio forms, designed for pre-launch scenarios and essential use cases. By embedding Mailvio opt-in forms in renowned landing page builders like Convertri, you can achieve secure and efficient data capture during crucial stages of your marketing campaigns.

In this example we're using Convertri as our page builder, instructions will differ a bit depending on which website/funnel builder you are using but it will be similar enough for you to set it up still.

Step 1: Create a New Form in Mailvio

1. Log in to your Mailvio account.
   
2. Open the Email Module and navigate to "Forms."
   
3. Click "Create Form" button.
   
1. Select the group list where the contacts will be added.
   
4.  Choose Regular Form and proceed to form customization.
   
   

Step 2: Choose "Embedded" (NOT Hosted) for Code

1. Do not select the "Hosted" option.
   
2. Go to “Embedded” and customize:
   
1. Match design styles (colors, font, button, etc.)
   
3. Confirm your choices.
   
4. Give your form a clear, descriptive name (e.g., Prelaunch Form) — avoid default names like "New Form."
   
5. Click the "Save & Continue" button.
   

Step 3: Configure Fields and Hidden Input

1. Step 1 of the form creation:
   
1. Add Fields:
   
1. First Name (set to "Required").
   
2. Email Address (also "Required").
   
2. Add a Hidden Input:
   
1. Drag and drop the "Hidden Input" element.
   
2. Set the name to your chosen identifier or "Field" (we used Jvzoo_ID in this sample).
   
3. You can leave the "Field Value" blank or insert placeholder text for visual testing (we used JVZ-REPLACE in this sample).
   
4. Click the "Save & Continue" button.
   
2. Skip Steps 2 and 3 by clicking on the "Next" button.
   
3. Skip "Design Template" (Step 4) to avoid getting locked into double opt-in. 
   

   

   If you choose the Design Template, Mailvio will force double opt-in, and it cannot be reverted.

E.g.: <input name="customField-567444" type="hidden" value=" {JVZ-REPLACE}">

E.g.: customField-567444 (may vary per form)

<script>

(function () {

  function getParam(name) {

    const u = new URL(window.location.href);

    return u.searchParams.get(name) || "";

  }

  const aid = getParam("aid");

  const selector = '[name="customField-557444"]'; //replace customField-557444 with the element name that you have!!

  function setValue() {

    const fields = document.querySelectorAll(selector);

    if (!fields.length) return false;

    fields.forEach((f) => {

      // Set value

      f.value = aid;

    });

    console.log("Filled", fields.length, "field(s) with aid:", aid); //this line can be removed if you want

    return true;

  }

  // Try now

  if (setValue()) return;

  // Observe DOM until it shows up

  const obs = new MutationObserver(() => {

    if (setValue()) obs.disconnect();

  });

  const start = () => {

    if (!document.body) return setTimeout(start, 25);

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

  };

  start();

})();

</script>

Step 7: Test It

1. Open the page and append an affiliate ID to the URL. E.g.: https://getquickvsl.com/intro?aid=457438567438
   
2. Press F12 and check the form input.
   
3. Confirm that the hidden field value = 457438567438.
   
4. Submit the form — the contact should be saved with the correct affiliate ID.
   

NOTE: due to browser caching each time you test and make a change you need to change the aid= value otherwise you won't see the change.

After submitting it can sometimes take a few minutes for the contact to show in the selected group in Mailvio.