Antoinebr/index.html

## index.html
<!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>
	<!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>