首页 文章

Wordpress联系表7 - 使用Jquery预订表单功能

提问于
浏览
1

我已经使用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* time-of-visit include_blank "9:30PM " "10:30PM "
 "11:30PM " "12:30PM " "13:30PM " "14:30PM " "15:30PM " "16:30PM"]

选择你的会话:

[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* "
 ]

有关会话的更多信息:

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

[submit "Submit"]

1 回答

  • 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或输入的类 . 希望这会帮助你 .

相关问题