Does anyone know how to collect the IP address of those who fill out form?
I have tried following these instructions bt so far its not working.
Here is the site.
https://preview.webflow.com/preview/vopalpha?utm_source=vopalpha&preview=bdc631b8774a5f605757dd9fbf821048
What you need to do is:
ipFormInput in the Webflow designer<script type="application/javascript ">
const ipFormInput = document.getElementById('ipFormInput');
fetch('https://api.ipify.org?format=json')
.then((response) => { return response.json() })
.then((json) => {
const ip = json.ip;
ipFormInput.value = ip;
})
.catch((err) => { console.error(`Error getting IP Address: ${err}`) })
</script>
This script makes a call to an external service that returns the client’s IP address. It then sets the IP address as the value of the form field that has the ID ipFormInput. As long as you make this field hidden from the Webflow designer, the user will never see it. When the form is submitted you will get the IP address along with the other form fields.
I just wrote this and tested it, it works fine.
Hope that helps.
Jason
Hi Jason,
Thank you very much for your help. It hasn’t worked for me. Not sure what I am doing wrong.
Regards
Dave
Hi Jason,
I just got it working. Thanks heaps mate.
Much appreciated.
Cool, glad it works for you!
Can collecting the IP address on a form get you blacklisted by ISP’s? I recently modified my forms to collect the IP address to help weed out fake submissions on my website. Almost overnight, we went from 5-6 form submissions per day to 0 submissions in almost 3 weeks! Within 4 days I had replaced the original forms that did not collect the IP address, but we are still receiving nothing.
No. Web servers record IP address in the server logs on a visit anyway. You should look to see what the traffic sources were, and if that changed. Google analytics would be helpful for that.
Thanks for the reply!
Sweet, sounds simple. Does it have to be in the footer or could we put in the script of the contact form?
I tried to follow the instruction below and it did not work. So I decided to find a different solution. I have looked for an experienced developer in my area. We met and he did everything I need very quickly. Actually, he gave me some useful hints on some other things as well. Find a developer in your area by zip code, for this, postcode finder, please. It is really fast and convenient. At least, I prefer this approach.
Do these instructions still work when using https://www.ipify.org/ - I use Go High Level and can follow your instructions to the letter, but it’s not collecting the IP address and not entering any info on that field on the form.
What did you do to get it to work?
Hello!
It is possible to track the location of a user? I want to hide an input field and the browser will push location data into that hidden field.
Thanks!
I use Go High Level as well, and was able to make this work by adding in a line of code that notifies the browser via dispatchEvent that the input field has been modified.
Here is my code, which refers to the input field by its Id value, which in my case is c1RYa1Fus0jDQpfvRmqN. (I got that Id value for the input field using the Inspect function in my browser.)
<script type="application/javascript ">
const ipFormInput = document.getElementById('c1RYa1Fus0jDQpfvRmqN');
fetch('https://api.ipify.org?format=json')
.then((response) => { return response.json() })
.then((json) => {
const ip = json.ip;
ipFormInput.value = ip;
ipFormInput.dispatchEvent(
new Event("input", { bubbles: true, cancelable: true })
);
})
.catch((err) => { console.error(`Error getting IP Address: ${err}`) })
</script>
The reference that gave me a clue to the problem was this discussion:
The comment on that page that gave me the solution said:
“With modern websites we now need to notify event handlers that the field has been changed, for all/any state management to recognise change. Previously without dispatching event you are just modifying the value field through the DOM.”
After reading several suggestions on here that weren’t working. I got ChatGPT to get me an answer that worked for me.
HTML:
<form id="myForm">
<!-- Other form fields -->
<input type="hidden" name="visitor_ip" id="visitor_ip" value="">
<input type="submit" value="Submit">
</form>
Script:
<script>
// Function to retrieve the visitor's IP address
function getVisitorIP(callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.ipify.org?format=json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
callback(response.ip);
}
};
xhr.send();
}
// Populate the hidden field with the visitor's IP address
getVisitorIP(function(ip) {
document.getElementById('visitor_ip').value = ip;
});
</script>
The JavaScript code will make an AJAX request to the “https://api.ipify.org” API to retrieve the visitor’s IP address and populate the hidden input field.
Hi Guys! someone here to help me with tracking IP on a FORM? i tried multiple solutions but seems that i am no doing something right. I will give the beer 
As a side note to the topic, since I didn’t see it mentioned in here.
IP is considered personal data, regulated under GDPR for us EU folks.
Consider first if you actually need to track and save this data for a valuable purpose.
If you do, you need to inform users clearly that you are collecting this data and for what purpose, and receive their consent to do so.
A form itself does not directly communicate that you will be collecting IP, as it does when you collect data from the form fields, like name and email. So this needs to be conveyed specifically, like with a checkbox and some extra text.
Thanks for sharing that information which many people simply do not understand or care to.
Since Webflow does not let you block traffic from the EU, as a company that allows that traffic to your site, you must comply or face legal consequences which can extend to all involved with the data.