Skip to content

Instantly share code, notes, and snippets.

@Antoinebr
Created February 19, 2024 16:29
Show Gist options
  • Save Antoinebr/29ba3ddc476da598b5bf962c724961bd to your computer and use it in GitHub Desktop.
Save Antoinebr/29ba3ddc476da598b5bf962c724961bd to your computer and use it in GitHub Desktop.
HubSpot Form with autosuggest + Form API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocompletion Form</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
#suggestions {
display: none;
border: 1px solid #ccc;
border-top: none;
list-style: none;
padding: 0;
margin: 0;
}
#suggestions li {
padding: 10px;
cursor: pointer;
}
#suggestions li:hover {
background-color: #f3f4f6;
}
</style>
</head>
<body class="p-4">
<img src="redPanda.png" class="block mx-auto w-60" alt="">
<form id="myForm" class="max-w-md mx-auto">
<div class="mb-4">
<label for="first_name" class="block mb-2">First Name</label>
<input type="text" id="first_name" name="first_name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500" />
</div>
<div class="mb-4">
<label for="last_name" class="block mb-2">Last Name</label>
<input type="text" id="last_name" name="last_name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500" />
</div>
<div class="mb-4">
<label for="email" class="block mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500" />
</div>
<div class="mb-4 relative">
<label for="country" class="block mb-2">Country</label>
<input type="text" id="country" name="country" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500" autocomplete="off" />
<ul id="suggestions" class="absolute z-10 bg-white w-full"></ul>
</div>
<button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded">Submit</button>
</form>
<script>
const popularCountries = [
"United States",
"United Kingdom",
"Japan",
"France",
"Germany",
"Australia",
"Italy",
"Canada",
"Spain",
"China"
];
const countryInput = document.getElementById('country');
const suggestionsList = document.getElementById('suggestions');
const myForm = document.getElementById('myForm');
countryInput.addEventListener('input', () => {
const query = countryInput.value.trim().toLowerCase();
if (query.length === 0) {
suggestionsList.style.display = 'none';
return;
}
const filteredCountries = popularCountries.filter(country => country.toLowerCase().startsWith(query));
renderSuggestions(filteredCountries);
});
function renderSuggestions(countries) {
if (countries.length === 0) {
suggestionsList.style.display = 'none';
return;
}
suggestionsList.innerHTML = '';
countries.forEach(country => {
const li = document.createElement('li');
li.textContent = country;
li.addEventListener('click', () => {
countryInput.value = country;
suggestionsList.style.display = 'none';
});
suggestionsList.appendChild(li);
});
suggestionsList.style.display = 'block';
}
myForm.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission
// Gather form data
const formData = new FormData(myForm);
const formObject = {};
formData.forEach((value, key) => {
formObject[key] = value;
});
console.log(formObject);
// Send data to HubSpot
sendDataToHubSpot(formObject);
});
async function sendDataToHubSpot(data) {
const portalId = '21169044'; // Replace with your HubSpot portal ID
const formId = 'c5f11804-48bb-49cd-96f0-bdb40dd2341b'; // Replace with your HubSpot form ID
const url = `https://forms.hubspot.com/uploads/form/v2/${portalId}/${formId}`;
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data),
});
if (response.ok) {
console.log('Form data sent successfully to HubSpot.');
} else {
console.error('Failed to send form data to HubSpot.');
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment