javascript - 在 123ContactForm 表单中按下 "Send"按钮时发送外部电子邮件

标签 javascript html forms email sendgrid

背景信息: 123ContactForm 生成可以嵌入到您的网站中的联系表单。我使用这个工具是因为它允许将数据发送到我使用的第三方应用程序。

我希望实现的目标: 填写表单并且用户按下“发送电子邮件”按钮后,我希望表单完成其正常功能,将数据记录到第 3 方应用程序中,然后向指定人员(静态电子邮件地址)发送电子邮件。 123ContactForm 的正常功能是将电子邮件发送给您(表单的管理员),但这不是我想要的。我希望将此电子邮件发送给第三方。

我正在尝试: 我正在尝试使用一个“发送电子邮件”按钮来打开“mailto:test@test.com”,或者我正在尝试使用像 sendgrid 这样的服务来发送这封电子邮件。

我遇到的问题: 123ContactForms 为我提供了 3 个嵌入此表单的选项。 JavaScript、Iframe 和 HTML。由于我缺乏网络开发经验,我无法找到此按钮并将上述功能附加到它。通过检查元素,我找到了该按钮的代码,但我不确定如何编辑它以使其也向指定地址发送电子邮件。

<input onclick="this.style.display='none';insertPleaseWaitDiv(this,'Please wait...');  " type="submit" class="class123-button" id="id123-button-send" value="Send Email">

资源: 测试表:http://www.123contactform.com/form-1522070/Contact-Lead-Form

Javascript 嵌入:

<script type="text/javascript">var servicedomain="www.123contactform.com"; var frmRef=''; try { frmRef=window.top.location.href; } catch(err) {}; var cfJsHost = (("https:" == document.location.protocol) ? "https://" : "http://"); document.write(unescape("%3Cscript src='" + cfJsHost + servicedomain + "/includes/easyXDM.min.js' type='text/javascript'%3E%3C/script%3E")); frmRef=encodeURIComponent(frmRef).replace('%26','[%ANDCHAR%]'); document.write(unescape("%3Cscript src='" + cfJsHost + servicedomain + "/jsform-1522070.js?ref="+frmRef+"' type='text/javascript'%3E%3C/script%3E")); </script>

IFrame 嵌入:

<iframe allowTransparency="true" style="min-height:300px; height:inherit; overflow:auto;" width="100%" id="contactform123" name="contactform123" marginwidth="0" marginheight="0" frameborder="0" src="http://www.123contactform.com/my-contact-form-1522070.html">
<p>Your browser does not support iframes. The contact form cannot be displayed. Please use another contact method (phone, fax etc)</p>
</iframe>

HTML 嵌入:

<!-- www.123contactform.com script begins here -->

<!-- formalign --><center>

<link href="https://dflzqrzibliy5.cloudfront.net/modules/calculations/form/css/form.calculations.css?9009" rel="stylesheet" type="text/css"  />

<script type="text/javascript">
var cfJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + cfJsHost + "dflzqrzibliy5.cloudfront.net/modules/calculations/form/js/form.calculations.js?9009' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
<!--
var formrules=new Array(0);

//-->
</script>
<script type="text/javascript">
var cfJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + cfJsHost + "dflzqrzibliy5.cloudfront.net/includes/interactive123cf.js?9009' type='text/javascript'%3E%3C/script%3E"));
</script>

