This README provides instructions on how to set up the Google Forms integration for the waitlist sections of the Botleague website.
-
Create a Google Form:
- Go to Google Forms
- Click on "+" to create a new form
- Name your form (e.g., "Botleague Waitlist")
- Add an email question (set as required)
- Optional: Add any other fields you might want to collect
-
Get the Form ID:
- After creating your form, look at the URL in your browser. It will look something like:
https://docs.google.com/forms/d/e/1FAIpQLSdYC9wAIaxxxxxxxxxxxxxxxxxxxxx/viewform - The long string after
d/e/and before/viewformis your form ID.
- After creating your form, look at the URL in your browser. It will look something like:
-
Find the Field ID:
- Right-click on your form and select "View Page Source"
- Search for "entry." in the source code
- You'll find something like
name="entry.1234567890"for each field - For the email field, note the number (e.g., "1234567890")
-
Update the HTML:
- Open
index.html - Replace
YOUR_GOOGLE_FORM_IDwith your actual form ID - Replace
EMAIL_FIELD_IDwith the entry ID you found for the email field
- Open
If your form URL is:
https://docs.google.com/forms/d/e/1FAIpQLSdYC9wAIaxxxxxxxxxxxxxxxxxxxxx/viewform
And your email field has the entry ID "1234567890", then your form action would be:
<form class="waitlist-form" action="https://docs.google.com/forms/d/e/1FAIpQLSdYC9wAIaxxxxxxxxxxxxxxxxxxxxx/formResponse" target="_blank" method="POST">
<input type="email" name="entry.1234567890" placeholder="Enter your email" required class="waitlist-input" />
<button type="submit" class="waitlist-button">Join Waitlist</button>
</form>- When a user submits their email, the JavaScript in
waitlist-form.jsintercepts the form submission. - The form data is sent to Google Forms via a fetch request.
- A success message appears on the page, confirming the user's submission.
- The form resets, ready for another submission.
This implementation allows you to collect emails without requiring a backend server while providing immediate feedback to users.