Wie erstellt man ein dynamisches Formular in WordPress?

Question

Auf einer WordPress-Website möchte ich ein Formular haben, wo Benutzer Daten über Kurse, die sie anbieten, einreichen können, aber einige bieten mehr und andere Kurse als andere. Daher möchte ich ihnen eine Option geben, ein weiteres Feld zu dem Formular hinzuzufügen, so dass es ein bisschen wie folgt aussehen würde. Die Grundform würde wie folgt aussehen:

Course name (text field) - language (dropdown) - date (date picker or text field) 

Aber wenn ein Benutzer 2 Kurse bietet, würden sie in der Lage sein, eine Taste zu drücken, wie ‚Zeile hinzufügen‘ und es würde ihnen die gleiche Reihe von drei Feldern wieder geben. Sieht aus wie

Course name 1 - language - date [add row] 
Course name 2 - language - date [add row] 

Aber auch wenn ein Benutzer bietet 1-Kurs, aber in 2 Sprachen und auf 3 Tage, sollten sie in der Lage sein, das geben, die aussehen wie

Course 1 - language 1 [add language]- date 1[add date][add row] 
      language 2 [add language]- date 2[add date][add row] 
             date 3[add date][add row] 
Course 2 - language 1 [add language]- date 1[add date][add row] 
      language 2 [add language]- date 2[add date][add row] 
      language 3 [add language] 

Und so weiter und so her ...

Wäre es möglich, dies mit dynamischen Feldern zu tun und wie? Gibt es ein WordPress-Plugin, das dies bereits anbietet (bevorzugt)?

Answer 1

Sie sollten sich Advanced Custom Fields ansehen. Es ist ein WordPress-Plugin, um bei der Formularerstellung zu helfen und hat eine repeater field addon, die Ihnen helfen wird.

Mit den Repeater-Feldern können Sie die Eingänge zusammen gruppieren und vom Benutzer bei Bedarf wiederholen lassen. Schauen Sie sich their doc on nested repeaters an, um zu erreichen, was Sie wollen.

Answer 2

Ich glaube, dass Sie das am Frontend tun müssen.

Dafür würden Sie einige jquery benötigen.

Gruppieren Sie die Felder über den Kurs in eine Zeile. Zum Beispiel:

$('#add-row').click(function(){ 
 

 
    $('.rows').append("<div class='course-row'><input type='text' name='course-name'><input type='text' name='language'><button class='remove'>remove</button></div>"); 
 
    
 
}); 
 

 
$(document).on('click', '.remove', function(){ 
 

 
    $(this).closest('.course-row').remove(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='rows'> 
 
    
 
    <div class='course-row'> 
 
    <input type='text' name='course-name'> 
 
    <input type='text' name='language'> 
 
    <button class='remove'>remove</button> 
 
    </div> 
 
    
 
</div> 
 

 
<button id='add-row'>Add row</button>

Anstatt also den zweiten Eingang können Sie auswählen, verwenden und all das in eine Form wickeln. Sobald das Formular abgeschickt wurde, werden eingehende Daten von wiederholten Feldern als Array abgerufen und analysiert.