How to Add a Blog or Website Subscription Option

Let´s explore step by step how to make subscription form for your blog or website which can allow your visitors to subscribe your blog or website. 

Normally you will find two options on internet: 

1.- You can use the google form and excel sheet to create a subscription form and then insert the codes in html of your blog or website. 

However, I personally do not like it because the subscription form looks like embedded and it changes the frontpage look of your blog or website.   

2.- You can write a java script to create a subscription form and then link that form with an email. If a visitor of your blog or website fills the form and click on submission button, it will open the visitor´s email account and by this way the visitor will send you an email with data which you asked in subscription form. 

However, I personally do not like it because mostly, on submission, it does not open visitor´s email account or visitor will avoid to login to email account considering this action could be dangerous for email.  

3.- You can register with any website which provide codes for subscription option and you can insert this code in your website. But, in this case, all data will be stored on the server of that website. Many of them put limitation such as you can not send many emails to subscribers, or you can have only a certain number of subscribers etc. On passing those limitations, the website owner will charge you for the service. May be you can loose the data in any circumstance. 

Again, I personally do not like it because lose of subscribers data is a big lose and it has an impact on your own blog or website. 

So how to solve this issue? 

I am going to explain you step by step a procedure which I explored and used on my website www.Latestfoto.com  

Do it all these steps on Google Chrome. Mozilla or Microsoft Edge or any other will not work. 

1.- Open the google drive. 

2.- Open a new google sheet. 

3.- Change the permission of your google sheet clicking on "Share" button: Any one with the link can open"

4.-  Now click on "Extension" to open "Apps Script". 

5.- Now copy and paste the script which I provide you. 

function doPost(e) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1'); // Adjust the s

  var data = JSON.parse(e.postData.contents);

 

  // Append the new data to the sheet

  sheet.appendRow([data.name, data.email, new Date()]);

 

  // Return a success message

  return ContentService.createTextOutput(JSON.stringify({ result: 'success' }))

                       .setMimeType(ContentService.MimeType.JSON);

}

6.- Now click on "Deploy" and New Deployment, select "Web application". 

   7.- Write description, select "Anyone" for Who has access and at click on "Deploy". 

8.- You will see an url with your project deployment ID. Copy the url.  

https://script.google.com/macros/s/YOUR-DEPLOYMENT-ID/exec

9.- Now copy and paste following code in your website where ever you want to insert a subscription form to your web visitor. 

<form id="subscriptionForm">

  <label for="name">Name:</label><br />

  <input type="text" id="name" name="name" required /><br /><br />

  

  <label for="email">Email:</label><br />

  <input type="email" id="email" name="email" required /><br /><br />

  

  <input type="submit" value="Subscribe" />

</form>

<script>

  document.getElementById('subscriptionForm').addEventListener('submit', function(e) {

    e.preventDefault(); // Prevent the form from submitting the usual way

    

    var formData = new FormData(e.target);

    var name = formData.get('name');

    var email = formData.get('email');

    

    // Send the form data to your Google Apps Script

    fetch('https://script.google.com/macros/s/YOUR-DEPLOYMENT-ID/exec', {

      method: 'POST',

      body: JSON.stringify({ name: name, email: email })

    })

    .then(response => response.json())

    .then(data => {

      if (data.result === 'success') {

        alert('Subscription successful!');

      } else {

        alert('There was an error with your subscription.');

      }

    });

  });

</script>

10.- Replace the url of this code with your copied url with deployment ID. 

11.- Test the subscription by subscribing yourself. 

13.- If it does work, let me know it.