Редизайн форм для taplink

Чтобы перекрасить формы на одной странице, вставьте код в "HTML-блок".

Чтобы перекрасить все формы сразу, вставьте во "вставку HTML-кода" в "настройках"

Код:

<style>
:root {
  /* Фон формы */
--form-bck: #21C998;
  /* Отступы до контента у формы по горизонтали */
--horizontal-form-padding: 20px;
  /* Отступы до контента у формы по вертикали */
--vertical-form-padding: 10px;
  /* Закругление у формы */
--form-radius: 6px;
  /* Цвет обводки формы */
--form-border: transparent;
  /* Тень формы. Первое число - смещение по Х, второе по Y. Третье - размытие тени, четвертое - ширина тени. Дальше цвет */
--form-shadow: 5px 5px 10px 5px rgba(255,255,255,0.5);
  /* Цвет кнопки */
--form-btn-bck: white;
  /* Цвет обводки кнопки */
--form-btn-border: white;
  /* Тень кнопки. Первое число - смещение по Х, второе по Y. Третье - размытие тени, четвертое - ширина тени. Дальше цвет */
--form-btn-shadow: 5px 5px 10px 5px rgba(0,0,0,0.5);
  /* Закругление кнопки */
--form-btn-radius: 6px;
  /* Цвет текста кнопки  */
--form-btn-clr: black;
  /* Цвет фона полей для ввода  */
--input-bck: rgba(255,255,255,0.3);
  /* Радиус закругления полей для ввода */
--input-radius: 6px;
  /* Цвет заголовков формы */
--form-text-clr: rgba(255,255,255,1.0);
  /* Цвет маски страны на поле с телефоном */
--form-phone-mask: rgba(255,255,255,0.6);
  /* Цвет описаний поля */
--form-subtext-clr: gray;
  /* Фон кружков "выбора" */
--form-radio-bck: rgba(255,255,255,0.6);
  /* Цвет обводки кружков "выбора" */
--form-radio-border: rgba(255,255,255,0.0);
  /* Цвет точки внутри кружка "выбора" */
--form-radio-pnt: #21C998;
  /* Цвет обводки полей для ввода */
  --input-border-clr: rgba(0,0,0,0.7);
  /* Цвет обводки полей для ввода СВЕРХУ */
  --input-bordertop-clr: rgba(0,0,0,0.7);
  /* Цвет обводки полей для ввода СНИЗУ */
--input-borderbtm-clr: rgba(0,0,0,0.7);
  /* Фон элемента "галочка" */
  --form-box-bck: rgba(255,255,255,0.6);
  /* Цвет обводки элементов "галочка" */
--form-box-border: rgba(255,255,255,0.0);
  /* Цвет обводки полей для ввода во время ввода */
  --input-active-clr: yellow;
  /* Цвет текста в подсказках поля для ввода */
  --form-hidden-clr: rgba(0,0,0,0.3);
  /* Цвет текста введенных в поля значений */
  --input-clr: black;
  /* Цвет галочки */
  --form-box-on: rgba(255,255,255,1.0);
  /* Стандартные черные иконки нельзя поменять на цветные. Можно только инвертировать цвет в белый, поменяв цифру 0 ниже на 1, а потом с помощью яркости brightness поварьировать оттенок серого */
  --icon-invert: 0;
--icon-brightness: 100%;
}
.block-form {
background: var(--form-bck);
padding: var(--vertical-form-padding) var(--horizontal-form-padding);
border-radius: var(--form-radius);
  border: 1px solid var(--form-border);
  box-shadow: var(--form-shadow);
}


.block-form input, .block-form textarea, .block-form select {
background: var(--input-bck) !important;
border-radius: var(--input-radius) !important;
      border: solid 1px var(--input-border-clr) !important;
    border-top: solid 1px var(--input-bordertop-clr) !important;
  border-bottom: solid 1px var(--input-borderbtm-clr) !important;
  color: var(--input-clr) !important;
}
 .block-form .btn-link {
background-color: var(--form-btn-bck) !important;
border: 1px solid var(--form-btn-border) !important;
box-shadow: var(--form-btn-shadow) !important;
border-radius: var(--form-btn-radius) !important;
color: var(--form-btn-clr) !important;
}
.block-form .label, .block-form  .radio {
color: var(--form-text-clr) !important;
}
.form-field-desc {
color: var(--form-subtext-clr);
}
.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--form-phone-mask) !important;
  border-radius: var(--input-radius) 0px 0px var(--input-radius) !important;
}
.radio input {
background: transparent !important;
border-radius: 50% !important;

}
.radio input:before {
background: var(--form-radio-bck) !important;
    border-color: var(--form-radio-border) !important;
}
.radio input:after {
background: var(--form-radio-pnt) !important;
}
  .checkbox input {
background: transparent !important;
border-radius: 0px !important;

}
.checkbox input:before {
background: var(--form-box-bck) !important;
    border-color: var(--form-box-border) !important;
}
.checkbox input:after {
background: transparent !important;
border-color: var(--form-box-on) !important;
}
  .block-form input[type="text"]:focus, .block-form input[type="password"]:focus, .block-form input[type="tel"]:focus, .block-form input[type="email"]:focus, .block-form input[type="number"]:focus, .block-form textarea:focus, .block-form .select select:focus, .form-field .pagination-previous:focus, .form-field .pagination-next:focus, .form-field .pagination-link:focus {
    border-color: var(--input-active-clr) !important;
    box-shadow: none !important;
}
  .block-form .iti input[type=tel]::placeholder {
    color: var(--form-hidden-clr);
}
  ::-webkit-calendar-picker-indicator {
    filter: invert(var(--icon-invert)) brightness(var(--icon-brightness));
}
  
</style>