Contact form 7 with spoilers/accordion

I needed to publish a questionnaire, with answer options opening by clicking on a question. There were no ready-made plugins for implementation, so I made a code for use:

Contact Form 7 with accordion

Full form template (sorry for the RU answer options):

<div class="tabs">
      
<div class="tab"><input type="radio" id="rd1" name="rd"><label class="tab-label" for="rd1">1. Оцените комфортность условий пребывания в организации</label><div class="tab-content">[radio radio-227 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd2" name="rd"><label class="tab-label" for="rd2">2. Как вы оцениваете доброжелательность и вежливость персонала организации?</label><div class="tab-content">[radio radio-434 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно" "Плохо" "Неудовлетворительно" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd3" name="rd"><label class="tab-label" for="rd3">3. Насколько вас в целом устраивает график работы организации?</label><div class="tab-content">[radio radio-435 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Совершенно не удобно" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd4" name="rd"><label class="tab-label" for="rd4">4. Оцените доступность и актуальность информации о деятельности организации, размещенной на стендах, вывесках</label><div class="tab-content">[radio radio-436 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd5" name="rd"><label class="tab-label" for="rd5">5. Оцените качество и полноту информации об организации, размещенной на официальном сайте</label><div class="tab-content">[radio radio-437 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd6" name="rd"><label class="tab-label" for="rd6">6. Оцените удобство пользования электронными сервисами, предоставляемыми организацией (в том числе и с помощью мобильных устройств)</label><div class="tab-content">[radio radio-438 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd7" name="rd"><label class="tab-label" for="rd7">7. Как вы оцениваете дополнительные услуги, предоставляемые организацией и доступность их получения?</label><div class="tab-content">[radio radio-439 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd8" name="rd"><label class="tab-label" for="rd8">8. Оцените качество и содержание полиграфических материалов организации</label><div class="tab-content">[radio radio-440 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd9" name="rd"><label class="tab-label" for="rd9">9. Сталкивались ли вы с несоблюдением установленного (заявленного) времени предоставления услуг (проведения мероприятий)?</label><div class="tab-content">[radio radio-441 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd10" name="rd"><label class="tab-label" for="rd10">10. Приходилось ли вам сталкиваться с тем, что сотрудники организации нарушали режим работы (приходили позже рабочего времени, отсутствовали на рабочем месте длительное время и т.д.)?</label><div class="tab-content">[radio radio-442 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]</div>
</div>

<div class="tab"><input type="radio" id="rd11" name="rd"><label class="tab-label" for="rd11">11. Укажите пожалуйста ваш возраст:</label><div class="tab-content">[radio radio-676 use_label_element default:1 "18-30" "31-45" "46-55" "Старше 55 лет"]</div>
</div>

<div class="tab"><input type="radio" id="rd12" name="rd"><label class="tab-label" for="rd12">Комментарии/пожелания:</label><div class="tab-content">[textarea textarea-79]</div>
</div>

<div class="tab"><input type="radio" id="rd13" name="rd"><label class="tab-label" for="rd13">Введите электронную почту для подтверждения подлинности оценок *</label><div class="tab-content">[text* text-246]Мы не рассылаем спам и не передаем вашу почту третьим лицам</div>
</div>

</div>
<br>
<div class="otpravit">[submit "Отправить ответы"]</div>

You can delete this one:

[radio radio-227 use_label_element default:1 "Отлично, все устраивает" "В целом хорошо" "Удовлетворительно, незначительные недостатки" "Плохо, много недостатков" "Неудовлетворительно, совершенно не устраивает" "Затрудняюсь ответить"]

…and add your options generated using Contact Form 7.

Here is the CSS for this form to expand on click:

.tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}
.tab {
  width: 100%;
  color: #000;
  overflow: hidden;
}
.tab-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 1em;
  background: #f5f5f5;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}
.tab-label:hover {
  background: #d0d0d0;
}
.tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.tab-close {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.tab-close:hover {
  background: #1a252f;
}
input:checked + .tab-label {
  background: #1a252f;
  color: #fff;
}
input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}
.tab > input[type="radio"] {
  display: none;
}