如何使用Google文档格式化从联系表格发送给我的电子邮件？

Question

对于我的联系表，我正在Google Docs上使用脚本来处理电子邮件的发送（我遵循此处的最高答案：How do I send an HTML Form in an Email .. not just MAILTO）

这使您可以将Google文档的URL放入表单的“操作”代码中。而且实际上可以使用联系表接收电子邮件！

但是，我收到的电子邮件确实混乱了。它根本没有格式化。这是我收到的：

{"layout_select":["col9fl_y"],"submit":["Send Message"],"column_select":["col9fl"],"name":["s s"],"action":["send_message"],"message":["asdadad"],"email":["a@b.com"],"drone":["on"],"target":[""]}

我想知道我是否可以就如何开始格式化电子邮件获得建议。

这是我通常具有的联系表代码的JSFiddle： https://jsfiddle.net/hmatt843/504dgmqy/17/

HTML

<!-- contact-form -->
<section id="contact-form">

     <div class="content-wrap">
           <h4 class="form-heading">To send your general questions or comments, please use the contact form below.</h4>
     </div>

                <!--<form class="contact-form" method="post" action="contact_form_handler.php" enctype="text/plain">-->               
     <form class="contact-form" method="post" action="(GoogleURL)" enctype="text/plain">

                     <p>
                        <label for="name">Your Name <font face="Arial" color="red">*</font></label>
                        <input type="text" style="height:35px;" class="heighttext required" name="name" id="name" class="required" title="* Please provide your name">
                    </p>

                    <p>
                        <label for="email">Your Email <font face="Arial" color="red">*</font></label>
                        <input type="text" style="height:35px;" class="heighttext required" name="email" id="email" class="email required" title="* Please provide an email address">
                    </p>

                    <p>
                        <label>Your Location <font face="Arial" color="red">*</font></label>
                       <select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
    <option selected value="col00">-- State --</option>       
    <option value="col1al">Alabama</option>
    <option value="col5ca">California</option>
    <option value="col9fl">Florida</option>    
                       </select>

                       <select name="layout_select" id="layout_select" style="height:35px;">
     <option value="col00">-- City --</option>
     <option value="col1al">Montgomery</option>
     <option value="col5ca">Sacramento</option>
     <option value="col9fl">Orlando</option>    
                       </select>                    
                    </p>                               

                    <p>
                        <label for="subject">I am interested in the following... <font face="Arial" color="red">*</font> </label>                                           <select style="height:35px;" class="required" title=" * Please provide a subject">
                            <option disabled selected value>-- select an option --</option>
                            <option value="volvo">Your position on...</option>
                            <option value="saab">How to donate</option>
                            <option value="mercedes">How can I join your team or help?</option>
                            <option value="audi">Other</option>
                        </select>
                    </p>


                    <p>
                        <label for="comment">Your Message <font face="Arial" color="red">*</font></label>
                        <textarea name="message" id="comment" class="required" title="* Please provide your message"></textarea>
                    </p>

                    <p>
                        <div class="responsereqdiv">
                            <label for="comment">Response Requested? <font face="Arial" color="red" class="required" title="Please indicate whether you wish to be contacted.">*</font></label>

                            <label class="responsereqdiv1" for="YesResponse"> <input  type="radio" id="YesResponse" name="droneYes"/>Yes</label>

                            <label class="responsereqdiv2"  for="NoResponse"> <input type="radio" id="NoResponse" name="droneNo"/>No</label>
                        </div>    
                    </p>


                    <p>
                        <input type="submit" value="Send Message" id="submit" class="pp-btn special" name="submit">
                        <img src="images/ajax-loader.gif" id="contact-loader" alt="Loading...">
                        <input type="hidden" name="action" value="send_message">
                        <input type="hidden" name="target" value="">

                    </p>




    </form>

    <div class="error-container"></div>
    <div id="message-sent2">Thank you! Your message has been sent.</div>

</section><!-- #contact-form -->

CSS

#message-sent2
{
    display:none;
}
#contact-form #contact-loader {
  display: none;
}

JavaScript

$(document).ready(function() {

/*----Contact Form Code----*/

    if(jQuery().validate && jQuery().ajaxSubmit)
    {
        // Contact Form Handling
        var contact_options = {
            //target: '#message-sent',
            beforeSubmit: function(){
                $('#contact-loader').fadeIn('fast');
                //$('#message-sent').fadeOut('fast');
                $('#message-sent2').fadeOut('fast');
            },
            success: function(){
            $('#contact-loader').fadeOut('fast');
                //$('#message-sent').fadeIn('fast');
                                //$('#message-sent').fadeOut('fast');
                //$('#contact-form .contact-form').resetForm();
                $('#contact-form .contact-form').resetForm();
                //$('#message-sent').fadeIn('fast');

                $('#message-sent2').fadeIn('fast');

            }
        };

        $('#contact-form .contact-form').validate({
            errorLabelContainer: $("div.error-container"),
            submitHandler: function(form) {
                $(form).ajaxSubmit(contact_options);
            }
        });

        $('#wp_email_capture form').validate();
    }









/****Location Dropdown Code****/


var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();


    var $state  = $("#column_select"),
    $city               = $("#layout_select");

    $city.hide();

    $state.on('change', function() {
        if ($(this).val() != "col9fl") {
        $city.hide();
      } else {
        $city.show();
      }
    });

})

谢谢。