Wordpress Contact-form 7 - Jqueryで予約フォームの機能

Question

WordPressプラグインのContact-form 7を使用してフォームを作成しました。現在、ドロップダウンリストのフィールドを持っています。理想的には、そのリストから説明を得て、主題が選択されるたびに変更されます。

私は現在、教育目的の予約フォームを設計しており、ドロップダウンリストにはさまざまなテーマが含まれています。一旦あなたがそのコースの下のそのコースの記述を自動的に表示するならば、それが素晴らしいかもしれません。

.enquiry-contain { 
 
    padding:100px 0; 
 
    } 
 

 
    .school-enquiry { 
 
    background-color:rgba(0, 0, 0, 0.72); 
 
    border-radius:10px; 
 
    padding:50px; 
 
    } 
 

 
    .bg-image { 
 

 
    width:100%; 
 
    background: url(https://www.durrell.org/wildlife/wp-content/uploads/2017/01/MG_3919-v2.jpg) fixed; 
 
    color: #fff; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-position: center 0; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    } 
 

 
    .wc-durrell-footer { 
 
    margin-top:0; 
 
    } 
 

 
    .wpcf7-text, .wpcf7-date, .wpcf7-select, .wpcf7-textarea{ 
 
    color: black; 
 
    font-family: 'AvantGardeGothicITCW01B 731069'; 
 
    padding:5px; 
 
    border-radius: 5px;≈ 
 
    } 
 

 
    .wpcf7-textarea, .session-choice {  
 
    width: 100%; 
 
    }

<?php get_header(); ?> 
 

 
<section class="bg-image"> 
 

 
<div class="container enquiry-contain"> 
 

 
<h1 style="text-align:center;">Jersey Booking Form</h1> 
 
<div class="row" style="margin: 0 3px 0 3px;"> 
 
<div class="col-md-2 hidden-sm"></div> 
 
<div class="col-md-1 hidden-sm"></div> 
 
<div class="school-enquiry col-md-6"> 
 
<h6 style="color:#70D100;">Please complete all fields below before you click submit</h6> 
 
<?php echo do_shortcode('[contact-form-7 id="10012426" title="Jersey school booking form"]'); ?> 
 
</div> 
 
</div> 
 
    
 
</div> 
 

 
</section> 
 

 
<?php get_footer(); ?>

ここでWordPressのお問い合わせフォーム7のコードです：訪問の

[text* your-name placeholder "Name of teacher *"] 
[text* school-name placeholder "Name of school *"] 
[email* your-email placeholder "Email address"] 
[tel* phone-number placeholder "Phone number"] 

潜在日：

[date* date-of-visit placeholder "Potential date of visit"] 

訪問の潜在的な時間：

は、セッションの詳細については

[select* taught-sessions class:session-choice 
    "KS1 - Classification " 
    "KS1 - Food chains and habitats " 
    "KS2 - Gerald Durrell " 
    "KS2 - Rainforest " 
    "KS2 - Teeth " 
    "KS3 - The Gerald Durrell Story " 
    "KS3 - The Gerald Durrell story " 
    "KS3 - Ethics illegal trade in wildlife" 
    "KS3 - Biodiversity and conservation explored " 
    "KS3* - Introduction to Durrell " 
    "KS3* - Animal observations** " 
    "KS4 - Animal observations** " 
    "KS4 - Ethics - Mountain chickens " 
    "KS4 - Biodiversity and conservation extended " 
    "KS4* - Microbiology in the workplace** " 
    "AS & A-LEVEL - Animal observations** " 
    "AS & A-LEVEL - Geography case study* " 
] 

：

[select* time-of-visit include_blank "9:30PM " "10:30PM " 
"11:30PM " "12:30PM " "13:30PM " "14:30PM " "15:30PM " "16:30PM"] 

はあなたのセッションを選択してください

[textarea Additional-information maxlength:200 
    placeholder "Additional information... 
    e.g physical or learning difficulties"] 

[submit "Submit"] 

Answer 1

あなたはあなたの質問について具体的でなければなりません。私たちはあなたのフォームを見るだけであなたの質問に答えることはできません。あなたの説明がどの主題のデータであるのか？

あなたが例えばそのような何かを行うことができますドロップダウン

class="subject" 

を持っていて、ここから任意の対象を選択します。

sub1="MATH"; 
SUB2="English"; 
Desc1="MATH is Love"; 
Desc2="English is important"; 

$(".subject").change(function() 
    var sub= (this).val(); 
if(sub== sub1) 
    { 
     $(".desc").html(Desc1); 
    } 
    else{ 
    $(".desc").html(Desc2); 
    } 
    }); 

descは、説明を表示するdivまたは入力に与えられたクラスです。 これがあなたを助けてくれることを願っています。