Skip to main content

Custom Form - Basic

Using the Custom Form experience gives you complete control over the appearance and functionality (UI/UX).

In this example we'll cover a few scenarios, from the basic setup and into more advanced configurations that typically require a web developer.

note

Every example here will follow from the Getting Started guide. Be sure to read that first to get VTAGZ set up on your site.

Starting Point​

<html>
  <head>
    <script src="https://cdn.vtagz.com/vtagz.embed-1.8.0.js"></script>
  </head>
  <body>
    <script>
      VTAGZ.open({
        link: 'YOUR_CAMPAIGN_LINK',
      });
    </script>
  </body>
</html>

Adding our custom HTML form​

Let's create our HTML form. We need to tell VTAGZ to use the capture mode and connect a submit button.

Example
<body>
  <form>
    <div id="vtagz-container"></div>
    <button id="submit" type="button">
      Submit
    </button>
  </form>
  <script>
    const vtagz = VTAGZ.open({
      link: "YOUR_CAMPAIGN_LINK",
      containerId: "vtagz-container",
      submitButtonId: "submit",
      mode: "capture",
    });
  </script>
</body>
Result

That's it! Now our form is connected and we can enroll users. Follow along below for more advanced customizations.

tip

You'll notice that VTAGZ automatically handles form validation and has default messages for users (all of which can be customized).

Customizing the look and feel​

Default Text​

We can change the input's initial text by using the inputProps.phoneNumberPlaceholder setting

Example
<body>
  <form>
    ...
  </form>
  <script>
    const vtagz = VTAGZ.open({
      link: "YOUR_CAMPAIGN_LINK",
      containerId: "vtagz-container",
      submitButtonId: "submit",
      mode: "capture",
      inputProps: {
        phoneNumberPlaceholder: "My Custom Placeholder",
      }
    });
  </script>
</body>
Result

Styling​

We can also provide CSS rules to style the input's appearance. To do this we'll use the inputProps.style setting on the VTAGZ SDK.

Example
<body>
  <form>
    ...
  </form>
  <script>
    const vtagz = VTAGZ.open({
      link: "YOUR_CAMPAIGN_LINK",
      containerId: "vtagz-container",
      submitButtonId: "submit",
      mode: "capture",
      inputProps: {
        phoneNumberPlaceholder: "My Custom Placeholder",
        style: `
          label {
            display: block;
          }
          input {
            padding: 10px;
            font-size: 16px;
            border: 3px solid #CCC;
            width: 320px;
            color: #FFF;
            background: #333;
          }
          input:valid {
            border-color: green;
          }
          input:invalid {
            border-color: red;
          }
        `
      },
    });
  </script>
</body>
Result

Capturing email​

Example
<body>
  <form>
    ...
  </form>
  <script>
    const vtagz = VTAGZ.open({
      link: "YOUR_CAMPAIGN_LINK",
      containerId: "vtagz-container",
      submitButtonId: "submit",
      mode: "capture",
      captureEmail: true,
      inputProps: {
        phoneNumberPlaceholder: "Phone Number",
        emailPlaceholder: "Email (Required)",
        style: `
          label {
            display: block;
          }
          input {
            padding: 10px;
            font-size: 16px;
            border: 3px solid #CCC;
            width: 320px;
            color: #FFF;
            background: #333;
          }
          input:valid {
            border-color: green;
          }
          input:invalid {
            border-color: red;
          }
        `
      },
    });
  </script>
</body>
Result