Hardcoding Affiliate IDs in the Mailvio Forms

Hardcoding Affiliate IDs in the Mailvio Forms


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.

Notes
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. 
    Warning
    If you choose the Design Template, Mailvio will force double opt-in, and it cannot be reverted.
  1. Upon skipping the "Design Template" (Step 4), also bypassing the Step 5, you will proceed directly to Step 6, where you will copy the Form's code and paste it in Convertri.
  2. Click the "Finish" button.

Step 4: Embed the Form in Your Landing Page
  1. You've already copied the Form's generated HTML Embed Code from Mailvio.
  2. In Convertri, insert an HTML element.
  3. Click on the "Edit HTML" button and paste the HTML code.
  4. Click "Save" and "Publish" the page.

Step 5: Locate the Hidden Field Name Using DevTools
  1. Open the live page in a browser.
  2. Press F12 to launch DevTools.
  3. Inspect the form and find the hidden custom field, the value of the Affiliate ID. 
E.g.: <input name="customField-567444" type="hidden" value=" {JVZ-REPLACE}">
  1. What's important is to copy the exact name attribute of that hidden field.
E.g.: customField-567444 (may vary per form)



Step 6: Add Custom Script in Convertri
  1. In Convertri, go to the page settings for the same landing page.
  2. Locate the "Custom Scripts" area (usually under "Page" settings).
  3. Create a new script and make sure it is placed in the 'body' and not the 'head'.
  4. Paste in the following JavaScript (replace placeholder as needed):
<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.
Notes
After submitting it can sometimes take a few minutes for the contact to show in the selected group in Mailvio.

    • Related Articles

    • Design your signup forms

      How to Add a Signup Form? Step 1: Before you begin, you must make sure you are logged in to the MAILVIO control panel. Step 2: Once logged in to the MAILVIO control panel, click the "SIGNUP FORMS" tab at the top of the screen. Step 3: On the Signup ...

    • How to embed forms on any site

      Mailvio offers a straightforward process for embedding signup forms on various platforms, allowing you to seamlessly integrate your email marketing efforts. In this guide, we will walk you through the steps to embed signup forms using Mailvio. Step ...

    • Mailvio integration with Digioh

      What Digioh do? Digioh allows you to easily build email capture forms, surveys, preference centers, and landing pages integrated with Mailvio. Digioh offers hundreds of form themes and supports multi-step forms, capturing phone numbers, and forms ...

    • How to embed forms on a Kyvio 3 funnel

      In this guide, we will walk you through the steps to link your Mailvio forms or Mailvio Optin signup forms to Kyvio 3. Please note that Kyvio 3 currently only accepts simple HTML forms. Before proceeding, ensure that you are logged into both your ...

    • Mailvio integration with Convertful

      What Convertful do? Convertful is an on-site conversion tool that enables marketers to create and target personalized offers based on a visitor's segment and stage using a range of tools like a sign-up forms editor, responsive templates, advanced ...