How can I display the IP address in a Webflow form?

Published on
September 22, 2023

To display the IP address in a Webflow form, you can follow these steps:

  1. Create a custom form: Start by creating a custom form in Webflow. You can design the form fields according to your requirements.

  2. Add a hidden IP input field: In the form editor, add an input field and set its type to "hidden". This field will not be visible to the user, but it will store the IP address.

  3. Use custom code: Select the form element and go to the "Settings" tab in the right sidebar. Scroll down to the "Custom Code" section.

  4. Add script to auto populate IP: In the "Before </body> tag" field, you can add a script that will automatically populate the hidden IP input field with the user's IP address. Here's an example script:

<script>  fetch('https://api.ipify.org?format=json')    .then(response => response.json())    .then(data => document.getElementById('hidden-ip-field').value = data.ip)    .catch(error => console.error(error));</script>

Replace 'hidden-ip-field' with the ID of the hidden input field you created in step 2.

  1. Publish your site: Once you have added the script, publish your site for the changes to take effect.

Now, whenever a user submits the form, the IP address will be captured and recorded in the hidden input field. You can then process this data as needed.

By displaying the IP address in a Webflow form, you can gather additional information about your users and use it for analysis and tracking purposes.