Collect IP Address Hidden Field Forms

Design help Custom code
1

Hi Webflow guys and girls :slight_smile:

First off not sure if this is possible but has/does anybody know who to collect IP address in a hidden webflow form?

2

jquery - How to get client's IP address using JavaScript? - Stack Overflow

Instead of alert, you want to set the value of a field like this

$('#my-field-id').val(response.ip);

Here’s a longer list if you want to compare web services: jquery - How to get client's IP address using JavaScript? - Stack Overflow

1 Like
3

@samliew thanks Sam, but which of those answers code do you suggest I use?
I’m not to sure how to implement this sorry

4 
$.get("https://ipinfo.io", function(response) {
    $('#my-field-id').val(response.ip);
}, "jsonp");
2 Likes
5

Just add this to custom code with my form id in it? Sorry for been such a noob…

6

Put in page footer code. Replace my-field-id with id of the hidden field.

7

Thanks champ, ill try my best to get this working

8

Hi all. This isn’t working for me and I’m hoping someone can help. I have a live site that should be collecting IP Address using this method but nothing is coming in to the form. The IP was coming through at one point but it’s not anymore and the form is integrated with a Zapier set up that needs the IP to work. Thanks a million
screen4

screen2
screen2291×520 39.5 KB
screen3
screen3291×520 50.4 KB
screen1
screen1291×520 58.6 KB

1 Like
9

@Niall_Mc_Dermott

Welcome to the Webflow forum!

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!

1 Like
10

Thanks for the reply Samliew,

The site is: https://www.lucozadesportwhatwall.com/

or http://autovation-lucozade.webflow.io/

My preview link is: https://preview.webflow.com/preview/autovation-lucozade?preview=ce51c5c4f5eb3abf2b2fb80740115b7f

Thanks a lot

11

Your site is using HTTPS, that may conflict with HTTP resources.

Try changing it to HTTPS.

12

Cheers. It’s hosted on Webflow with https: https://www.lucozadesportwhatwall.com/

13

I meant your script is accessing a non secure website.

1 Like
14

Thanks a million. You solved it. I appreciate that a lot.

The code I was working from had no ‘s’.

This is what I had:

Works with:

15

Hi Niall,
I have just found this topic relating to collection of IP Addresses. In short I have a client who is getting threats via the forms and needs to collect and report the IP addresses. I have copied the code and followed the link but have very limited understanding on java. I have done a test and do not receive any ip address.
Can you help me.
https://preview.webflow.com/preview/vopalpha?utm_source=vopalpha&preview=bdc631b8774a5f605757dd9fbf821048
Cheers

16

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.