Jump to content

Would like to include the IP address of the person filling out a form

Recommended Posts

Hello,

I'm using the contact form from squarespace. Fairly basic nothing special. I would like to be able to include the IP address of the person filling out the form though. I thought I could do this with a hidden field, but I don't see any way of populating the hidden with anything other then url parameters, which wouldn't be helpful here. 

Is there someway to include the IP address of the person filling out the contact form?

Link to comment

The following will require a business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" type="text/javascript"></script>

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION.

<script>

  $( ( ) => {
  
    /*
    
      based on code from
      < https://www.geeksforgeeks.org/how-to-get-client-ip-address-using-javascript/ >.
      
      Uses ipify API < https://www.ipify.org/ >.
      
      */
      
    /*
    
      Add "https://api.ipify.org?format=json" statement this will communicate with
      the ipify servers in order to retrieve the IP address $.getJSON will load
      JSON-encoded data from the server using a GET HTTP request
      
      */ 
      
    $.getJSON ( 'https://api.ipify.org?format=json', function ( data ) {
    
      // setting hidden ip address field with name SQF_IP_ADDRESS
      
      $( '[name="SQF_IP_ADDRESS"]' ).val ( data.ip );
      
      } );
      
    } );
    
  </script>

Add a hidden form field to your form named IP Address.

185423979_ScreenShot2020-09-30at6_53_37PM.png.1ee301805d6573c950876008e88c47c4.png

That should do the trick. I tested it out here on a v7.0 site but I think it should work on v7.1 as well.

Basically what this is doing is using Javascript/jQuery to go out and query the ipify api for the ip address of the client. Then stuff that number in the IP Address field.

Obviously you will need to test on your site.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 year later...
  • 1 month later...
On 10/1/2020 at 4:03 AM, creedon said:

The following will require a business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION.

<script>

  $( ( ) => {
  
    /*
    
      based on code from
      < https://www.geeksforgeeks.org/how-to-get-client-ip-address-using-javascript/ >.
      
      Uses ipify API < https://www.ipify.org/ >.
      
      */
      
    /*
    
      Add "https://api.ipify.org?format=json" statement this will communicate with
      the ipify servers in order to retrieve the IP address $.getJSON will load
      JSON-encoded data from the server using a GET HTTP request
      
      */ 
      
    $.getJSON ( 'https://api.ipify.org?format=json', function ( data ) {
    
      // setting hidden ip address field with name SQF_IP_ADDRESS
      
      $( '[name="SQF_IP_ADDRESS"]' ).val ( data.ip );
      
      } );
      
    } );
    
  </script>

Add a hidden form field to your form named IP Address.

185423979_ScreenShot2020-09-30at6_53_37PM.png.1ee301805d6573c950876008e88c47c4.png

That should do the trick. I tested it out here on a v7.0 site but I think it should work on v7.1 as well.

Basically what this is doing is using Javascript/jQuery to go out and query the ipify api for the ip address of the client. Then stuff that number in the IP Address field.

Obviously you will need to test on your site.

Let us know how it goes.

Hey @creedon! Your solution works like charm, I implemented it on my website. And this hidden IP field lands nicely also in Mailchimp as a separate field.

Do you know a way to automatically extract Country+City from this IP address? I'd love to add them as separate hidden fields as well.

Thanks!

Tom

 

Edited by TomWis
Link to comment

I'd add that IP addresses are considered personally identifiable information (PII) by authorities in many territories. Regardless of your own opinions on this, if you considering logging IP addresses you may want to consider the legal implications and include details in your privacy policy.

I'm not a lawyer and this isn't legal advice, just a friendly discussion. 🙂

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
18 hours ago, creedon said:

@TomWis

The way to do it is to use a geolocation service instead of an ip address service. Geolocation is basically doing the same thing as the ip address service but adds location information.

Ipify has one but there are several companies that provide this service.

Thanks @creedon. You don't plan to post similar step-by-step with code example, do you? 🙂Querrying for country+city seems more complex. Querrying for IP address was super-simple, because URL https://api.ipify.org simply returned ID address...

Link to comment
7 hours ago, TomWis said:

Querrying for country+city seems more complex.

I should have expounded more on using geolocation. The gross overview of using geo-location is as I mentioned you point to a different API and get different information back. But here's where I should have gone further.

Services that provide detailed geolocation generally don't give it away for free. It costs money to maintain those servers. They may have a free or low-cost tier for say 500 - 1000 hits. But here's the rub. They need a way to identify who you are as a user of their service so they can track and either cut you off or charge for your usage.

Let's look at ipify's implementation. They use a subscriber model and you generate a private API key to access their service. The key is meant to be used on a server where you have access to the back-end so you can load that key there and then use that server to do your geolocation bidding. I suspect most similar services do it the same way.

The issue for an SS site is we don't have access to the server back-end to do the above step. If you were to use the key in public facing code like I created above then anyone could use your key and you would be paying for their use. You don't want that!

Are there some ways you might be able to get what you want with an SS site? Possibly. But a solution wouldn't be a few lines of code like with the IP address above.

Also beware of any free geolocation services that don't require some kind of method to identify you. How can they have a quality data set, provide the servers, human power, and etc., for free?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.