<style type="text/css">
    .focus { background: #FEF1C1; }
    .class123-label { font-family: Verdana, Geneva, sans-serif; font-size: small; color: #FFFFFF;}
    .headline { color: #FFFFFF; }
    .class123-labelmic { font-family: Verdana, Geneva, sans-serif; font-size: xx-small; color: #666666; }
    .class123-labelinfo { font-family: Verdana, Geneva, sans-serif; font-size: xx-small; color: #666666; }
    .class123-sidebyside { float:left; margin:0 5px 0 0;}
    .class123-twocol { float:left; width:45%; margin:0 5px 0 0;}
    .class123-threecol { float:left; width:30%; margin:0 5px 0 0;}
    .class123-likert_style_li { display:table-cell; vertical-align:middle; text-align:center; top:0px; padding:0px; /*width:20%;*/ height:50px; margin:0px; font:79%/100% verdana; font-weight:bold; background:#f8f8f8; zoom:1; *display:inline; }
    .class123-likert_style_li2 { display:table-cell; vertical-align:middle; text-align:center; top:0px; padding:0px; /*width:20%;*/ height:50px; margin:0px; font:79%/100% verdana; zoom:1; *display:inline; }
    .class123-select { height:1.6em; }



    .class123-savereturn { background: none; border: medium none; text-decoration: underline; cursor: pointer; padding:5px 10px;}
    .class123-goback { background: none; border: medium none; text-decoration: underline; cursor: pointer; padding:5px 10px; color: #C80042;}
    .class123-pbline { display:none; }
    .class123-pbprev { background: none; border: medium none; text-decoration: underline; cursor: pointer; padding-left:0px; padding-right:0px; }
    .class123_maintable {}
    .class123-pagination { float:left; width:99%; /*min-width:550px;*/ font-size:10px; margin:0px; margin-bottom:10px; }
    #mainform123 .class123-pagination { background-color:#FFFFFF; }.class123-progresscircle { margin:0px !importat; background: #CCC; width: 24px; height: 24px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; float:left; }
    .class123-progresscircleactive { margin:0px !importat; background:#FEF1C1; width: 24px; height: 24px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
    .class123-progresstext { display:table-cell; height:100%; width: 24px; text-align:center; padding-top:3px; font-family: Verdana, Geneva, sans-serif; font-size:13px; }
    .class123-progressPercDiv { float:left; width:100%; margin:0px !important; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #ccc; padding:2px; }
    #mainform123 .class123-progressPercDiv { background:#FFFFFF; }

    .class123-progressPercBar { float:left; text-align:right; line-height:23px; padding-right:4px; font-weight:bold; height: 24px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin:0px !importat; background:#FEF1C1;}
    #mainform123 .class123-progressPercBar { background:#FEF1C1; }

    .class123-pagename { float:left; font-family: Verdana, Geneva, sans-serif; line-height:14px; margin-left:5px; max-width:85px; margin-top:5px; }
    .currentPageActive { display:block; }
    .currentPageInactive { display:none; }
    .hideAlternate { display:block; height0px;width:0px; overflow:hidden !important;padding:0px;margin:0px;pointer-events: none;position:absolute;left:-2000px;top:0px;}
    .formdefaultbutcolor { background-color: #FFFFFF }
    .formnotextButton { width:150px; }

    .fontbold { font-weight: bold; }
    .fontitalic { font-style: italic; }
    .fontbolditalic { font-weight:bold; font-style:italic; }
    .requiredspan { font-family: Verdana; font-size:10px; color:#FF0000; margin-left:3px; }
    .requiredfield:after{content: "\0000a0*";color:#FF0000;font-size:10px;font-family:Verdana;}
    .columntable tr td { padding:5px; }
    .class123_maintable { text-align: left; }
    .formdefaultbut { display:inline; list-style:none; margin-right:4px; color:#fff; border:none; cursor:pointer; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; font-weight:bold; vertical-align: middle; }
    .footerLink13:link,.footerLink13:visited,.footerLink13:active { font-size:small!important;color:#404040!important; text-decoration:underline!important;}
    .footerLink13:hover{font-size:small!important;color:#FFFFFF!important;text-decoration:none!important;background-color:#C80042!important;}

    /* NEW STYLES BEGIN */
    .maintable_centered { margin-left:10%; margin-right:10%; }
    .divonecolumn { width:48% !important; float:left; display:block; margin-right:3px; }

    .optionscontainer { width:100%; display:block; float: left; text-align:left; }
    .optionscontainer.pagination {margin-top:6px;}
    .errormsg, .fielderror { color: #FF0000 !important; }
    .customerror { background-color: #FFFFFF !important; border-color: #FF0000 !important; }
    div[id^="class123-bicTOSFrame"] { background-color:white; overflow-y: auto; } /* height not needed anymore */

    .timer-container {float:right; }
    .timer-container.timer-locked {margin-bottom:-27px;}
    #form-timer { padding-left:8px;padding-right:8px; float:right;background-color: #FFFFFF; color:#FFFFFF; border-radius:3px;overflow:hidden;margin-top:2px;  }
    #form-timer .countdown {float:right;}
    #form-timer span { line-height: 24px;   padding-bottom: 3px; padding-top: 3px; }
    #form-timer span.hours-label,#form-timer span.minutes-label { border-right:#FFFFFF solid 1px;padding-right:6px;margin-right:5px; }
    #form-timer span.hours-label,#form-timer span.minutes-label,#form-timer span.seconds-label  { font-size:12px;padding-left:2px;}
    #form-timer span.hours-value,#form-timer span.minutes-value,#form-timer span.seconds-value { font-size:15px; }
    #form-timer .timer-clock {float:right; padding-right:7px;font-size:15px;}
    @media only screen and (max-width:640px){
        .timer-container.timer-locked {margin-bottom:0px !important;}
        }
    @media only screen and (max-device-width: 768px) {
        .char-limit-mobile {
            display:inline !important;
        }
    }

    .fieldcontainer { float: left; margin:0; padding:0; width:100%; } /* OLD: margin-bottom:3px; also had display:none, which caused bug on form 376500 */
    .fieldcontainer div .rowleft, .fieldcontainer div .rowright { display:block; float: left; }

    .fieldcontainer .rowleft { margin:6px 1%; width:24%; }
    .fieldcontainer .rowright { margin:6px 1%; width:72%; }
    .fieldcontainer .rowup { margin:3px 0.5%; width: 96%; float:left; }
    .fieldcontainer .rowdown { margin:3px 0.5%; width:96%; float:left; }
    .fieldcontainer .uberfieldlat { margin:3px 1%; }
    .fieldcontainer #printlink { margin-left: 0.5%; }
    .class123-separ-row { float:left; width:100%; background-color: transparent; }

    .fieldwidth100 { float:left; width:100%; }
    .fieldwidth90  { float:left; width:90%; }
    .fieldwidth85  { float:left; width:85%; }
    .fieldwidth80  { float:left; width:80%; }
    .fieldwidth75  { float:left; width:75%; }
    .fieldwidth70  { float:left; width:70%; }
    .fieldwidth65  { float:left; width:65%; }
    .fieldwidth60  { float:left; width:60%; }
    .fieldwidth55  { float:left; width:55%; }
    .fieldwidth50  { float:left; width:50%; }
    .fieldwidth45  { float:left; width:45%; }
    .fieldwidth40  { float:left; width:40%; }
    .fieldwidth35  { float:left; width:35%; }
    .fieldwidth30  { float:left; width:30%; }
    .fieldwidth25  { float:left; width:25%; }
    .fieldwidth20  { float:left; width:20%; }
    .fieldwidth15  { float:left; width:15%; }
    .fieldwidth10  { float:left; width:10%; }   

    .sortabledemo .fieldwidth90, .sortabledemo .fieldwidth80, .sortabledemo .fieldwidth70, .sortabledemo .fieldwidth60, .sortabledemo .fieldwidth50, .sortabledemo .fieldwidth40, .sortabledemo .fieldwidth30, .sortabledemo .fieldwidth20, .sortabledemo .fieldwidth10
    { background-image:url("/images3/bg-field-container.png");background-repeat:repeat-x;position:relative;background-position:bottom; }
     .thebuttons .divonecolumn.second { padding:6px; }
    .fieldcontainer img.tcalIcon{ max-width:100px!important; }
    .fieldcontainer img, select { max-width:99% !important; } /* fix for Samsung devices */
    #formeditor_page #basicoptions .ui-icon-triangle-2-n-s { -moz-appearance: menulist-button; height: 19px; margin-right: -3px; margin-top: -1px; padding: 0; width: 15px; }
    #formeditor_page #advancedoptions .ui-icon-triangle-2-n-s { -moz-appearance: menulist-button; height: 19px; margin-right: -3px; margin-top: -1px; padding: 0; width: 15px; }
    #formeditor_page #basicoptions .ui-multiselect { width:185px!important; background-color:white; border-style:inset; border-radius:0px; color:black; font-weight:normal; padding:0px; -moz-appearance: menulist; -webkit-appearance:menulist; font-size:13px; height:20px; }
    #formeditor_page #advancedoptions .ui-multiselect { width:185px!important; background-color:white; border-style:inset; border-radius:0px; color:black; font-weight:normal; padding:0px; -moz-appearance: menulist; -webkit-appearance:menulist; font-size:13px; height:20px; }
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        #formeditor_page #basicoptions .ui-icon-triangle-2-n-s { margin-right:0px!important; margin-top:0px!important; width:19px!important;  }
        #formeditor_page #advancedoptions .ui-icon-triangle-2-n-s { margin-right:0px!important; margin-top:0px!important; width:19px!important;  }
        #formeditor_page #basicoptions .ui-multiselect {border-color:#c3c3c3; -webkit-appearance:menulist;}
        #formeditor_page #advancedoptions .ui-multiselect {border-color:#c3c3c3; -webkit-appearance:menulist;}
    }

    .class123-firstname, .class123-lastname, .class123-subfieldMiddle { width:95px; margin-right:10px;  }
    .class123-subfieldInitials { width:45px; margin-right:10px; }
    .class123-address { max-width:400px; }
    .class123-hidden { display:none !important; }
    /* NEW STYLES END */
</style>
   <!--[if lte IE 8]>
    <style type="text/css">
    .class123-likert_style_li2 {height:56px;}
    </style>
    <![endif]--><script type="text/javascript">
    var fid=1522070;
    var curr='';
    var preview_iframe=0;
    var real_time=0;
    </script>

<script type="text/javascript">
<!--
var selectedfield='';
var multiPageCurent=1;
var multiPageTotal=1;
function InputActions(field,id) {
    window.stopCalculate=true;
    var textcolor='#FFFFFF';
    var hltextcolor='#000000';
    $('.class123-labelinfo.class123-labelhidden').addClass('hidden_instruction');
    $(field).parents('.fieldcontainer').last().find('.class123-labelinfo').removeClass('hidden_instruction');
    //var calendar = $('img[title="Close Calendar"]').trigger('click');

     lastactionobj=field;

    if (id==selectedfield) { /* alert('do nothing'); */ }
    else
        {
        // first we unhighlight the previous field, if any
        if (selectedfield!='')
            {
            //$('.tcalIcon').closest('.fieldcontainer').css('background','none repeat scroll 0 0 #fff');
            lid=selectedfield;
            lidsec=lid.replace('row','rowsec');

            // reparam culoare textlabels
            var tr=document.getElementById(lid);

            if (document.getElementsByClassName)
                {
            var textlabels = tr.getElementsByClassName('class123-label');
            for (j=0;j<textlabels.length;j++)
                textlabels[j].style.color=textcolor;
                }
                else
                {
                var textlabels=tr.getElementsByTagName('label');
                for (j=0;j<textlabels.length;j++)
                    if (textlabels[j].className.indexOf('class123-label')>-1) textlabels[j].style.color=textcolor;
                }
            var oldbg='';
            if (document.getElementById('errorflag'+lid)!=null)
                oldbg=document.getElementById('errorflag'+lid).value;

            // reparam culoare bg td
            var tds = tr.getElementsByTagName('div');
            for (j=0;j<tds.length;j++)
                tds[j].parentNode.parentNode.style.background=oldbg;

            // reparam culoare bg td sec
            if (document.getElementById(lidsec) != null)
                {
                var trsec=document.getElementById(lidsec);
                tds = trsec.getElementsByTagName('div');
                for (j=0;j<tds.length;j++)
                    tds[j].parentNode.parentNode.style.background=oldbg;
                }
            }
        // then we highlight the new one
        selectedfield=id;

        lid=id;
        lidsec=lid.replace('row','rowsec');

        // modificam culoare textlabels
        var tr=document.getElementById(lid);
        if (document.getElementsByClassName)
            {
        var textlabels = tr.getElementsByClassName('class123-label');
        for (j=0;j<textlabels.length;j++)
            textlabels[j].style.color=hltextcolor;
            }
            else
            {
            var textlabels=tr.getElementsByTagName('label');
            for (j=0;j<textlabels.length;j++)
                if (textlabels[j].className.indexOf('class123-label')>-1) textlabels[j].style.color=hltextcolor;
            }

        // modificam culoare bg td
        var tds = tr.getElementsByTagName('div');for (j=0;j<tds.length;j++)
                tds[j].parentNode.parentNode.style.background='#FEF1C1';

            // modificam culoare bg td sec
            if (document.getElementById(lidsec) != null)
                {
                var trsec=document.getElementById(lidsec);
                tds = trsec.getElementsByTagName('div');
                for (j=0;j<tds.length;j++)
                    tds[j].parentNode.parentNode.style.background='#FEF1C1';
                }
        }
    // now the field rules

    InputRules2('beginning','0','0');
}
function IsFullDateEntered(c_id) {
if((document.getElementById('id123-control'+c_id+'-1') != null)&&(document.getElementById('id123-control'+c_id+'-2')!=null)&&(document.getElementById('id123-control'+c_id+'-3')!=null))
    {
    if  ((document.getElementById('id123-control'+c_id+'-1').value!='')&&(document.getElementById('id123-control'+c_id+'-2').value!='')&&(document.getElementById('id123-control'+c_id+'-3').value!=''))
        document.getElementById('id123-control'+c_id).value=document.getElementById('id123-control'+c_id+'-1').value+'/'+document.getElementById('id123-control'+c_id+'-2').value+'/'+document.getElementById('id123-control'+c_id+'-3').value;
    }
}
//-->
</script><form  class="form" onsubmit="RefreshFrameHeight(1); return checkSubmitAllowed();" action="http://www.123contactform.com/form-1522070/Contact-Lead-Form" id="mainform123" method="post" name="mainform123" enctype="multipart/form-data">
<input type="hidden" name="action" value="verify"/><input type="hidden" name="special_autoresponder" id="special_autoresponder" value=""/><input type="hidden" name="language" value="en"/><input type="hidden" name="languageChanged" value="no"/><div class="class123_maintable " style="min-width:150px; " >
<script type='text/javascript'>
var  js_ctype_arr = new Array();
var  js_cobject_arr = new Array();
js_ctype_arr['cid13526719']=0;
js_cobject_arr['cid13526719']=0;
js_ctype_arr['cid13735089']=0;
js_cobject_arr['cid13735089']=0;
js_ctype_arr['cid13737638']=0;
js_cobject_arr['cid13737638']=0;

</script>
<!-- Column One begins (aux) -->
<div><div class='divonecolumn'>

<!-- Column One InnerTable begins (aux) -->
<div class="columntable" style="border-top:0px;" cellpading="6" cellspacing="0" border="0">
<!-- fieldcontainer -->
<div id="fieldcontainer1" class="fieldcontainer currentPage1 currentPageActive  fieldwidth100     "  style=" ">
<div id="row1" class="currentPage1 currentPageActive">
<div class="rowleft"  style="text-align:left; ">
<label class="class123-label class123-fieldname class123-labelAligned fontbold " id="id123-title13526719" style="position: relative;" for="id123-control13526719" ></label></div>
<div class="rowright" align="left" style=""><input type="hidden" id="errorflagrow1" value=""/><input id="id123-control13526719" name="control13526719"    onclick=" InputActions(this,'row1');" onkeyup=" InputActions(this,'row1');    " onchange="InputRules(13526719); ;  "onfocus="InputSetDefaultValue('id123-control13526719', 'First Name', 'focus', '#000000', '#666666');" onblur="InputSetDefaultValue('id123-control13526719', 'First Name', 'blur', '#000000', '#666666');"  type="text" value="First Name" style="width:280px; max-width:96% !important; position:relative;" />
</div></div>
</div>
<!-- fieldcontainer ends -->

<!-- fieldcontainer -->
<div id="fieldcontainer2" class="fieldcontainer currentPage1 currentPageActive  fieldwidth100     "  style=" ">
<div id="row2" class="currentPage1 currentPageActive">
<div class="rowleft"  style="text-align:left; ">
<label class="class123-label class123-fieldname class123-labelAligned fontbold " id="id123-title13735089" style="position: relative;" for="id123-control13735089" ></label></div>
<div class="rowright" align="left" style=""><input type="hidden" id="errorflagrow2" value=""/><input id="id123-control13735089" name="control13735089"    onclick=" InputActions(this,'row2');" onkeyup=" InputActions(this,'row2');    " onchange="InputRules(13735089); ;  "onfocus="InputSetDefaultValue('id123-control13735089', 'Last Name', 'focus', '#000000', '#666666');" onblur="InputSetDefaultValue('id123-control13735089', 'Last Name', 'blur', '#000000', '#666666');"  type="text" value="Last Name" style="width:160px; max-width:96% !important; position:relative;" />
</div></div>
</div>
<!-- fieldcontainer ends -->

</div>
<!-- Column One InnerTable ends -->

</div>
<!-- Column One ends -->

<!-- Column Two begins (aux)-->
<div class='divonecolumn'>

<!-- Column Two InnerTable begins (aux) -->
<div class="columntable" style="border-top:0px;" cellpading="6" cellspacing="0" border="0">
<!-- fieldcontainer -->
<div id="fieldcontainer3" class="fieldcontainer currentPage1 currentPageActive  fieldwidth100     "  style=" ">
<div id="row3" class="currentPage1 currentPageActive">
<div class="rowleft"  style="text-align:left; ">
<label class="class123-label class123-fieldname class123-labelAligned fontbold " id="id123-title13737638" style="position: relative;" for="id123-control13737638" ></label></div>
<div class="rowright" align="left" style=""><input type="hidden" id="errorflagrow3" value=""/><input id="id123-control13737638" name="control13737638"    onclick=" InputActions(this,'row3');" onkeyup=" InputActions(this,'row3');    " onchange="InputRules(13737638); ;  "onfocus="InputSetDefaultValue('id123-control13737638', 'Email', 'focus', '#000000', '#666666');" onblur="InputSetDefaultValue('id123-control13737638', 'Email', 'blur', '#000000', '#666666');"  type="text" value="Email" style="width:160px; max-width:96% !important; position:relative;" />
</div></div>
</div>
<!-- fieldcontainer ends -->

<script type="text/javascript"> var f_fixedamount='0';
    var nr_fields=3;
    this.nr_fields=nr_fields;
    this.form_is_quiz='';
    var calc_fields=0;
    </script>
</div>
<!-- Column Two InnerTable ends -->

</div></div>
<!-- Column Two ends -->
<div id="checkout_form_con" style="font-family:Verdana, Geneva, sans-serif;"></div>
<!-- Buttons begin here -->
<div id="fieldcontainer4" class='fieldcontainer thebuttons' style="">
<div class="currentPage1 currentPageActive"><div class='divonecolumn first'> </div><div class='divonecolumn second' align="left"><input type="hidden" name="go_back_and_edit" id="go_back_and_edit" value="0" /><input OnClick="  this.style.display='none'; insertPleaseWaitDiv(this,'Please wait...');  " type="submit" class="class123-button"  id="id123-button-send"  value="Send Email"/> 
</div></div>
</div>
<!-- fieldcontainer ends -->
<!-- Buttons end here -->
</div>
<input type="hidden" name="PHPSESSID" value="f33hgmlv4sg6ff0hodh9hta6d6"/>
<div style="height:1px; display: none; visibility: hidden;">
<input type="text" name="email"/>
</div>


        <input type="hidden" name="hiddenfields" id="hiddenfields" value=""/>
        <input type="hidden" name="hiddenfields_pages" id="hiddenfields_pages" value=""/>
        <input type="hidden" name="activepage" id="activepage" value="1"/>
        <input type="hidden" name="totalpages" id="totalpages" value="1"/>
        <input type="hidden" name="nextpagenr" id="nextpagenr" value="2"/>
        <input type="hidden" name="prevpagenr" id="prevpagenr" value="0"/>
        <script type="text/javascript">
        InputRules('firsttime')
        </script><input type="hidden" name="usage" value="e"/>
</form>
<script type="text/javascript">InputSetDefaultValue('id123-control13526719', 'First Name', 'blur', '#000000', '#666666');InputSetDefaultValue('id123-control13735089', 'Last Name', 'blur', '#000000', '#666666');InputSetDefaultValue('id123-control13737638', 'Email', 'blur', '#000000', '#666666');</script><p align='center' style='float:left; width:100%'><font size="1" face="Verdana, Geneva, sans-serif" color="#FFFFFF"><a href="http://www.123contactform.com">Email form</a> generated by 123ContactForm</font></p></center><!-- formalign ends -->
<script type="text/javascript">multiPageTotal=1;</script>
<p style='clear:both'></p>

最佳答案

看起来 123contactform 要求我先升级,然后才能添加 smtp 选项。

要通过 Sendgrid 发送 123contactform,您需要启用“通过您自己的 SMTP 服务器发送电子邮件”选项,然后输入您的 Sendgrid 用户/密码和要发送的 smtp 服务器 smtp.sendgrid.net。

此外,如果您想要此表单的简单功能,您可以使用类似 php 示例 https://gist.github.com/Burrer/1581edff337eb89ee1e1 的内容

关于javascript - 在 123ContactForm 表单中按下 "Send"按钮时发送外部电子邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31996008/

相关文章:

javascript - 在接受服务器请求之前等待种子数据

javascript - 无法使用 jquery ui 持续时间参数或 CSS 让悬停事件在目标元素的兄弟元素上工作

html - IE、Chrome 和 FireFox 的保存密码行为说明

javascript - 使用数组向对象添加属性

javascript - 使用 jest 监视未导出的 node.js 函数未按预期工作

javascript - 位于容器底部的统计窗口

jquery - 如何解决 IE7 中复杂的 Z-index 问题

javascript - svg 的文本和边框就像一个元素

ajax - ajax和表单提交的区别

html - 在电子邮件中嵌入 HTML 表单