Collect Addresses on Typeform using Algolia Places
Tags: tutorial, javascript, typeform, algolia
Published: 2020-05-06 20:16:41

---
title: Collect Addresses on Typeform using Algolia Places
published: true
description: With COVID19 a lot of small businesses are struggling to digitalize their business. This tutorial shows how to connect structured addresses for deliveries in Typeform.
tags: tutorial, javascript, typeform, algolia
cover_image: https://images.typeform.com/images/Vvyjz3niFF8K
---

During the last weeks as the world was getting under lockdown, many small businesses had to close doors and put their activities on hold. This was actually a new beginning for many business owners, as they were looking for opportunities to continue running their shops while respecting government measures and social distances.

At [Typeform](https://typeform.com) we've seen many initiatives to help digitalize small businesses, by providing for example interfaces to take online orders or do deliveries. From farmers in the mountains of Chamonix to a bakery in Barcelona, all stores were facing similar issues and were looking for simple solutions.

[Typeform](https://typeform.com) lets you create easily a visual "menu" where customers can pick what they want to buy. Typeform then calculates the price automatically and displays a credit card payment field using [Stripe](https://stripe.com). Overall it's a very seamless process until you reach the part where you have to ask your customer for their address and where you should deliver the goods.

In most cases, it's done by asking a group of questions. Usually, you ask first the street, then the postcode and finally the city. But when it comes to addresses it's hard to be consistent as there are so many ways to write it. Especially right now when this typeform is shared with people that are not tech-savvy. This means business owners have to spend countless hours going manually to every single order a check if the address was correctly filled.

Unfortunately, we currently don't have native support in Typeform's product for an autocomplete address field. But as a Developer Advocate, I don't take no for an answer!

There has to be a better way! And this is where hacker spirit kicks in!

Algolia has been maintaining since 2016 a library called Places, doing exactly what we need. It's based on data from OpenStreetMap, and do autosuggestion as you type.

In this article, I will show you how you can connect it to your Typeform and collect accurate addresses.

## Try it live 📺
If you want to get a preview of what we are about to build, check it out [here](https://tf-algolia-places.glitch.me)

Enter the address of your choice, and you should be redirected to a typeform to order some good pizzas 🍕

![demo typeform algolia](https://media.giphy.com/media/XHvgQpf080vtTX2jf7/giphy.gif)

### Pre-requisites 🛒
A Typeform account, create one for free [here](https://www.typeform.com/?utm_source=dev.to&utm_campaign=devrel_projects&utm_medium=referral&utm_content=tf-algolia-places)
An Algolia Places account, get one for free [here](https://www.algolia.com/users/sign_up/places)

## Add Algolia Places to your project 📍
The good thing about this hack? We don't need any server-side code!
Everything could happen in a plain HTML page with a bit of Javascript.

Let's start by loading the library on our page.
Adds this at the bottom of just before `</body>`
```html
<script src="https://cdn.jsdelivr.net/npm/places.js@1.18.1"></script>
```

In our page, we then add an HTML element that will be the autocomplete field.

```html
<input type="search" id="address-input" placeholder="Where do you live?" />
```

Then we have to initialize the library and connect it to this field.

Add this snippet at the end of your page
```js
<script>
      var placesAutocomplete = places({
        appId: "YOUR_APP_ID",
        apiKey: "YOUR_API_KEY",
        container: document.querySelector("#address-input"),
        type: 'address'
      });
</script>
```
Replace `YOUR_APP_ID` and `YOUR_API_KEY` by the values given in Algolia dashboard.

💥You should now have a functioning autocomplete field. Open your HTML page and try it out.

### Customize the library 🖌️

Right now, our example auto-suggests addresses all over the world, but the library is very flexible. If you add `countries: ['us']` for example it will only show addresses in the US.

I recommend you to check the [documentation](https://community.algolia.com/places/documentation.html) to customize it the way you want 😉

### Listen to changes 👂
What is happening when the user has selected their address? At the moment nothing, because we haven't coded this part.

To do that we add an event listener to the `placesAutocomplete` object we created earlier. The Algolia Places library has many events available, but we are only interested by the `change` event. This event will be triggered every time the address selected changes.

In your code add the following lines:

```js
placesAutocomplete.on("change", e => {
 console.log(e.suggestion)
})
```

Now you can restart your app, type an address, and select it. In your browser developer console, you now see the details of what's returned by the library.

🤩 That's a lot of interesting data formatted exactly the way we need, but we may just need a subset of it.

## Let's prepare your typeform 👩‍🎨
Now that you've seen the potential of this library, you may have a better understanding of which type of data you want to use in your typeform.

For this example, we are going to pass `address`, `city`, `postcode` and `country` value only. To pass the data from our code to the typeform we are going to rely on [Hidden Fields](https://help.typeform.com/hc/en-us/articles/360029114712-How-to-use-Hidden-Fields). Hidden fields are a way to pass data to a typeform by adding query parameters to its URL.

Your original typeform URL was:
`https://picsoung.typeform.com/to/FWq00K`

It's now going to be `https://picsoung.typeform.com/to/FWq00K?address=xxxx&postcode=xxxx&country&city=xxxx` where `xxxx` is the value extracted thanks to Algolia Places.

Let's now add hidden fields to your typeform. Click `+` and select `hidden fields`. Hidden fields are sitting at the top of your form and you can add as many as you want. Only the parameters declared as hidden fields will be passed to the results. You can also use hidden fields in the conditional logic, for example, to showcase that you don't do deliveries in certain postcodes.

![Add hidden fields to a typeform](https://media.giphy.com/media/kHxIgm99KvBOn6s90e/giphy.gif)

Make sure it works by opening the URL of your typeform with hidden fields values put manually. Once you've submitted the typeform, in the `Results` panel you should see that the values have been passed and recorded correctly.

## Link our code to the typeform 🔗
Now that we have the two pieces working independently, let's connect them together!

### Construct the URL of the form 🏗️
As we saw we need to append query parameters to our Typeform URL.
In our code, add this snippet and replace `YOUR_TYPEFORM_URL` with your own typeform URL.

```js
let typeformURL = "YOUR_TYPEFORM_URL";
let hidden_values = {
  address: `${e.suggestion.value}`,
  postcode: `${e.suggestion.postcode}`,
  country: `${e.suggestion.country}`,
  city: `${e.suggestion.city}`
};
let hidden_query = Object.keys(hidden_values).map((key)=> `${key}=${hidden_values[key]}`).join('&')
let completeURL = `${typeformURL}?${hidden_query}`
```

We create a `hidden_values` object with all the parameters we get from Algolia Places. 
We then turn this object into a string so it looks like `country=France&city=Paris...` using a bit of ES6 magic to store it in `hidden_query` variable.
`completeURL` is then the concatenation of our original URL and the hidden values.

We now have two options, either we redirect the user to our typeform, or we embed it in our page.

#### Redirect ↪️

Redirection is the easiest thing, just after the previous snippet add this line in your code:

```js
window.location = completeURL
```
And that's it, you are now redirected to your form and location data are passed as hidden fields.

#### Embed 🖼️
To embed your typeform in your page we will use our [Embed SDK](https://github.com/typeform/embed).

First, let's add the Embed SDK at the bottom of your page.
```js
<script src="https://embed.typeform.com/embed.js"></script>
```

In the `<body>` of your HTML page you need to add an HTML element where the form will be embedded.

```html
<div id="typeform_embed" style="height: 900px;width: 100%;"></div>
```

Give it the size you want by modifying the `height` and `width` properties.

Now we need to embed the typeform when we receive the `change` event from the Algolia library.

Just after the line `let completeURL ...` add the following:

```js
const embedElement = document.querySelector("#typeform_embed");
typeformEmbed.makeWidget(embedElement, `${completeURL}`,
  {
    hideHeaders: true,
    hideFooter: true,
    opacity: 75,
    buttonText: "Take the survey!",
    onSubmit: function() {
      console.log("Typeform successfully submitted");
    }
  }
);
```

This piece of code loads the typeform with all the parameters and place it in the object with id `typeform_embed`.

[Typeform's Embed SDK](https://developer.typeform.com/embed/) has a lot of features and you can personalize many things on the look and feel of the embed, we just went for the easiest path.

Note, the `onSubmit` function, this will be triggered when the form is submitted. This could be useful to hide the form after being submitted, for example.

You should now have a typeform appearing on your page after selecting an address in the field. And if you change the address it will update the typeform URL and embed it again.

## Going further 🚀

With this hack, you are now collecting sanitized addresses from your customers when they are filling up a typeform. 🎉

You can personalize the settings of the Algolia Places library to restrict to certain countries or to a different type of address. The library even supports searching for airports!

You can also pass other types of data as hidden fields to your form. Like the latitude or longitude.

With a bit of CSS you can modify the look and feel of the search box and make it your own.

On Typeform you can now add some logic jumps to react differently depending on the locations data collected in the hidden fields.

I hope you liked this hack and found it useful.
Feel free to suggest some other ideas ;)

The complete source code is available on [Glitch](https://glitch.com/~tf-algolia-places)

{% glitch tf-algolia-places code %}