Вывести поля формы в несколько колонок

Делаем компактную форму с несколькими полями в одну строку
Пример работы скрипта
4
4
4
5
7
6
6
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу любую форму и добавьте к ней класс uc-formcols
    Скрипт работает со всеми формами, доступными в Tilda, кроме горизонтальных
  • 2
    Установите скрипт на страницу в HTML-блок
    Скрипт должен быть установлен ниже блока попапа, в самом конце страницы, или в подвале
  • 3
    Добавьте кол-во колонок от 1 до 12 в поле Подзаголовок в каждом поле формы
    Следите за тем, чтобы в строке, суммарная ширина всех полей составляла 12. Посмотреть как.
  • 4
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт

<style>
    .row {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .col {
        display: inline;
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .col_1 {
        width: 8.3%;
    }
    .col_2 {
        width: 16.6%;
    }
    .col_3 {
        width: 25%;
    }
    .col_4 {
        width: 33.3%;
    }
    .col_5 {
        width: 41.6%;
    }
    .col_6 {
        width: 50%;
    }
    .col_7 {
        width: 58.3%;
    }
    .col_8 {
        width: 66.6%;
    }
    .col_9 {
        width: 75%;
    }
    .col_10 {
        width: 83.3%;
    }
    .col_11 {
        width: 91.6%;
    }
    .col_12 {
        width: 100%;
    }

    @media (max-width: 960px) {
        .col_1,
        .col_2,
        .col_3,
        .col_4,
        .col_5,
        .col_6,
        .col_7,
        .col_8,
        .col_9,
        .col_10,
        .col_11,
        .col_12 {
            width: 100%;
        }
    }
</style>
<script>
    setFormCols('.uc-formcols');

    function setFormCols(id, config = {}) {
        const $wrapper = $(id);

        const $row = $('<div class="row"></div>');
        if (config.padding) {
            $row.css({
                width: `calc(100% + ${parseInt(config.padding) * 2}px)`,
                marginLeft: `-${config.padding}`
            });
        }

        $wrapper
            .find('.t-input-group')
            .wrapAll($row)
            .each(function() {
                const $colText = $(this).find('.t-input-subtitle');
                const col = +$colText.text() || 12;
                $colText.remove();

                const $col = $(`<div class="col col_${col}"></div>`);
                if (config.padding) {
                    $col.css({
                        paddingLeft: config.padding,
                        paddingRight: config.padding
                    });
                }
                $(this).wrap($col);
            });
            
        $wrapper.find('.row').after('<div style="clear: both;"></div>');
    } // Инструкция по работе со скриптом https://trilda.ru/kak-sdelat-polya-formi-v-neskolko-kolonok
</script>
Вопросы и комментарии
Made on
Tilda