Send Email from a Static HTML Form using Google Apps Mail

how to send email from html page using javascript
sending html form data to an email address
how to send email from static html page
google apps script send html email
html5 contact form send email
send html form data to email using javascript
javascript send email gmail
javascript contact form send email

I have been working through this link https://www.npmjs.com/package/html-form-send-email-via-google-script-without-server also https://github.com/dwyl/html-form-send-email-via-google-script-without-server but can't make it through points 10 & 11 - getting a 'thank you for your message' alert instead of JSON response/alert.

I have talked to Google online and they have referred me here now. I'm using it with bootstrap - my codes is below, any ideas would be great.

<section class="test">
<a name="index"></a>
  <div class="container">
    <div class="row index_section">
      <div class="col-md-10 col-md-push-1">
      <h2 class="index_h2">The RE Ledger Foundation is a consortium of east coast real estate and financial services executives with the purpose of exploring the applications and advantages of harnessing a blockchain backed peer-to-peer network.</h2>
      <p><a class="btn btn-secondary btn-lg index_button" role="button" href="#contact" data-toggle="modal" >Contact Us</a></p>
      </div>
    </div>
  </div>

</section>
  <div class="modal fade" id="contact" role="dialogue">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="form-horizontal" method="POST" action="https://script.google.com/a/macros/headlandholdings.co/s/AKfycbyA1uVrYJK3dowguYNKo65hPfQKLGCFh8_865dFMhXzfE__Io8/exec">
          <div class="modal-header">
            <h4>Contact RE Ledger</h4>
          </div>
          <div class="modal-body">

            <div class="form-group"><!-- For every row -->
              <label for="Contact-name" class="col-lg-2 control-label"> Name: </label>
              <div class="col-lg-10">

                <input type="text" class="form-control" id="contact-name" name="contact-name" placeholder="Please put your full name">
              </div>
            </div>

            <div class="form-group"><!-- For every row -->
              <label for="contact-email" class="col-lg-2 control-label"> Email: </label>
              <div class="col-lg-10">

                <input type="email" class="form-control" id="contact-email" name="contact-email" placeholder="email@siteexample.com">
              </div>
            </div>

            <div class="form-group"><!-- For every row -->
              <label for="contact-message" class="col-lg-2 control-label"> Message: </label>
              <div class="col-lg-10">

                <textarea type= "text" name="message" rows="8" class="form-control"> </textarea>
              </div>
            </div>

            <div class="modal-footer">
              <a href="#index" class="btn btn-default" data-dismiss="modal">Close it</a>
              <button class="btn btn-primary" type="submit"> Submit</button>
            </div>
            <div style="display:none;" id="thankyou_message">
              <h2><em>Thanks</em> for contacting us!</h2>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</div><!-- /.container -->

<!-- Included so that when you complete a contact request you get a message -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

<form class="form-horizontal" method="POST" action="https://script.google.com/a/macros/headlandholdings.co/s/AKfycbyA1uVrYJK3dowguYNKo65hPfQKLGCFh8_865dFMhXzfE__Io8/exec">

In the above line of code, the action= should be referring the link provided by Google. In point 5 of the github link you provided, you should get a link after deploy web app. Use that link instead of the example code.

A tip for you: only copy codes you understand.

How to send an email from a static HTML page using Google Sheets , Sometimes you have a sample static websites created with HTML, CSS, and javascript and you or any other language. you want to send an email without even using any SMTP server. Click on publish > Deploy as a web app. Now open the file in the browser and test it, just fill the form and click send. In this article or small lecture, I will show you how to send an email to your static page using only javascript and google sheets service. Step by Step Guide. 1. The first thing you have to do is to open the link below: Google Sheet Copy Link. 2. Click on make a copy. You will see a spreadsheet on front of you. 3. Rename the file if you want. 4.

Ok - this has taken ages but I figured it out. First of all use the Github link at the top not the other one - it's not as easy to follow.

The issue with the JSON/Ajax was that I was trying to use a different modal to the google sheets one in the example. The important bit is that the id="gforms" line is inserted where your personal generated email address link.

