JSFiddle - React, Tailwind, and code Playground

by nightcoregirl

HTML

<script src="https://mandrillapp.com/api/docs/js/mandrill.js"></script>
  <div id="form">
     <sectiozn id="contact">
        <span id="contactContainer">
            <form name="myForm" class="infocontent" id="theform">
                <input data-role="none" type="text" class="inputPhone" name="phone" id="phone" placeholder="PHONE NUMBER"/>
            
                <br/>
                
                 <input data-role="none" type="text" class="inputName" name="name" id="name" placeholder="NAME"/>
                
                <br/>
             
                <input data-role="none" type="email" class="inputEmail required" name="email" id="eingabefeldemail" placeholder="EMAIL ADDRESS"/><br/>
                
                <br/>
                  
                <input data-role="none" type="file" name="attachment" id="attachment" />

                <br/><br/>
                
                <textarea class="inputMessage messageHeight required" name="message" id="thetext" placeholder="MESSAGE" style="width:400px; height:200px;"></textarea> 

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

JavaScript

$(document).ready(function() {
    var timer;
    var delay = 2500;
    $('.submit').bind('click',function(e) {
        e.preventDefault();
        // call our method to send the contact form from the click
        sendContactForm();
        
        window.clearTimeout(timer);
        timer = window.setTimeout(function() {
            $('.infocontent').closest('form').find("input[type=email], textarea").val("");
            $(".infocontent").closest('form').find("input[type=text], textarea").val("");
            $('.infocontent').closest('form').find("input[type=text], textarea").val("");
        }, delay);
        
    });
    
    // prevent the submit from reloading the page
    $('#theform').on('submit', function() {
        return false;
    });
});
     

function sendContactForm() {
    var email = $('#eingabefeldemail').val();
    var text = $('#thetext').val();
    var phone = $('#phone').val();
    var name = $('#name').val();
    var file = document.getElementById('attachment');
    var mandrill = null;
    
    var messageBody = name + " has left you a response.\r\n";
        messageBody += "\"" + text + "\"\r\n\r\n";
        messageBody += "Phone Number Left: " + phone + "\r\n";
        messageBody += "Contact Email: " + email;
    
    // read the file to a base64 string
    var reader = new FileReader();

    // reading the file is an asynchronous operation. Only send the data
    // to Mandrill once the file is all loaded
    reader.onload = function(readerEvt) {
        var base64File = btoa(readerEvt.target.result);
        var fileData = {
            "name" : file.files[0].name,
            "type" : file.files[0].type,
            "content" : base64File
        };
        sendMandrillForm(messageBody, name, email, fileData);
    };
    
    // if a file was attached then we read it and then prepare the form
    if ( file.files.length > 0 ) {
        reader.readAsBinaryString(file.files[0]);
    } else { // otherwise we prepare the form...