How to add blogger contact form direct email sending

If someone wants to contact me through my blogger website, then the mail should come directly from his gmail to my gmail or my mail address.

Creating a contact page like this requires html, css and javascript.

This solution can be done very easily with the following codes.

Of course you need to go to blogger dashboard and after going to page, create a new page, which you can name contact us or you can use any name you want. Of course you need to use an HTML view. Otherwise you not work this.

Copy the following codes and place them on the page where you want to solve this problem.

  <style type="text/css">
/* source css https://median-ui.jagodesain.com */
.cArea.hidden{display:none;}.ContactForm{max-width:500px;font-size:14px}.cArea:not(:last-child){margin-bottom:25px}.cArea label{display:block;position:relative}.cArea label .n{display:block;position:absolute;left:0;right:0;top:0;color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease}.cArea label .n.req::after{content:'*';font-size:85%}.cArea textarea{height:100px}.cArea textarea:focus,.cArea textarea[data-text=fl]{height:200px}.cArea input:focus ~ .n,.cArea textarea:focus ~ .n,.cArea input[data-text=fl] ~ .n,.cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec}.cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal}.nArea .error-message{color:#d32f2f}.ContactForm input[type=text],.ContactForm input[type=number],.ContactForm textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#ececec;padding:25px 16px 8px 16px;line-height:1.6em;transition:all .1s ease}.ContactForm input[type=button]{display:inline-flex;align-items:center;padding:12px 30px;outline:0;border:0;border-radius:4px;color:#fffdfc;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;background: black;}.cArea .hidden{display:none}
</style>

<div class="ContactForm s-2" id="ContactForm1">
  <form name="cForm">
    <div class="cArea">
      <label>
        <input class="cInpt cName" data-em="Name is required" id="Username" name="name" required="required" type="text" />
        <span class="n req">Name</span>
      </label>
    </div>
    <div class="cArea">
      <label>
        <input class="cInpt cMail" data-em="Email / Mobile No is required" id="UserNumber" name="nomor hp" required="required" type="text" />
        <span class="n req">Email / Mobile No</span>
      </label>
    </div>
    <div class="cArea">
      <label>
        <textarea class="cInpt cMsg" data-em="The message cannot be empty" id="UserMessage" name="message" required="required" rows="3"></textarea>
        <span class="n req">Message</span>
      </label>
    </div>
    <div class="cArea">
      <input class="cBtn" id="sendmessage" type="button" value="Submit" />
    </div>
    <div class="cArea nArea">
      <p class="cNtf" id="error-message"></p>
    </div>
  </form>
</div>

<script>
/*<![CDATA[*/ 
// javascript
var sharedFreeBy = 'https://therealanwarul.com.bd'; // If credits are removed, the script cannot function
var email = 'youremailaddres@gmail.com'; //Your Email Address
var subjectEmail = 'Want to ask '; //Email Subject But Only Appears On Smartphones

//Optional message format can be changed or not
var pengirim = 'Name : ';
var noPengirim = 'Phone Number : ';
var kirimVia = 'This email was sent via : ';

if (sharedFreeBy === atob("aHR0cHM6Ly90aGVyZWFsYW53YXJ1bC5jb20uYmQ=")) {
  var inputs = document.querySelectorAll(".ContactForm input[type=text], .ContactForm input[type=number], .ContactForm textarea");
  for (var i = 0x0; i < inputs.length; i++) {
    var input = inputs[i];
    input.addEventListener("input", function () {
      var _0x526dbb = this.value ? 'fl' : 'nfl';
      this.setAttribute("data-text", _0x526dbb);
    });
  }
  var Username = document.querySelector("#Username");
  var UserNumber = document.querySelector("#UserNumber");
  var UserMessage = document.querySelector("#UserMessage");
  if (Username.value === '' && Username.getAttribute("required") != "required") {
    var pengirim = '';
  }
  ;
  if (UserNumber.value === '' && UserNumber.getAttribute("required") != "required") {
    var noPengirim = '';
  }
  ;
  document.querySelector("#sendmessage").addEventListener("click", sendForm);
  function sendForm() {
    if (Username.value === '' && Username.getAttribute('required') === "required") {
      document.querySelector("#error-message").innerHTML = Username.getAttribute('data-em');
    } else {
      if (UserNumber.value === '' && UserNumber.getAttribute("required") === "required") {
        document.querySelector("#error-message").innerHTML = UserNumber.getAttribute("data-em");
      } else {
        if (UserMessage.value === '' && UserMessage.getAttribute("required") === "required") {
          document.querySelector("#error-message").innerHTML = UserMessage.getAttribute("data-em");
        } else {
          var _0x24bae8 = "https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=";
          var _0x3f1015 = "&subject=" + subjectEmail;
          var _0x5f5c1a = '';
          var _0x547cc2 = '';
          if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var _0x24bae8 = 'mailto:';
            var _0x547cc2 = '';
            _0x5f5c1a = "?cc=&bcc=";
          }
          var _0x4c325d = '' + Username.value + "%0A" + '' + UserNumber.value + '%0A%0A' + UserMessage.value;
          var _0x2e0836 = location.href;
          var _0x5d5c29 = _0x24bae8 + email + _0x5f5c1a + _0x3f1015 + '&body=' + _0x4c325d + '%0A%0A' + _0x547cc2 + _0x547cc2 + kirimVia + _0x2e0836;
          window.open(_0x5d5c29, "_blank");
          window.location.href = _0x2e0836;
        }
      }
    }
  }
} else {
  window.location.href = atob("aHR0cHM6Ly93d3cudGhlcmVhbGFud2FydWwuY29tLmJkLzIwMjQvMTIvY29udGFjdC1mb3JtLWRpcmVjdC1lbWFpbC1zZW5kaW5nLmh0bWw=");
}
/*]]>*/</script>

Then change your Gmail address. That is, change the mail address through which you receive visitor feedback here.

Now you are done and publish the page and you will see your work complete.

Before the visitor visits, see if the work is done properly!