title: Wordpress Contact-form 7 - Booking form functionality with Jquery
body: <p>I have created a form using WordPress plugin Contact-form 7. I currently have a field which is a drop-down list, ideally, it would be great to select any option from that list and have a description underneath, that changes each time a subject is selected.</p>
  
  <p>Reason for this is that I'm currently designing a booking form for educational purposes and the drop-down list contains various subjects. Once you click on the subject it would be great if each time it would automatically display the description of that courses beneath it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
    } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php get_header(); ?&gt;
  
  &lt;section class="bg-image"&gt;
  
  &lt;div class="container enquiry-contain"&gt;
  
  &lt;h1 style="text-align:center;"&gt;Jersey Booking Form&lt;/h1&gt;
  &lt;div class="row" style="margin: 0 3px 0 3px;"&gt;
  &lt;div class="col-md-2 hidden-sm"&gt;&lt;/div&gt;
  &lt;div class="col-md-1 hidden-sm"&gt;&lt;/div&gt;
  &lt;div class="school-enquiry col-md-6"&gt;
  &lt;h6 style="color:#70D100;"&gt;Please complete all fields below before you click submit&lt;/h6&gt;
  &lt;?php echo do_shortcode('[contact-form-7 id="10012426" title="Jersey school booking form"]'); ?&gt;
  &lt;/div&gt;
  &lt;/div&gt;
    
  &lt;/div&gt;
  
  &lt;/section&gt;
  
  &lt;?php get_footer(); ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the WordPress Contact-Form 7 Code :</p>
  
  <pre><code>[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"]
  </code></pre>
  
  <p>Potential date of visit:</p>
  
  <pre><code>[date* date-of-visit placeholder "Potential date of visit"]
  </code></pre>
  
  <p>Potential time of visit :</p>
  
  <pre><code>[select* time-of-visit include_blank "9:30PM " "10:30PM "
   "11:30PM " "12:30PM " "13:30PM " "14:30PM " "15:30PM " "16:30PM"]
  </code></pre>
  
  <p>Choose your session :</p>
  
  <pre><code>[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 &amp; A-LEVEL - Animal observations** " 
     "AS &amp; A-LEVEL - Geography case study* "
   ]
  </code></pre>
  
  <p>For more information on sessions:</p>
  
  <pre><code>[textarea Additional-information maxlength:200 
    placeholder "Additional information... 
    e.g physical or learning difficulties"]
  
  [submit "Submit"]
  </code></pre>