MANDRILL APP

by nightcoregirl

HTML

<script src="https://mandrillapp.com/api/docs/js/mandrill.js"></script>
<div id="form">
     <section>
            <span id="contactContainer">
                
            <form name="myForm" class="infocontent">
                <input type="email" class="inputEmail required" name="email" id="theemail" placeholder="EMAIL"/><br/></br>
                
              <form name="myForm" class="infocontent">
                <input type="subject" class="inputSubject required" name="subject" id="thesubject" placeholder="SUBJECT"/><br/></br>
     

                <textarea class="inputMessage messageHeight required" name="message" id="thetext" placeholder="MESSAGE"></textarea>

                <div id="load"></div>
                <input type="submit" name="submit" class="submit" value="submit"/>
              </form>
          </span>
    </section>
</div>

CSS

body{
      background:black;
  }

              #form{
                  font-weight:300;
                  letter-spacing:2px;
                  font-size: 14px;
                  text-transform:uppercase;
                  position:fixed;
                  color:#fff;
                  top:0;
                  bottom:0;
                  left:0;
                  right:0;
                  width:100%;
                  height:100%;
                  background:rgba(1,1,1,0.8);
                  z-index:80;
            }
            
             #form section{
                  min-height: 100vh;
                  min-width: 100vw;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
            
                
                .inputEmail, .inputMessage, .inputSubject{
                    font-family: 'Arial', sans-serif;
                    font-size: 12px;
                    height:3em;
                    background:transparent;
                    margin: 0.25em;
                    padding:0px 10px;
                }
                
            
                .inputEmail, .inputPhone, .inputMessage, .inputSubject {
                  border: 1px solid #fff;
                }
                
                .inputEmail, .inputSubject, .inputMessage {
                  width: 400px;
                  color: #fff;
                }
                
                
                .submit {
                  margin: 0.25em;
                  font-size: 14px;
                  text-align: center;
                  font-weight:300;
                  letter-spacing:2px;
                  font-family: 'Oswald', sans-serif;
                  -webkit-box-shadow:0 0 10px rgba(255, 255, 255, 0.5);
                  -moz-box-shadow:0 0 10px rgba(255, 255, 255, 0.5);
                  box-shadow:0 0 10px rgba(255, 255, 255, 0.5);
                  text-transform:uppercase;
          ...

JavaScript

$(document).ready(function() {
    
          $('#contact').on("click", function(event){
            event.preventDefault();
            $('#form').addClass("expand");
            console.log("test form");
          });
          
          $(document).keydown(function(e){
            if(e.keyCode == 27) {
              $('#form').removeClass("expand");
            }
          });
        
          var timer;
          var delay = 2500;
          $('.submit').bind('click',function() {
            window.clearTimeout(timer);
                timer = window.setTimeout(function(){
                $('.infocontent').closest('form').find("input[type=email], textarea").val("");
                    $('.infocontent').closest('form').find("input[type=subject], textarea").val("");
                $(".infocontent").closest('form').find("input[type=text], textarea").val("");
                }, delay);
                  })
      });
 

$('form[name=myForm]').submit(function(e) {
  e.preventDefault();
  var email = $('#theemail').val();
  var text = $('#thetext').val();
  var text = $('#thesubject').val();

  var mandrill = {
    "key": "a5bNXGYeVOjIVLCOpzQbxw",
    "message": {
      "html": text,
      "text": text,
      "subject": ‘Hello World’,
      "from_email": email,
      "from_name": "contact",
                       
      "to": [
      {
            'email':'[email protected]',
                    'name': 'whatever',
                    'type': 'to'
      }
      ],
      "headers": {
        "Reply-To": email
      }
    }
  }
  
    
});