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 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 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. 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
Enter the address of your choice, and you should be redirected to a typeform to order some good pizzas 🍕
Pre-requisites 🛒
A Typeform account, create one for free here
An Algolia Places account, get one for free here
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>
<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.
<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
<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 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:
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. 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.
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.
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:
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.
First, let's add the Embed SDK at the bottom of your page.
<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.
<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:
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 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
Top comments (4)
Hey Nicolas, does this work with a SquareSpace site? What do you recommend? My client needs it embedded into their SqSp site and it's pulling up a ton of errors.
Thoughts?
Hi @bethanyfound
Sorry I am just seeing this now.
One thing to note is that the Algolia Places project is getting sunset pretty soon, so it would not work anymore. But it should work with similar type of APIs.
I don't see any reason why it would not work on a SquareSpace website. If you are able to import your own JS files and build your own logic it should be fine.
Which type of errors to do you see?
No worries - so Algolia doesn't work anymore, so I've been using Google Maps (Place) API to autocomplete addresses. So I'm trying to grab those ID's and it's throwing out an error '"e" is undefined' - any thoughts?
AWESOME, Just what I needed.
Thank U for this !