<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
  <div class="demo-ribbon"></div>
  <main class="demo-main mdl-layout__content">
    <div class="demo-container mdl-grid">
      <div class="mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--10-col">
        <h5>Live Email App</h5>
        <form class="sendEmail" method="post" autocomplete="off">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="email" id="from" data-required="true">
            <label class="mdl-textfield__label" for="sample3">From</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="email" id="to" data-required="true">
            <label class="mdl-textfield__label" for="sample3">To</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="subject" data-required="true">
            <label class="mdl-textfield__label" for="sample3">Subject</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea class="mdl-textfield__input" type="text" rows="3" id="emailbody" data-required="true"></textarea>
            <label class="mdl-textfield__label" for="sample5">Email body</label>
          </div>
          <div>
            <button style="background-color: #3baddc;" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Send</button>
            <div class="mdl-spinner mdl-js-spinner is-active"></div>

            <span class="success-help">Your message has been sent!</span>
          </div>
        </form>
      </div>
    </div>
  </main>
</div>

.demo-ribbon {
  width: 100%;
  height: 34vh;
  background-color: #3baddc;
  flex-shrink: 0;
}

.demo-main {
  margin-top: -35vh;
  flex-shrink: 0;
}

.demo-header .mdl-layout__header-row {
  padding-left: 40px;
}

.demo-container {
  max-width: 1600px;
  width: calc(100% - 16px);
  margin: 0 auto;
}

.demo-content {
  border-radius: 2px;
  padding: 0px 56px 80px;
}

.demo-layout.is-small-screen .demo-content {
  padding: 0px 28px 40px;
}

.demo-content h3 {
  margin-top: 48px;
}

.demo-footer {
  padding-left: 40px;
}

.demo-footer .mdl-mini-footer--link-list a {
  font-size: 13px;
}

.mdl-textfield {
  width: 100%
}

.success-help {
  padding: 0 15px;
  vertical-align: 0px;
  display: none;
  font-size: 16px;
  color: #444;
}

.mdl-spinner {
  vertical-align: middle;
  margin: 0px 10px;
  display: none;
}

$(function() {
  ["from", "to", "subject", "emailbody"].forEach(function(field) {
    $("#" + field).attr("required", true);
    $("#" + field).focus(function() {
      $(".success-help").fadeOut("fast");
    });
  });

  $(".sendEmail").submit(function(e) {
    $(".mdl-spinner").fadeIn("slow").css("display", "inline-block");
    e.preventDefault();
    var from = $("#from").val();
    var to = $("#to").val();
    var subject = $("#subject").val();
    var emailbody = $("#emailbody").val();
    $.ajax({
      url: "https://mybench-sendingemail.backbench.io/send",
      data: {
        from: from,
        to: to,
        subject: subject,
        emailbody: emailbody
      },
      error: function() {
        $(".mdl-spinner").fadeOut("fast");
        $(".success-help").html("An error has occurred").fadeIn("slow");
      },
      success: function(data) {
        $(".mdl-spinner").fadeOut("fast");
        ["from", "to", "subject", "emailbody"].forEach(function(field) {
          $("#" + field).val("");
        });
        $(".success-help").fadeIn("slow");
      },
      type: "POST"
    });
  });
});