Getting user location from form

Ask the community
, ,
1

Hey there - I have a simple “Wix form”. When they submit, I would like to mine geographic data from the sender to be included in the message so I can organize by this. I do not want the user to need to input this information, just be aware of it on my end of collection.

I am not a great coder, but if someone could walk me through adding this, I could use a simple solution to get this info. I figure it should be pretty simple.

Thanks!

2

Is the country level good enough or do you need a more precise location?

3

Hey there - i’m really looking for city. Thanks!

4

You can’t get the city without asking for user consent for privacy reasons (the browsers won’t let you do it).
If you don’t mind to ask for consent, you can use getcurrentgeolocation to receive the user’s coordinates, then you use a 3rd party (like Google maps) to get the city based on these coordiantes.

5

I do the below code and it gets me the city:

export async function chkIpAddress() {
    const httpResponse = await fetch('https://extreme-ip-lookup.com/json', {
        method: 'get'
    });

    if (httpResponse.ok) {
        const json = await httpResponse.json();
        const ipaddress = await json.query;
        const country = await json.country;
        const city = await json.city;
        return { "ipaddress": ipaddress, "country": country, "city": city };
    }
}
6

Giri, but in this case the city might be wrong. I’ve tested and for me it and it doesn’t return the correct city (some dozens kilometres wrong)

7

@jonatandor35 Interesting. I have but little resources to check: my own IP and on VPN and those were correct (at least my own, the VPN’s I cannot be sure of).
EDIT: the above gets the first PUBLIC ip-address/city. My provider puts me on a class C network (192.168…), relays to the nearest city where it meets it’s first public IP. SO yes, my own IP is also some 20 km off. But it’s good enough for me.

8

Within 20km or so may be fine for this purpose.

How do I get it to print this into the form response? When I then put chkIpAddress() into a button press function, the form doesn’t seem to function al at all. How can I get this to print with the form responses? How do I, for instance, add this to the database of info that was collected with that form? Thanks!

9

If you want it on the form, you could do something like:

$w.onReady(async function () {
    let objClientData = await chkIpAddress();
 $w('#someTextField').text=objClientData.ipaddress;
 $w('#someOtherTextField').text=objClientData.country;
 $w('#someOtherOtherTextField').text=objClientData.city;

});

If you also want to put it into a database, you will also have to use .setFieldValue(s), the same way.

EDIT: if you do it on a button and it no longer works, I guess you use a Submit-button from the dataset. It cannot do 2 things: call a function AND Submit. If this is the case, you will have to turn the Submit button into a regular button and do the chkIpaddress and the dataset’s .save from code.

10

Thanks Giri - sorry if I was mis-stating. I don’t want it on the form, but submitted as data with the form. So if someone submits the basic data (say, name, email, var), I get name, email, var, and this general address info based on that IP lookup.

I can’t quite find where to deconstruct a wix form to do this, or where to call the check IP function to have it pass the value. I don’t even necessarily care if it’s attached, traffic is low enough that I could manually attach if I got, say, an email with a timestamp that includes that IP info.

You guys are awesome, and I appreciate your patience. First time really digging under the hood like this.

11

Show me the code you have so far. And tell me how you set up the form: with a dataset and a submit button from the dataset, using wix-data and using backend calls, I need to know to be able to help you.

12

Understood, thanks. I appreciate your patience with me. I was attempting to use the WIX forms. I already have exposed fields that are being filled out. Just want this data too. It could even be data that is emailed separately if that’s easier.

I’ve included the function into velo, but just don’t know what to do with it from there to get it to push and be included in the for submission, or alternatively be sent as a second email with that info.

As a beginner, the help is appreciated!

3258×1410 400 KB

13

Could you show me a print screen of the form you’re using and hoover over an input filed while doing the screen shot?
EDIT : I mean as screen shot of the entire editor with the form.