Wordpress的多步骤高级表单

如何解决Wordpress的多步骤高级表单

我必须创建表单，而无需通过几个步骤即可刷新页面。我用divi编写了代码。我不为此表格使用插件。

第一步，用户可以选择一个或几个图像。每个图像均具有单独的形式，但在同一页面上。我有一些代码，但是我不知道如何发送有关选择哪个图像用户以及下一步如何以正确的顺序正确的步骤形式发送信息。

在示例中，用户选择图像2和5，并且当单击“下一步”按钮时，看到表格2和5。仅表格2-5中的内容为例。

您对这些问题有想法吗？

欢呼

<script>
 function choosenoptions(){
    if click 
 }
 
 
 function endPhase() {
 
 }

</script>

<form id="multiphase" onsubmit="return false">

<div id="phase1">

<div class="checkBox-wrapper">
<input type="checkBox" name="option1" id="option1"/>
<img src="img/blah1.png"/>
</div>

<div class="checkBox-wrapper">
<input type="checkBox" name="option2" id="option2"/>
<img src="img/blah2.png"/>
</div>

<div class="checkBox-wrapper">
<input type="checkBox" name="option3" id="option3"/>
<img src="img/blah3.png"/>
</div>

<div class="checkBox-wrapper">
<input type="checkBox" name="option4" id="option4"/>
<img src="img/blah4.png"/>
</div>

<div class="checkBox-wrapper">
<input type="checkBox" name="option5" id="option5"/>
<img src="img/blah5.png"/>
</div>
<button onclick="processphase1()">Next</button>

</div>


<div id="phase2">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">

</div>
<button onclick="processphase2()">Next</button>

</div>


<div id="phase3">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="processphase3()">Next</button>
</div>




<div id="phase4">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="processphase4()">Next</button>
</div>



<div id="phase5">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="processphase5()">Next</button>
</div>


<div id="endPhase">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="endPhase()">Submit</button>
</div>

</form>