How can I make it mandatory for users to choose one of the suggestions from Google Place Autocomplete before submitting a form on a landing page in Webflow?

Ensuring that users select an option from Google Place Autocomplete before submitting a form can enhance the accuracy of the inputs. Here's how you can implement it in Webflow:

​

1. Integrate Google Place Autocomplete

• Set up Google API: Make sure you have a Google Cloud Platform account with the Places API enabled.
• Obtain API Key: Go to Google Cloud Console and acquire the API key.
• Add API to Webflow: In Webflow, go to Project Settings > Custom Code and add the Google Places API script within the <head> section. Example script: <script src="https://maps.googleapis.com/maps/api/js?key=[YOURAPIKEY]&libraries=places"></script>

​

2. Set Up the HTML Structure

• Form Input Field: Create an input field in your Webflow form that will use the autocomplete functionality.
• Data Attribute: Assign a unique data attribute to this input (e.g., data-place-autocomplete="true").

​

3. Initialize the Autocomplete

• Custom Script: Use a custom script to apply the Google Places Autocomplete to your input field. Add this script within the Before </body> tag: 

​

<script>
document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('[data-place-autocomplete="true"]');
  var autocomplete = new google.maps.places.Autocomplete(input);
});
</script>

​

4. Validate Selection Before Form Submission

• Validation Script: Ensure users select from autocomplete and prevent form submission otherwise. Add this script as well:

​

<script>
document.querySelector("form").addEventListener("submit", function(event) {
  var input = document.querySelector('[data-place-autocomplete="true"]');
  var placeSelected = input.getAttribute('data-place-id');

  if (!placeSelected) {
    alert("Please select a place from the suggestions.");
    event.preventDefault();
  }
});

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", function() {
  var place = autocomplete.getPlace();
  input.setAttribute('data-place-id', place.place_id);
});
</script>

​

5. Test Your Form

• Perform Tests: Ensure the script works by trying to submit the form without selecting a suggestion and confirming the alert prevents it.

​

Summary

To make the autocomplete suggestion mandatory, you (1) integrate the Google Places API, (2) set up the autocomplete on your input field, and (3) use a validation script to ensure users select a suggestion before the form can be submitted. Adjust scripts as needed to match your form and field configurations.