Collect the respondent's IP address

Privacy and security: capturing the visitor’s IP address has privacy implications. Make sure to inform users and obtain consent where it’s required.

This example requires a custom domain and code injection. Paste the snippet below into the Code injection box of your custom domain settings, and replace the input’s ID with the one from your form.

Add a Short text field at the beginning of your form — this is what we’ll write the IP into.
Open the form in preview mode and grab the input’s UUID from the rendered HTML.
Paste the script and swap in the UUID.

const getIPAddress = async () => {
  try {
    const response = await fetch('https://api.ipify.org?format=json');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data.ip;
  } catch (error) {
    console.error('Error fetching the IP address:', error);
    throw error;
  }
};

document.addEventListener('DOMContentLoaded', async () => {
  // Replace this UUID with the one of the Short text field you added
  const ipInput = document.getElementById('c1cbc8e4-b2f3-4e63-a683-ec9eadbcb022');
  if (!ipInput) {
    return;
  }

  // Hide the input so it's not visible in the form
  ipInput.style.display = 'none';

  // Get the IP address of the visitor
  const ip = await getIPAddress();

  // This is necessary to bubble the event up to the input and update the React app state
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    'value',
  ).set;
  nativeInputValueSetter.call(ipInput, ip);
  ipInput.dispatchEvent(new Event('input', { bubbles: true }));
});

Embed in Next.js

⌘I

Getting started

Integration methods

Events

Examples

Collect the respondent's IP address