Как добавить форму в карточку товара в Tilda

Как добавить форму в карточку товара в Tilda

1
Создали форму BF204N и задали ей класс uc-product-form
2
Добавили в неё:
  • поле с именем
  • поле с телефоном
  • скрытое поле с именем product
3
Вставили код в блок Другое - Т123 на страницу и в продуктовый footer
Библиотека примера

<style>
.uc-product-form{
    display: none;
}

.uc-product-form .t-container {
    max-width: 100%;
}

.uc-product-form .t-col {
    padding-left: 0;
    margin: 0;
    max-width: 100%;
}

.uc-product-form {
    margin-top: 20px;
}

.uc-product-form .t-form__submit {
    text-align: left;
}    

.uc-product-form {
    width: 80%;
}

.uc-product-form button.t-submit {
    height: 45px;
    font-size: 14px;
}

.uc-product-form .t-input {
    height: 45px;
}

.uc-product-form .t-input-group {
    margin-bottom: 10px;
}

.uc-product-form .t678 .t-form__submit {
    margin-top: 14px;
}

.uc-product-form .t-input-title {
    font-size: 16px;
}

@media screen and (max-width:500px){
.uc-product-form {
    width: 100%;
}
}



</style>


<script>
document.addEventListener("DOMContentLoaded", function(){

function insertForm(){
    let prName = '';
    if(document.querySelectorAll('.t-store__product-snippet').length){
        $('.uc-product-form').appendTo('.t-store__product-snippet .t-store__prod-popup__info');
        prName = $('.t-store__product-snippet').find('.js-store-prod-name').text();    
    }else{
        $('.uc-product-form').appendTo('.t-popup.t-popup_show .t-store__prod-popup__info');
        prName = $('.t-popup.t-popup_show').find('.js-store-prod-name').text();
    };
    $('input[name="product"]').val(prName);
    $('.uc-product-form').show();
}; 
    

setTimeout(function () {
    if(document.querySelectorAll('.t-store__product-snippet').length)  insertForm();
}, 1500);


document.addEventListener('click', function(e){
    let prodElem = e.target.closest('a[href*="/tproduct/"]');
    if (prodElem != null) { 
        setTimeout(function () {  insertForm() }, 1000);
    };
});

});
</script>
Made on
Tilda