Portfolio

🚀 Explore the Simplicity of HTML, CSS, and a Touch of JS in Building Your Unique Showcase. Let's Elevate Your Portfolio Game Together! 💼❤️

Website is Live: baivabsarkar-old.vercel.app

Key Feature

Submit a Form to Google Sheets

This Portfolio Contact form can stores the submitted form data in Google Sheets using plain 'ol JavaScript (ES6), Google Apps Script.

Discover the Process: Learn from @jamiewilson Form-to-Google-Sheets Repository 📝🔗 #OpenSource"

Input the <SCRIPT> in index.html:

<script>
        const scriptURL = 'https://script.google.com/macros/s/AKfycbzwGkCv4dbdFpYjSYbThchpqYSgudoYmK_KtdmS6RkK-vyFqgPCKwxicx0xdmTErDjM/exec'
        const form = document.forms['submit-to-google-sheet']
        const msg = document.getElementById("msg")
        const waitMsg = document.getElementById("wait-msg")
        form.addEventListener('submit', e => {
            e.preventDefault();
            waitMsg.innerHTML = "Please wait...";
            fetch(scriptURL, { method: 'POST', body: new FormData(form) })
                .then(response => {
                    waitMsg.innerHTML = "";
                    msg.innerHTML = "Message sent successfully";
                    setTimeout(function () {
                        msg.innerHTML = "";
                    }, 5000);
                    form.reset();
                })
                .catch(error => {
                    waitMsg.innerHTML = "";
                    console.error('Error!', error.message);
                });
        });
</script>

Layout of Contact form

After clicking the "Submit" buttom.

"Please wait..."

After sending Message.

"Message sent successfully"