Divide-By-0 / blog

blog

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add cleaner subscribe HTML

Divide-By-0 opened this issue · comments

commented

The current Google Form is at https://forms.gle/PLprvT8XA9VNB69q7.

TODO (ChatGPT): You can create a lighter weight and more aesthetic form using HTML and JavaScript. This form will send a POST request to a Google Apps Script Web App, which will then store the email addresses in a Google Sheet.

Here's how to do it:

  1. Create a new Google Sheet to store the email addresses.
  2. Click on Extensions -> Apps Script.
  3. Delete any code in the script editor and replace it with the following:
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');

function doPost(e) {
  var email = e.parameter.email;
  sheet.appendRow([email]);
  return ContentService.createTextOutput('Success').setMimeType(ContentService.MimeType.TEXT);
}
  1. Click on Deploy -> New Deployment.
  2. Choose Web App in the Select type dropdown.
  3. Under "Who has access", select "Anyone".
  4. Click on Deploy and copy the Web App URL.

Now, you can create a form in your Hugo template:

<form id="subscribe-form" action="YOUR_WEB_APP_URL" method="post">
  <input type="email" name="email" placeholder="Your email" required>
  <button type="submit">Subscribe</button>
</form>

Replace YOUR_WEB_APP_URL with the URL you copied earlier.

You can style this form using CSS to make it more aesthetic. When users submit the form, their email addresses will be stored in the Google Sheet.