どのようにWordPressで動的フォームを作成するには？

Question

WordPressのウェブサイトでは、ユーザーが提供しているコースについてのデータを提出できるフォームを用意したいと考えていますが、他のものより多くのコースや異なるコースを提供するフォームがあります。そのため、フォームに別のフィールドを追加するオプションを与えたいので、以下のように見えます。 基本的な形は次のようになります。

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

しかし、ユーザーが2コースを提供していますならば、彼らは「行を追加」と、それは再び彼らに三つのフィールドの同じ行を与えるようなボタンを押すことができるだろう。その上ので、ユーザは1コースを提供していますが、2つの言語と3日に、彼らはそれを入力することができるはず、

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] 

のように見ている場合、

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

のように見えるしかし、また、 ...

これは動的なフィールドでどのように行うことができますか？すでにこれを提供しているWordPressプラグインはありますか？

Answer 1

Advanced Custom Fieldsをご覧ください。フォームの作成を支援するWordPressのプラグインで、repeater field addonがあります。

リピータフィールドでは、入力をまとめてグループ化し、必要に応じて繰り返すことができます。あなたが望むものを達成するためにtheir doc on nested repeatersをチェックしてください。

Answer 2

私はあなたがフロントエンドでそれを行う必要があると信じています。

jqueryが必要です。

コースに関するフィールドを行にグループ化します。たとえば：

$('#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>

ので、代わりの第二の入力あなたは、選択使用することができますし、フォームにそのすべてを包みます。フォームが送信されると、受信したデータを繰り返しフィールドから配列として取り出して解析します。