html - 我需要帮助创建一个包含表单的弹出窗口

Question

我被困在为这个表单创建一个弹出窗口：

<form action="https://www.e-act.nl/ah/action" method="POST" accept-charset="UTF-8">
<input type="hidden" name="admin_id" value="3539"/>
<input type="hidden" name="trigger_code" value="SUBSCR_1607214759431"/>
<input type="hidden" name="confirm" value="false"/>
<input type="hidden" name="relation_avg1_text" id="relation_avg1_text" value="Ik heb het privacy reglement"/>
<input type="hidden" name="relation_avg1_url" id="relation_avg1_url" value="https://www.tomanage.eu/disclaimer-privacy"/>
<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">

<table>
<tr>
<td><div class="form-group"><label for="relation_firstName" class=" ar_req">Voornaam</label></td></div>
<td><div class="form-group"><label for="relation_lastName" class=" ar_req">Achternaam</label></td></div>
</tr>
<tr>
<td><div class="form-group"><input type="text" class="form-control" style="width:70%;" id="relation_firstName" name="relation_firstName" placeholder="" value=""/></td></div>
<td><div class="form-group"><input type="text" class="form-control" style="width:70%;" id="relation_lastName" name="relation_lastName" placeholder="" value="" /></div></td>
</tr>
<tr>
<td><div class="form-group"><label for="relation_companyName" class=" ar_req">Bedrijf</label></td></tr></div>
<td><input type="text" class="form-control" style="width:70%;" id="relation_companyName" name="relation_companyName" placeholder="" value=""/></div></td></tr>
<tr>
<td><div class="form-group"><label for="relation_email" class=" ar_req">E-mailadres</label></td></div>
<td><div class="form-group"><label for="relation_phone" class=" ar_req">Telefoon</label></td></div>
<tr>
<td><div class="form-group"><input type="email" class="form-control" style="width:70%;" id="relation_email" name="relation_email" placeholder="" value=""/></div></td>
<td><div class="form-group"><input type="text" class="form-control" style="width:70%;" id="relation_phone" name="relation_phone" placeholder="" value="" /></div></td>
</tr>
<tr>
<td><div class="form-group"><label for="relation_3539_FF1607214508718" class=" ar_req">Ik heb interesse in:</label>

<select class="form-control" style="width:70%;" id="relation_3539_FF1607214508718" name="relation_3539_FF1607214508718"><option value="Improve">Improve</option><option value="Improve & Act">Improve & Act</option><option value="Improve & Act Plus">Improve & Act Plus</option></select><span class="help-block help">Duid via de dropdown aan welk pakket jouw interesse heeft.</span></div></td>
</tr>
<tr>
<td><div class="form-group"><label for="relation_3539_FF1606468844958" class=" ar_req">Waar kan ik je mee helpen?</label>
<textarea class="form-control" style="width:70%;" id="relation_3539_FF1606468844958" name="relation_3539_FF1606468844958" placeholder="" rows="4" cols="100"></textarea></div></tr>
</tr>
<tr>
<td><input type="checkbox" id="relation_avg1" name="relation_avg1"/>&nbsp;Ik heb het privacy reglement <a target="_blank" href="https://www.tomanage.eu/disclaimer-privacy">hier gelezen.</a> </tr>
<tr>
<td><button title="klik hier" type="submit" onclick="return checkSUBSCR_1607214759431(this.form);" class="btn" style="padding:15px;border:0px solid #005493;border-radius:4px;color:#FFFFFF!important;font-family:Dosis; font-size:20px; line-height:20px;font-weight:bold;font-style:normal;background-color:#daab01!important;width:70%;">Versturen</button></td></tr>
</form></table>
<script><div class="emailField" style="display:none!important;">dit veld niet invullen s.v.p.<input type="text" name="emailaddress"/></div></form></div></div><script type="text/javascript">
 function checkSUBSCR_1607214759431(form) {
  var missing = false;
  var avg = false;
  var missingFields = '';
  for (i=0; i<form.elements.length; i++) {
   if (form.elements[i].name === 'relation_firstName') {
    if (form.elements[i].value === '') {
     missing = true;
     missingFields = missingFields + '\nVoornaam';
    }
   }
   if (form.elements[i].name === 'relation_lastName') {
    if (form.elements[i].value === '') {
     missing = true;
     missingFields = missingFields + '\nAchternaam';
    }
   }
   if (form.elements[i].name === 'relation_companyName') {
    if (form.elements[i].value === '') {
     missing = true;
     missingFields = missingFields + '\nBedrijf';
    }
   }
   if (form.elements[i].name === 'relation_email') {
    if (form.elements[i].value === '') {
     missing = true;
     missingFields = missingFields + '\nE-mailadres';
    }
   }
   if (form.elements[i].name === 'relation_phone') {
    if (form.elements[i].value === '') {
     missing = true;
     missingFields = missingFields + '\nTelefoon';
    }
   }
   if (form.elements[i].name === 'relation_3539_FF1606468844958') {
    if (form.elements[i].value === '') {
     missing = true;
     missingFields = missingFields + '\nWaar kan ik je mee helpen?';
    }
   }
  }
  if (missing) {
   alert('De onderstaande velden moeten zijn ingevuld:\n' + missingFields);
   return false;
  }
  if (!form.elements["relation_avg1"].checked) {
   alert('Er is geen toestemming gegeven');
   return false;
  }
  return true;
 }
</script>

此表单需要位于价格表中的按钮中（我在 html 中创建了此，如果您需要查看此表单，请告诉我）单击此表单时需要在表单中打开。你可以在这个网站上查看价格表https://www.tomanage.eu/kmo-paketten我现在在“meer info”按钮上有一个弹出窗口，但这不是它应该的方式。我现在使用链接创建了弹出窗口，但应该有所不同。从 calendly 看到下面的弹出窗口。感谢任何知道或可以指出我正确方向的人！

标签： htmlcss