Love our work? if you want a custom project Contact on Whatsapp
Home
Appscript
B SERIES

How to Send Bulk Emails from Google Sheets to Gmail for Free | B2

🎉 Welcome to our website, where exploration meets inspiration! 🌟 Join us on our journey by subscribing to our YouTube channel, fueling our motivation to craft innovative projects. 🚀

Setup Video Guide Video

Steps to Install The Google Web App in your End.

What You Exactly Need 

A Google Account / Google Sheet File

Basic Knowledge of HTML , CSS , JAVASCRIPT 

Basic Knowledge of Google Appscript

Learn How to Deploy a New Web or Manage Web App in Appscript

Important!You need to have basic programming knowledge of HTML, CSS, and JavaScript to modify the code in this post. However, I will try my best to make the code readable and editable by non-programmers too.


Please Follow The Steps Here
How to Copy a Google Sheet

Click On Make a Copy To Copy the File In your Drive


Now Click on Extension and Choose a Appscript Option


Click on Deploy and Press on New Deployment


Now Here You Need to Select Anyone and Press on Deploy


After Deploy Allow Permission After Permission Given a URL Comes Which is Used to Access Your Web App and if You change in codes after deployment You need to apply Changes Need Deploy Again or Manage Deployments,

For Custom Projects!If You want a Custom Project For Your Business then Conatct Us :  +923224083545

Important!We always deliver what we promise to our clients. Quality over quantity is our motto! Our custom projects are priced reasonably and affordably for everyone. Join us and let's create something amazing together! 🎉🚀 Conatct Us :  +923224083545

Get Google Sheet

Get Github Link

Contact us For Project

Access all of Our Google Sheets in 50 USD

JOIN VIP MEMBERSHIP
code.gs 
function welcomeMessage(){
  var sheet = SpreadsheetApp.getActiveSheet();
  var Range = sheet.getRange("A2:B2");
  var data = Range.getValues();
  data.forEach(function (rowData) {
    
    var templ = HtmlService.createTemplateFromFile('Welcome-Email');
    var changes = 
      {
        name: rowData[0],
        emailAddress: rowData[1],
        chapterName: 'Astoe Student Club Wordpress Course',
        noOfEvent: 'first',
        dayOfEvent: 'today',
        timeOfEvent: '8 PM',
        eventLink: 'https://www.astoecompany.com',
        poweredBy: 'Astoe',
        chapterWebsite: 'https://www.astoecompany.com'
      };
    
    templ.changes = changes;
    var message = templ.evaluate().getContent();
  
  MailApp.sendEmail({
    to: changes.emailAddress,
    subject: "Astoe Wordpress Event",
    htmlBody: message
  });
  })
}

function feedbackMessage(){
  var sheet = SpreadsheetApp.getActiveSheet();
  var Range = sheet.getRange("C3:D3");
  var data = Range.getValues();
  data.forEach(function (rowData) {
    
    var templ = HtmlService.createTemplateFromFile('Feedback-Email');
    var changes = 
      {
        name: rowData[0],
        emailAddress: rowData[1],
        feedbackForm: 'https://www.astoecompany.com',
        chapterName: 'Astoe Student Club Wordpress Course',
        eventTitle: 'Intro to Wordpress Development Course',
        qwiklabsForm: 'place-link-here',
        poweredBy: 'Astoe',
        chapterWebsite: 'https://www.astoecompany.com'
      };
    
    templ.changes = changes;
    var message = templ.evaluate().getContent();
  
  MailApp.sendEmail({
    to: changes.emailAddress,
    subject: "Astoe Event Feedback",
    htmlBody: message
  });
  })  
}