I then took the index example from github and methodically moved across all of the name data. It's tedious but it worked

  <div class="modal fade" id="contact" role="dialogue">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="gform" class="form-horizontal" method="POST" action="--- YOUR LINK HERE ---">

          <div class="modal-header">
            <h4>Contact RE Ledger</h4>
          </div>

          <div class="modal-body">




            <fieldset class="form-group">
              <label for="name" class="col-lg-2 control-label">Name: </label>
              <div class="col-lg-10">
              <input type="text" class="form-control" id="name" name="name" placeholder="Please put your full name" />
            </fieldset>

            <fieldset class="form-group">
              <label for="email" class="col-lg-2 control-label">Email: </label>
              <div class="col-lg-10">
              <input type="email" class="form-control" id="email" name="email" value="" required placeholder="email@siteexample.com"/>
            </fieldset>

            <fieldset class="form-group">
              <label for="message" class="col-lg-2 control-label">Message: </label>
              <div class="col-lg-10">
              <textarea type= "text" id="message" name="message" rows="8" class="form-control"></textarea>
            </fieldset>

            <div class="modal-footer">
              <a href="#index" class="btn btn-default" data-dismiss="modal">Close it</a>
              <button class="btn btn-primary" type="submit"> Submit</button>
            </div>


          </div>
        </form>
        <!-- Customise the Thankyou Message People See when they submit the form: -->

        <div style="display:none;" id="thankyou_message">
          <h2 class='col-lg-10 model_message'>  Thanks for your message - We will get back to you soon</h2>
        </div>

      </div>
    </div>
  </div>






</div><!-- /.container -->

<!-- Included so that when you complete a contact request you get a message -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

How to send an email from a static HTML page with Google sheets , How to send email from a static HTML. to sending an email from an HTML page using Google Apps mail. Create Your Basic HTML Form. Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Talent Hire technical talent

  1. make sure that your form has class 'gform'
  2. make sure to add another div under the form directly has class 'form-elements' and close this div before 'thankyou_message'Div

Send Email from a Static HTML, Send an email without back-end/server side code. available for sending an email here I am explaining steps to sending an email from html page using Google Apps mail. 1. Fill in some sample data in the HTML Form: 12. Send Email from a Static HTML Form using Google Apps Mail!. A Step-by-Step Example of using an HTML Form to send a Contact Us Message via Email without a Backend Server using a Google Script - No PHP, Python, Ruby, Java, Node.js etc.

Send Email from a Static HTML Form using Google Apps Mail , Bear in mind, if you don't even need to send emails from your static is exactly the same as sending an email via any webpage form. later on send emails, create an index.html file inside the public folder. The login will likely ask your email address, which could be anyone you use daily such as GMail,  First, we load the HTML template for the email. Then assign the candidate object to a variable in the template. When you call evaluate (), the variables in the template are used to compose the HTML email. (See candidate.first_name in the HTML template)

Send Email from a Static HTML, You can send HTML email from Google Apps Script. For example, suppose you want to send emails from your Google Sheet You can send email using MailApp. How to get input from HTML form using Google Apps Script. Use Gmail to create an email that looks like the one that you want to send using Apps Script First, begin composing an email in Gmail. Then, copy paste the table containing stock information from the sheet into the email body. Send this email to yourself and use Gmail to get the HTML code for this email

How to send emails from static websites, Formspree is a form backend, API and email service for HTML forms. It is the simplest way to embed custom contact us forms, order forms, or email capture forms  Google Forms + Google Sheets + Google Apps Script = . Easy Database Solution for Static Websites (such as sending a notification mail) on each entry. The first step is to create the HTML

Comments
  • Hi - that's the correct generated link - what makes you think it isn't? I presume the fact messages are being forwarded on to the email account confirms this
  • @Otis Because if you are not the owner of that github post and share SAME google account. You will not be able to generate that same link. When I follow the steps for confirmation, I did not generate the same link as well. When you deploy as web app, you are deploying your OWN web app, thus generating your OWN link.
  • that's what I've done the link being generated belongs to me. It's not the same as cloud.githubusercontent.com/assets/194400/10560470/…