Email subscription form with google sheet | Collect email from website

mrlaboratory

Friday, December 2, 2022

Email subscription form with google sheet | Collect email from website | Email marketing

in this article, I will share one technique for a collect email from your website. when someone visits your website then he wants to get your new post notification . in this point you can collect visitor email and send your new post notification. you can collect emails with subscription forms with your google sheet. when the visitor put the email and clicks the subscribe button then the email will be stored on your google sheet.

Decide your place

decide your place to setup this form. your can place any where on your website as your wish . then copy this code and past it there ..

<div class='newsletter' id='newsletter'>
<style>
.newsletter{border-radius:8px;text-align:center;background:var(--themecolor);padding:50px 10px;display:flex;justify-content:center;align-items:center;margin-top:20px}.modal-box{opacity:1;visibility:visible;transition:.4s;background:#fff;height:auto;width:400px;padding:38px 30px;border-radius:5px;box-shadow:5px 5px 30px rgb(0 0 0 / 20%)}.modal-box .icon1{font-size:60px;background:var(--themecolor);height:120px;width:120px;color:#fff;border-radius:50%;line-height:120px;text-align:center;margin-bottom:10px}.modal-box header{font-size:28px;font-family:sans-serif;margin-bottom:10px}.modal-box p{line-height:20px;color:grey}.newsletter form .icon2,.newsletter form button{margin-top:15px;background:var(--themecolor);color:#fff} .newsletter form button,.newsletter form input{height:50px;width:95%;border-radius:3px}.newsletter form .icon2{position:absolute;height:50px;width:50px;line-height:50px;font-size:24px;border-radius:5px 0 0 5px}.newsletter form input{margin-top:15px;padding:0 65px;font-size:18px;outline:0;border:2px solid var(--themecolor)}.newsletter input::placeholder{color:#8c8c8c}.newsletter form button{font-size:25px;border:1px solid #0b8cd7;letter-spacing:1px;cursor:pointer;outline:0;transition:.3s}.newsletter form button:hover{background:#1ed2fa;border:1px solid #05cdfa;letter-spacing:2px}
</style>
<div class='center modal-box'>

<div class='fas fa-bell icon1'/>
<header>Subscribe For Newsletter</header>
<p>
Subscribe for any update </p>
<form class='Subscribe' name='submit-to-google-sheet'>
<div class='fas fa-envelope icon2'/>
<input name='Email' placeholder='Email' required='' type='email'/>
<button type='submit'>Subscribe</button>
</form>
</div></div>

Here is all the HTML and CSS code for this email subscription form.

then linkup your font awesome on your website head section for the subscription icon.

<link href='https://use.fontawesome.com/releases/v5.0.1/css/all.css' rel='stylesheet'/>

Create a google sheet

Create a google sheet with one heading email and set this file name email list. then add an extension app script. and copy all code past on there.

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
var lock = LockService.getScriptLock()
lock.tryLock(10000)

try {
var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
var sheet = doc.getSheetByName(sheetName)

var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
var nextRow = sheet.getLastRow() + 1

var newRow = headers.map(function(header) {
return header === 'timestamp' ? new Date() : e.parameter[header]
})

sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
.setMimeType(ContentService.MimeType.JSON)
}

catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}

finally {
lock.releaseLock()
}
}

after pasting all code click the save and run button. when clicking the run button app script needs permission for write and read your sheet file .you need to give all permission and click the deploy button.

After doing like this screen and click the deploy button for the find your script link ..copy it and save on your notepad.

Script setup

copy this script and past on your before </body> tag .. i marked script URL on this code . your can copy your script URL and past on there and save ..

<script>
/*<![CDATA[*/
const scriptURL = 'script url'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
$('.Subscribe').html('<button>Thanks for Subscribed</button>')
})
/*]]>*/
</script>

hope you understand everything .. if you face any problems watch this video or comment here ..