创建背景提交表单

Question

我有两个表单代码（getresponse webform代码和一个普通的formcode）。我希望只有一个可见的OPTIN FORM用于输入用户电子邮件地址，当用户提交FORM时，它会将getresponse网络表单代码提交到后台。我知道它会做一些jQuery和Ajax你能告诉我示例代码如何做到这一点？

常规表单：

<!--VISIBLE FORM --> 
<form method="post" action="#" target="frame_result"> 
    <input id="email" type="text" name="email" placeholder="email" /> 
    <br /> 
    <input id="blast" type="button" value="GET FREE QOUTE" name="submit" /> 
</form> 
<!--VISIBLE FORM --> 

我想要得到的可见形式的电子邮件地址放在Web窗体的GetResponse电子邮件领域的背景，并提交有关的背景。我真的很想帮助你。感谢提前。遗憾的英语不好:)

GET RESPONSE Web表单代码必须对用户不可见，并运行于后台：

<div id="WFItem505952" class="wf-formTpl"> 
<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html" 
method="post"> 
     <div id="WFIcenter" class="wf-body"> 
      <ul class="wf-sortable" id="wf-sort-id"> 
       <li class="wf-email" rel="undefined" style="display: block !important;"> 
        <div class="wf-contbox"> 
         <div class="wf-labelpos"> 
          <label class="wf-label">Email:</label> 
         </div> 
         <div class="wf-inputpos"> 
          <input class="wf-input wf-req wf-valid__email" type="text" name="email"></input> 
         </div> 
         <em class="clearfix clearer"></em> 
        </div> 
       </li> 
       <li class="wf-submit" rel="undefined" style="display: block !important;"> 
        <div class="wf-contbox"> 
         <div class="wf-inputpos"> 
          <input type="submit" class="wf-button" name="submit" value="Sign Up!" 
          style="display: inline !important; width: 120px !important;"></input> 
         </div> 
         <em class="clearfix clearer"></em> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <input type="hidden" name="webform_id" value="505952" /> 
</form> 

Answer 1

DEMO

的错误仅仅是因为我的表格还没有一个有效的行动&方法呢:-)取代你的，你会没事的。我只是展示如何隐藏第二个表单并通过第一个表单提交。如果需要，可以将变量传递给第二种形式。

HTML：

<form id="form1"> 
    <h5>Form 1</h5> 
    <label for="username"><span>Username</span><input name="username" id="username" type="text" /></label><br/> 
    <label for="email"><span>Email</span><input name="email" id="email" type="text" /></label><br/> 
    <input type="submit" value="Submit Form 1" /> 
    </form> 
    <form id="form2"> 
    <h5>Form 2</h5> 
     <input type="text" name="username1" id="username1" /> 
     <input type="text" name="email1" id="email1" /> 
    <input type="submit" value="Submit Form 2"/> 
    </form> 

CSS：

/* Hiding Form 2 */ 
#form2{ 
    visibility:hidden; 
} 

JS：

$(function(){ 
    $('#form1').on('submit', function(){ 
     $('#username1').val($('#username').val()); 
     $('#email1').val($('#email').val()); 
     $('#form2').submit(); 
     return false; 
    }); 
});