February 3, 2024

Добавляем теги в форму Taplink

Taplink не позволяет вставлять в заголовки формы никакие теги и ссылки. Но мы можем исправить это с помощью кода.

Видеоинструкция:

Добавьте последним блоком в таплинке HTML- блок с содержимым:

<script>
function fixForms() {
  document.querySelectorAll('.has-form-normal label:not(.with-html)').forEach(function(label) {
    let textNodes = [];
    label.childNodes.forEach(node => {
        if (node.nodeType === 3) { 
            textNodes.push(node.nodeValue);
        }
    });
    // Соединяем все текстовые узлы, удаляем HTML-элементы
    let text = textNodes.join('').replaceAll('&lt;', '<').replaceAll('&gt;', '>');
  
    // Удаляем все дочерние элементы у исходного label
    label.childNodes.forEach(node => {
    if (node.nodeType === 3) { 
        textNodes.push(node.nodeValue);
        label.removeChild(node); // Удаляем только текстовые узлы
    }
});
    // Создание нового span с классом new-label и добавление в label
    let newSpan = document.createElement('span');
    newSpan.className = 'new-label';
    // Восстановление стилей
    let oldSize = window.getComputedStyle(label).fontSize;
    label.style.fontSize = '0';
    label.appendChild(newSpan);
  newSpan.innerHTML = text;
    newSpan.style.fontSize = oldSize;
  label.classList.add('with-html')
});
  }

let formFixerChecker = setInterval(()=>{
  fixForms()
  
  if (!document.querySelectorAll('.has-form-normal label:not(.with-html)').length) {
  clearInterval(formFixerChecker)
  }
  },1000)
</script>

Теперь ваш таплинк сможет показывать теги в заголовках полей форм

Для вставки ссылок

<a href="Ссылка" target="_blank">Текст ссылки</a>

Для остальных тегов можете попробовать любой тег https://html5book.ru/html-tags/

Но лучше ограничиться тегом span

Стилизация из видео:

<style>
.has-form-normal label a {
  color: #5A74F2;
  margin-left:.2em;
  text-decoration:underline;
}
.has-form-normal label font {
 color: var(--orange-color, #FF9F59);

}


.has-form-normal label span:not(.new-label) {
  background: linear-gradient(268deg, #2EB9F5 1.16%, #18A4E1 91.29%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

</style>