Contact us Page In web site ////with html and javascript

Question

I'm developing Website here. I create Contact Us Page.

So I won't To know code for customer can fill them's details like Mobile number, email id and messages will send on my mail with using "SMTP" in JavaScript.

Here Design is already created....

Thanks...

And you're doing what in the meanwhile we're doing your job? — Teemu, Apr 05 '18 at 05:39
`Here Design is already created.` good ... so what's the question? — Jaromanda X, Apr 05 '18 at 05:45
the question here i use one form and customer can fill the details like mobile no,email-id and message then they submit it so this all detail will send on my mail-id.. — Ajay Patel, Apr 05 '18 at 05:56

marcel.js · Accepted Answer · 2018-04-05T09:29:25.103

0

You can't send an email using JavaScript. You can only open a mailto link, so the users mail client opens (additional with a predefined subject and body)

window.open('mailto:test@example.com?subject=subject&body=body');

Have you searched for "javascript send email" on Stackoverflow? https://stackoverflow.com/a/7381162/8765205

edited Apr 05 '18 at 09:29

answered Apr 05 '18 at 05:46

marcel.js

313
2
12

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Sending Emails In Javascript

Firstly,If you want to send email via email clients you can use mailto: in your html code without javascript. It will redirect automatically to default email client of your os but If you want send email without email clients you can use gmail api or other apis for this task then javascript part is easy. Ok Let's look at how can you do this with gmail api

Google Developer Console and apply your app for gmail api, after got credentials then create your Contact Us Page

I will give you example from google

<!DOCTYPE html>
 <html>
   <head>
     <title>Gmail API Quickstart</title>
     <meta charset='utf-8' />
   </head>
 <body>
<p>Gmail API Quickstart</p>

<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>

<pre id="content"></pre>

<script type="text/javascript">
  // Client ID and API key from the Developer Console
  var CLIENT_ID = '<YOUR_CLIENT_ID>';
  var API_KEY = '<YOUR_API_KEY>';

  // Array of API discovery doc URLs for APIs used by the quickstart
  var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"];

  // Authorization scopes required by the API; multiple scopes can be
  // included, separated by spaces.
  var SCOPES = 'https://www.googleapis.com/auth/gmail.readonly';

  var authorizeButton = document.getElementById('authorize-button');
  var signoutButton = document.getElementById('signout-button');

  /**
   *  On load, called to load the auth2 library and API client library.
   */
  function handleClientLoad() {
    gapi.load('client:auth2', initClient);
  }

  /**
   *  Initializes the API client library and sets up sign-in state
   *  listeners.
   */
  function initClient() {
    gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      discoveryDocs: DISCOVERY_DOCS,
      scope: SCOPES
    }).then(function () {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }

  /**
   *  Called when the signed in status changes, to update the UI
   *  appropriately. After a sign-in, the API is called.
   */
  function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'block';
      listLabels();
    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
    }
  }

  /**
   *  Sign in the user upon button click.
   */
  function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
  }

  /**
   *  Sign out the user upon button click.
   */
  function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
  }

  /**
   * Append a pre element to the body containing the given message
   * as its text node. Used to display the results of the API call.
   *
   * @param {string} message Text to be placed in pre element.
   */
  function appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }

  /**
   * Print all Labels in the authorized user's inbox. If no labels
   * are found an appropriate message is printed.
   */
  function listLabels() {
    gapi.client.gmail.users.labels.list({
      'userId': 'me'
    }).then(function(response) {
      var labels = response.result.labels;
      appendPre('Labels:');

      if (labels && labels.length > 0) {
        for (i = 0; i < labels.length; i++) {
          var label = labels[i];
          appendPre(label.name)
        }
      } else {
        appendPre('No Labels found.');
      }
    });
  }

</script>

<script async defer src="https://apis.google.com/js/api.js"
  onload="this.onload=function(){};handleClientLoad()"
  onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

Then replace your keys there. Good luck

Contact us Page In web site ////with html and javascript

2 Answers2

Sending Emails In Javascript