Как создать форму, которая сворачивается в кнопку с пользовательской версткой

Когда не подходят стандартные варианты кнопки, можно создать собственный шаблон.

Для этого:

1. Перейдите в редактирование внешнего вида и нажмите кнопку «Выбрать шаблон».

Untitled 15.png

2. Выберите пустой шаблон в самом конце списка шаблонов:

Untitled 16.png
3. Введите код верстки.

Пример HTML-кода:

<div class="popmechanic-button">
<img src="https://usermedia.popmechanic.ru/popmechanic-media/2521/227081362bc710ef117bd4337eb5dbea16c31168bfb198eeeee80b0f9ff14c10.png" class="popmechanic-button-letter">
</div>

4. Добавитьте стили.

Как указать стили

Пример CSS:

.popmechanic-button {
    width: 75px;
    height: 75px;
    background-color: #ef3400;
    background-size: cover;
    cursor: pointer;
    border-radius: 10px;
    border: none;
    outline: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center; }

.popmechanic-button .popmechanic-button-letter {
    width: 48px;
    height: 36px; } 

.popmechanic-mobile .popmechanic-button {
    border-radius: 50%; }

Untitled 17.png

5. Проверьте, что кнопка корректно отображается для ПК, планшета и телефона.

6. Сохраните изменения и нажмите кнопку назад.
7. Не забудьте включить кнопку для формы:

Снимок экрана 2022-11-09 в 23.45.34.png

HTML-письма без ошибок: 8 требований к дизайну и верстке