Добавление стандартным формам заголовков галочкам и выпадающей строки при выборе пункта "другое" в галочках и выборах

Как вы делаете формы, если вашему бизнесу необходимо провести какое-либо анкетирование в заявке?

Можно сделать гугл форму, но тогда вы не сможете получать уведомления о заполнении заявки в телеграм, не сможете пользоваться разделом «статистика», без которого не отследить источник трафика в форму, а также не сможете оптимизировать рекламу, направленную на заполнение формы.
Стандартная же форма таплинка имеет ряд недостатков и недоработок

К примеру, в стандартной форме невозможно добавить заголовок к галочкам, как вот в примере «чем вас привлёк наш проект».
Также в стандартной форме при выборе варианта «другое» невозможно показывать строку для ввода, вы можете только добавить ее под галочкой, что будет выглядеть неопрятно и нефункционально

Для решения проблем заголовка и поля «другое» был сделан скрипт, который следует вставлять в «HTML-блок после формы» и придерживаться небольших правил при составлении полей самой формы
1. Чтобы добавить заголовок для галочки, добавьте ему описание.

Описание будет скрыто скриптом, а над галочкой будет вставлен заголовок с текстом описания.
Вы можете перестилизовать заголовок с помощью
<style>
.form-subheader {

}
</style>

2. Чтобы сделать галочку, выбор которой покажет скрытое поле, добавьте галочку в требуемое место, и назовите ее «Другое:». Именно так, с двоеточием, иначе не сработает.
Снизу добавьте строку.

Настройки строки для корректного срабатывания:
а) Любой заголовок. Я рекомендую написать там «Ввести свой вариант» или что-то подобное
б) Сделать описание «hidden»

3. Чтобы сделать поле «выбор» с пунктом «другое», создайте поле «выбор» и ниже поле «строка»

Последний пункт должен быть «Другое:», именно с двоеточием, иначе не сработает

Настройки строки такие же, как с галочкой: любой заголовок и описание hidden

Скрипт:

<style>
.hidden {
display: none;
}
</style>
<script>
Array.from(document.querySelectorAll('.checkbox-list')).map((kekbox) => {
var checkboxheader = kekbox.querySelector('.form-field-desc');
  if (checkboxheader !== null) {
checkboxheader.style.display="none";
  kekbox.insertAdjacentHTML('afterbegin', '<p class="form-subheader">' + checkboxheader.textContent + '</p>');
  }
});
</script>
<script>
Array.from(document.querySelectorAll(".checkbox-list .checkbox")).map((another) => {
 
        let anotherData = another.textContent.match(
            /(Другое:)/gm
        );
  if (anotherData !== null) {
another.parentElement.parentElement.parentElement.classList.add('another');
 

        }
  });
  
  
</script>
<script>
Array.from(document.querySelectorAll(".radio-list .radio")).map((another) => {
 
        let anotherData = another.textContent.match(
            /(Другое:)/gm
        );
  if (anotherData !== null) {
  another.querySelector('input').classList.add('another-radio');
another.parentElement.parentElement.parentElement.classList.add('another-radwrap');
 

        }
  });
  
  
</script>
<script>
Array.from(document.querySelectorAll(".form-field-desc")).map((hidden) => {
 hidden.style.display="none";
        let hiddenData = hidden.textContent.match(
            /(hidden)/gm
        );
  if (hiddenData !== null) {
hidden.parentElement.parentElement.classList.add('hidden');
 

        }
  });
  
  
</script>
<script>
Array.from(document.querySelectorAll('.another')).map((anotherblock) => {
  var kekbox = anotherblock.querySelector('input');
  kekbox.onchange = function() {
  if (kekbox.checked) {
  anotherblock.nextSibling.classList.remove('hidden');
  }
  else {

  anotherblock.nextSibling.classList.add('hidden');
}
}
  });
</script>
<script>
  setInterval(() =>  {
Array.from(document.querySelectorAll('.another-radwrap')).map((anotherblock) => {
  var kekbox = anotherblock.querySelector('.another-radio');
  if (kekbox.checked) {
  anotherblock.nextSibling.classList.remove('hidden');
  }
  else {

  anotherblock.nextSibling.classList.add('hidden');
}
  })
  }, 100);
</script>