Submitting Form As Email

TODO:

HTML Code (full)

 

<form class="widget-contact-form" action="" role="form" enctype="text/plain" method="get" target="_blank">
    <input type="hidden" name="subject" value="">
    <input type="hidden" name="body" value="">
    <input type="hidden" name="action" value="mailto:beth@interfaithquest.org">
    <div class="row">
        <div class="form-group col-sm-4">
            <label for="name">Name *</label>
            <input type="text" aria-required="true" name="name" class="form-control required name" placeholder="Enter your Name" required>
        </div>
        <div class="form-group col-sm-4">
            <label for="email">Email *</label>
            <input type="email" aria-required="true" name="email" class="form-control required email" placeholder="Enter your Email" required>
        </div>
        <div class="form-group col-sm-4">
            <label for="phone">Phone *</label>
            <input type="text" aria-required="true" name="phone" class="form-control required email" placeholder="Enter your phone number" required>
        </div>
    </div>
    <div class="form-group">
        <label for="message">Message *</label>
        <textarea type="text" name="message" rows="9" class="form-control required" placeholder="Enter your Message" aria-required="true" required></textarea>
    </div>
    <div class="form-group">
        <input type="text" class="hidden" id="widget-contact-form-antispam" name="widget-contact-form-antispam" value="">
        <button class="btn btn-lg btn-interfaith" type="submit" id="form-submit"><i class="fa fa-paper-plane"></i> Send message</button>
    </div>
</form>

 

Small Form

 

 

<form class="real-sender-email" action="" role="form" enctype="text/plain" method="get" target="_blank">
    <div class="input-group input-group-newsletter">
        <!-- REQUIRED USER INPUT -->
        <input type="email" name="email" class="form-control" placeholder="Enter email..." aria-label="Search for...">
        <!-- NOT NEEDED FOR THIS FORM -->
        <input type="hidden" name="name" value="">
        <input type="hidden" name="phone" value="">
        <input type="hidden" name="message" value="">
        <!-- SET BY SCRIPT -->
        <input type="hidden" name="subject" value="">
        <input type="hidden" name="body" value="">
        <input type="hidden" name="action" value="mailto:support@appcropolis.com">
        <!-- SUBMIT BUTTON -->
        <span class="input-group-btn">
            <button class="btn btn-secondary" type="submit">Notify Me!</button>
        </span>
    </div>
</form>

 

Javascript Code

!(function($, undefined) {
    "use strict";
    var $form = $('.real-sender-email');
    $form.on('submit', function(e) {
        var action  = $form.find('*[name="action"]').val();
        var name  = $form.find('*[name="name"]').val();
        var phone = $form.find('*[name="phone"]').val();
        var messgae  = $form.find('*[name="message"]').val();
        //
        var labelSubject = !!name  && name.length  > 0? 'Message from ' : '';
        var labelPhone   = !!phone && phone.length > 0? 'Phone ' : '';
        var newline = "\r\n";
        // Compose message
        var content =  messgae + newline + newline + labelPhone + phone
        //
        $form.attr('action', action);
        $form.find('*[name="subject"]').val(labelSubject + name);
        $form.find('*[name="body"]').val(content);
        
        setTimeout(function() {
            $form.find('*[name="name"]').val('');
            $form.find('*[name="phone"]').val('');
            $form.find('*[name="email"]').val('');
            $form.find('*[name="message"]').val('');
        }, 1000);
    });
    
})(jQuery, undefined);