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 some UI aspects VTagz provides control over.

Install​

npm install --save @vtagz/web-sdk-react

Adding our CustomForm component to our form​

Let's add the VTagz CustomForm component to get started. At this point we will just render the experience, but nothing is connected.

Example
import { CustomForm } from '@vtagz/web-sdk-react';

function Index() {
  return (
    <form>
      <CustomForm link='YOUR_CAMPAIGN_LINK' />
      <button type="button">
        Submit
      </button>
    </form>
  );
}
Result

You will notice that if we press "Submit" nothing happens. We need to use the useFormApiRef hook to send a signal when the button is clicked. Let's go over this in the next step.

Connect the component to our submit button​

Example
import {
  CustomForm,
  useFormApiRef
} from '@vtagz/web-sdk-react';

function Index() {
  const apiRef = useFormApiRef();
  return (
    <form>
      <CustomForm 
        link='YOUR_CAMPAIGN_LINK'
        apiRef={apiRef}
      />
      <button
        type="button"
        onClick={() => apiRef.current.submit()}
      >
        Submit
      </button>
    </form>
  );
}
Result
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.placeholder setting

Example
import {
  CustomForm,
  useFormApiRef
} from '@vtagz/web-sdk-react';

function Index() {
  const apiRef = useFormApiRef();
  return (
    <form>
      <CustomForm 
        link='YOUR_CAMPAIGN_LINK'
        apiRef={apiRef}
        inputProps={{
          placeholder: 'My Custom Placeholder',
        }}
      />
      <button
        type="button"
        onClick={() => apiRef.current.submit()}
      >
        Submit
      </button>
    </form>
  );
}
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
import {
  CustomForm,
  useFormApiRef
} from '@vtagz/web-sdk-react';

function Index() {
  const apiRef = useFormApiRef();
  return (
    <form>
      <CustomForm 
        link='YOUR_CAMPAIGN_LINK'
        apiRef={apiRef}
        inputProps={{
          placeholder: '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;
            }
          `
        }}
      />
      <button
        type="button"
        onClick={() => apiRef.current.submit()}
      >
        Submit
      </button>
    </form>
  );
}
Result