contact form 7で作ったメールフォームの表示・非表示を切り替えられるボタンを作りたい

contact form 7でメールフォームを作り、すべての記事ページの下部に設置したいのですが、そのままだと長くなってしまうためボタンをタップするとフォームが現れるようにしたいです。

プラグイン内でフォームの各項目をひとつのclassでくくっても、フォームを設置しているページ内でメールフォームのタグをclassでくくっても上手くいきませんでした。input要素内にinput要素を置く形になるのがダメなのでしょうか。

html
1<div class="ques-hidden">
2            <label for="ques-label">
3            
4                  <p>
5                  質問フォーム
6                  </p>
7
8            </label>
9            <input type="checkbox" id="ques-label"/>
10            <div class="ques_show">
11
12            <!--非表示ここから-->
13            [contact-form-7 id="2758" title="質問フォーム"]
14            <!--ここまで-->
15
16            </div>
17</div>

css
1.ques-hidden {
2    margin: 0;
3    padding: 0;
4}
5
6.ques-hidden label {
7    cursor :pointer;
8}
9
10.ques-hidden input {
11    display: none;
12}
13
14.ques-hidden .ques_show {
15    height: 0;
16    padding: 0;
17    overflow: hidden;
18    opacity: 0;
19    transition: 0.8s;
20}
21
22.ques-hidden input:checked ~ .hidden_show {
23    padding: 0;
24    height: auto;
25    opacity: 1;
26}