Feedback-email.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>Welcome Email</title>
    <style>
      img {
        border: none;
        -ms-interpolation-mode: bicubic;
        max-width: 100%;
      }

      body {
        background-color: #f6f6f6;
        font-family: 'Roboto', sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        color: #202124;
        line-height: 1.4;
        margin: 0;
        padding: 0;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      table {
        border-collapse: separate;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        width: 100%; }
        table td {
          font-family: 'Roboto', sans-serif;
          font-size: 14px;
          color: #202124;
          vertical-align: top;
      }
      .body {
        background-color: #f6f6f6;
        width: 100%;
      }
      .container {
        display: block;
        margin: 0 auto !important;
        /* makes it centered */
        max-width: 580px;
        padding: 5px;
        width: 580px;
      }

      /* This should also be a block element, so that it will fill 100% of the .container */
      .content {
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        max-width: 580px;
        padding: 10px;
      }

      /* -------------------------------------
          HEADER, FOOTER, MAIN
      ------------------------------------- */
      header {
      margin: auto;
      text-align: center;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }

      .wrapper {
        box-sizing: border-box;
        padding: 20px;
      }

      .content-block {
        padding-bottom: 10px;
        padding-top: 10px;
      }

      .footer {
        clear: both;
        margin-top: 10px;
        text-align: center;
        width: 100%;
      }
        .footer td,
        .footer p,
        .footer span,
        .footer a {
          color: #999999;
          font-size: 12px;
          text-align: center;
      }

      /* -------------------------------------
          TYPOGRAPHY
      ------------------------------------- */
      h1,
      h2,
      h3,
      h4 {
        font-family: 'Roboto', sans-serif;
        color: #202124;
        font-weight: 400;
        line-height: 1.4;
        margin: 0;
        margin-bottom: 30px;
      }

      h1 {
        font-size: 35px;
        font-weight: 300;
        text-align: center;
        text-transform: capitalize;
      }

      p,
      ul,
      ol {
        font-family: 'Roboto', sans-serif;
        color: #202124;
        font-size: 14px;
        font-weight: normal;
        margin: 0;
        margin-bottom: 15px;
      }
        p li,
        ul li,
        ol li {
          list-style-position: inside;
          margin-left: 5px;
      }

      a {
        color: #3498db;
        text-decoration: underline;
      }

      /* -------------------------------------
          BUTTONS
      ------------------------------------- */
      .btn {
        box-sizing: border-box;
        width: 100%; }
        .btn > tbody > tr > td {
          padding-bottom: 15px; }
        .btn table {
          width: auto;
      }
        .btn table td {
          background-color: #ffffff;
          border-radius: 5px;
          text-align: center;
      }
        .btn a {
          background-color: #ffffff;
          border: solid 1px #3498db;
          border-radius: 5px;
          box-sizing: border-box;
          color: #3498db;
          cursor: pointer;
          display: inline-block;
          font-size: 14px;
          font-weight: bold;
          margin: 0;
          padding: 12px 25px;
          text-decoration: none;
          text-transform: capitalize;
      }

      .btn-primary table td {
        background-color: #3498db;
      }

      .btn-primary a {
        background-color: #3498db;
        border-color: #3498db;
        color: #ffffff;
      }

      /* -------------------------------------
          OTHER STYLES THAT MIGHT BE USEFUL
      ------------------------------------- */
      .last {
        margin-bottom: 0;
      }

      .first {
        margin-top: 0;
      }

      .align-center {
        text-align: center;
      }

      .align-right {
        text-align: right;
      }

      .align-left {
        text-align: left;
      }

      .clear {
        clear: both;
      }

      .mt0 {
        margin-top: 0;
      }

      .mb0 {
        margin-bottom: 0;
      }

      .preheader {
        color: transparent;
        display: none;
        height: 0;
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        mso-hide: all;
        visibility: hidden;
        width: 0;
      }

      .powered-by a {
        text-decoration: none;
      }

      hr {
        border: 0;
        border-bottom: 1px solid #f6f6f6;
        margin: 20px 0;
      }
      @media only screen and (max-width: 620px) {
        table[class=body] h1 {
          font-size: 28px !important;
          margin-bottom: 10px !important;
        }
        table[class=body] p,
        table[class=body] ul,
        table[class=body] ol,
        table[class=body] td,
        table[class=body] span,
        table[class=body] a {
          font-size: 16px !important;
        }
        table[class=body] .wrapper,
        table[class=body] .article {
          padding: 10px !important;
        }
        table[class=body] .content {
          padding: 0 !important;
        }
        table[class=body] .container {
          padding: 0 !important;
          width: 100% !important;
        }
        table[class=body] .main {
          border-left-width: 0 !important;
          border-radius: 0 !important;
          border-right-width: 0 !important;
        }
        table[class=body] .btn table {
          width: 100% !important;
        }
        table[class=body] .btn a {
          width: 100% !important;
        }
        table[class=body] .img-responsive {
          height: auto !important;
          max-width: 100% !important;
          width: auto !important;
        }
      }

      /* -------------------------------------
          PRESERVE THESE STYLES IN THE HEAD
      ------------------------------------- */
      @media all {
        .ExternalClass {
          width: 100%;
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
          line-height: 100%;
        }
        .apple-link a {
          color: inherit !important;
          font-family: inherit !important;
          font-size: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
          text-decoration: none !important;
        }
        #MessageViewBody a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
        .btn-primary table td:hover {
          background-color: #34495e !important;
        }
        .btn-primary a:hover {
          background-color: #34495e !important;
          border-color: #34495e !important;
        }
      }

    </style>
  </head>
  <body class="">
    <span class="preheader">Thank you for registering to <?= changes.eventTitle?>!
We hope you were able to attend and connect with fellow members at the
<?= changes.chapterName ?> event.</span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <div class="content">
          <!-- HEADER LOGO AND NAME -->
          <header>
          <img src="https://cdn.bio.link/uploads/profile_pictures/2023-04-16/
LtkOkQHLljUSvYcfJpKC8NRFH1q3MfXZ.png" alt="Developer Student Clubs Logo" width="125" height="60.5">
          <p><span style="font-size:19px;">Astoe Student Clubs</span>
          <br><?= changes.chapterName ?></p>
          </header>
            <table role="presentation" class="main">
              <tr>
                <td class="wrapper">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                     <td>
                    <p style="font-size:16px;">Dear <?= changes.name ?>,
</p>
                   <p>We extend our sincerest gratitude for your participation in
<?= changes.eventTitle ?>. Your presence greatly enriched the gathering, and we trust
you found it both rewarding and enjoyable.</p>
                    <p>Reflecting on your engagement at the <?= changes.chapterName ?>
event, we invite you to share your invaluable insights with us. Your feedback serves as
a compass guiding our efforts towards enhancing future events, ensuring they align seamlessly
with your expectations and aspirations.</p>
                    <p>Kindly spare a moment to articulate your thoughts and impressions,
thus empowering us to tailor forthcoming experiences to exceed your discerning preferences.
Your contributions are instrumental in sculpting memorable encounters for our community.</p>
                    <p>Thank you once again for your unwavering support and commitment to
our shared journey. We eagerly anticipate your reflections.</p>
                        <table role="presentation" border="0" cellpadding="0"
cellspacing="0" class="btn btn-primary">
                          <tbody>
                            <tr>
                              <td align="left">
                                <table role="presentation" border="0"
cellpadding="0" cellspacing="0">
                                  <tbody>
                                    <tr>
                                      <td> <a href="<?= changes.feedbackForm ?>"
target="_blank">Give Your Feedback</a> </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <p>If you want to participate in the challenge. Please,
Provide the link to your account here</p>
                        <table role="presentation" border="0" cellpadding="0"
cellspacing="0" class="btn btn-primary">
                          <tbody>
                            <tr>
                              <td align="left">
                                <table role="presentation" border="0" cellpadding="0"
cellspacing="0">
                                  <tbody>
                                    <tr>
                                      <td> <a href="<?= changes.qwiklabsForm ?>"
target="_blank">Participate in The Challange</a> </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <p>Thanks again for your interest and congratulations!</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <div class="footer">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-block">
                    <span class="apple-link">The Astoe Student Club Team</span>
                    <br><?= changes.chapterName ?>
                  </td>
                </tr>
                <tr>
                  <td class="content-block powered-by">
                    Powered by <a href="<?= changes.chapterWebsite ?>"><?=
changes.poweredBy ?> Company</a>.
                  </td>
                </tr>
              </table>
            </div>
            <!-- END FOOTER -->

          </div>
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>


Welcome-Email.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>Welcome Email</title>
    <style>
      img {
        border: none;
        -ms-interpolation-mode: bicubic;
        max-width: 100%;
      }

      body {
        background-color: #f6f6f6;
        font-family: 'Roboto', sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        color: #202124;
        line-height: 1.4;
        margin: 0;
        padding: 0;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      table {
        border-collapse: separate;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        width: 100%; }
        table td {
          font-family: 'Roboto', sans-serif;
          font-size: 14px;
          color: #202124;
          vertical-align: top;
      }
      .body {
        background-color: #f6f6f6;
        width: 100%;
      }

      /* Set a max-width, and make it display as block so it will automatically
stretch to that width, but will also shrink down on a phone or something */
      .container {
        display: block;
        margin: 0 auto !important;
        /* makes it centered */
        max-width: 580px;
        padding: 5px;
        width: 580px;
      }

      /* This should also be a block element, so that it will fill 100% of the .container */
      .content {
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        max-width: 580px;
        padding: 10px;
      }

      /* -------------------------------------
          HEADER, FOOTER, MAIN
      ------------------------------------- */
      header {
      margin: auto;
      text-align: center;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }

      .wrapper {
        box-sizing: border-box;
        padding: 20px;
      }

      .content-block {
        padding-bottom: 10px;
        padding-top: 10px;
      }

      .footer {
        clear: both;
        margin-top: 10px;
        text-align: center;
        width: 100%;
      }
        .footer td,
        .footer p,
        .footer span,
        .footer a {
          color: #999999;
          font-size: 12px;
          text-align: center;
      }

      /* -------------------------------------
          TYPOGRAPHY
      ------------------------------------- */
      h1,
      h2,
      h3,
      h4 {
        font-family: 'Roboto', sans-serif;
        color: #202124;
        font-weight: 400;
        line-height: 1.4;
        margin: 0;
        margin-bottom: 30px;
      }

      h1 {
        font-size: 35px;
        font-weight: 300;
        text-align: center;
        text-transform: capitalize;
      }

      p,
      ul,
      ol {
        font-family: 'Roboto', sans-serif;
        color: #202124;
        font-size: 14px;
        font-weight: normal;
        margin: 0;
        margin-bottom: 15px;
      }
        p li,
        ul li,
        ol li {
          list-style-position: inside;
          margin-left: 5px;
      }

      a {
        color: #3498db;
        text-decoration: underline;
      }

      /* -------------------------------------
          BUTTONS
      ------------------------------------- */
      .btn {
        box-sizing: border-box;
        width: 100%; }
        .btn > tbody > tr > td {
          padding-bottom: 15px; }
        .btn table {
          width: auto;
        margin: auto;
      }
        .btn table td {
          background-color: #ffffff;
          border-radius: 5px;
          text-align: center;
      }
        .btn a {
          background-color: #ffffff;
          border: solid 1px #3498db;
          border-radius: 5px;
          box-sizing: border-box;
          color: #3498db;
          cursor: pointer;
          display: inline-block;
          font-size: 14px;
          font-weight: bold;
          margin: 0;
          padding: 12px 25px;
          text-decoration: none;
          text-transform: capitalize;
      }

      .btn-primary table td {
        background-color: #3498db;
      }

      .btn-primary a {
        background-color: #3498db;
        border-color: #3498db;
        color: #ffffff;
      }

      /* -------------------------------------
          OTHER STYLES THAT MIGHT BE USEFUL
      ------------------------------------- */
      .last {
        margin-bottom: 0;
      }

      .first {
        margin-top: 0;
      }

      .align-center {
        text-align: center;
      }

      .align-right {
        text-align: right;
      }

      .align-left {
        text-align: left;
      }

      .clear {
        clear: both;
      }

      .mt0 {
        margin-top: 0;
      }

      .mb0 {
        margin-bottom: 0;
      }

      .preheader {
        color: transparent;
        display: none;
        height: 0;
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        mso-hide: all;
        visibility: hidden;
        width: 0;
      }

      .powered-by a {
        text-decoration: none;
      }

      hr {
        border: 0;
        border-bottom: 1px solid #f6f6f6;
        margin: 20px 0;
      }
      @media only screen and (max-width: 620px) {
        table[class=body] h1 {
          font-size: 28px !important;
          margin-bottom: 10px !important;
        }
        table[class=body] p,
        table[class=body] ul,
        table[class=body] ol,
        table[class=body] td,
        table[class=body] span,
        table[class=body] a {
          font-size: 16px !important;
        }
        table[class=body] .wrapper,
        table[class=body] .article {
          padding: 10px !important;
        }
        table[class=body] .content {
          padding: 0 !important;
        }
        table[class=body] .container {
          padding: 0 !important;
          width: 100% !important;
        }
        table[class=body] .main {
          border-left-width: 0 !important;
          border-radius: 0 !important;
          border-right-width: 0 !important;
        }
        table[class=body] .btn table {
          width: 100% !important;
        }
        table[class=body] .btn a {
          width: 100% !important;
        }
        table[class=body] .img-responsive {
          height: auto !important;
          max-width: 100% !important;
          width: auto !important;
        }
      }
      @media all {
        .ExternalClass {
          width: 100%;
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
          line-height: 100%;
        }
        .apple-link a {
          color: inherit !important;
          font-family: inherit !important;
          font-size: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
          text-decoration: none !important;
        }
        #MessageViewBody a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
        .btn-primary table td:hover {
          background-color: #34495e !important;
        }
        .btn-primary a:hover {
          background-color: #34495e !important;
          border-color: #34495e !important;
        }
      }

    </style>
  </head>
  <body class="">
    <span class="preheader">Congratulations! We are thrilled to inform you
that you have been selected as a member in our Astoe Developer Student Club!</span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <div class="content">
          <!-- HEADER LOGO AND NAME -->
          <header>
          <img src="https://cdn.bio.link/uploads/profile_pictures
/2023-04-16/LtkOkQHLljUSvYcfJpKC8NRFH1q3MfXZ.png" alt="Astoe Student Clubs Logo" width="160" height="60.5">
          <p><span style="font-size:19px;">Astoe Student Clubs</span>
          <br><?= changes.chapterName ?></p>
          </header>
           
            <!-- START CENTERED WHITE CONTAINER -->
            <table role="presentation" class="main">
           
              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td>
                        <p style="font-size:16px;">Dear <?= changes.name ?>,</p>
                        <p>Congratulations! We are thrilled to inform you that
you have been selected as a member in our Developer Student Club!</p>
                        <p>A meeting invitation will be sent to you shortly to
attend our <?= changes.noOfEvent ?> event <?= changes.dayOfEvent ?>
<?= changes.timeOfEvent ?>, it will have a link included inside it.
                        <br>You can join the meeting by opening the <b>meet</b>
link in a chrome tab. <b>No need to install any applications.</b></p>
                        <table role="presentation" border="0" cellpadding="0"
cellspacing="0" class="btn btn-primary">
                          <tbody>
                            <tr>
                              <td align="left">
                                <table role="presentation" border="0"

cellpadding="0" cellspacing="0">
                                  <tbody>
                                    <tr>
                                      <td> <a href="<?= changes.eventLink ?>" target="_blank">Check out the Event</a> </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <p>As for the agenda you will find it inside the meeting invitation. We can’t wait to see you <?= changes.dayOfEvent ?>!!
                        <br>P.s. Don’t forget to prepare your laptop.</p>
                        <p>Thanks again for your interest and congratulations!</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

            <!-- END MAIN CONTENT AREA -->
            </table>
            <!-- END CENTERED WHITE CONTAINER -->

            <!-- START FOOTER -->
            <div class="footer">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-block">
                    <span class="apple-link">The Astoe Student Club Team</span>
                    <br><?= changes.chapterName ?>
                  </td>
                </tr>
                <tr>
                  <td class="content-block powered-by">
                    Powered by <a href="<?= changes.chapterWebsite ?>">
<?= changes.poweredBy ?> Company</a>.
                  </td>
                </tr>
              </table>
            </div>
            <!-- END FOOTER -->

          </div>
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

For Custom Projects!If You want a Custom Project For Your Business then Conatct Us :  +923224083545 . 

Terms of Use

If you want to use this Code in your posts, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Codebox by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.rameezimdad.blogspot.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about to help uou to Automate Your Business. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

#Appscript #B SERIES #Free Web App

Post a Comment

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.