Как стилизовать формы Mailchimp в WordPress [2 метода!]

Опубликовано: 2023-03-02

Хотите стилизовать формы Mailchimp в WordPress? Это руководство покажет вам, как легко оформить форму регистрации в Mailchimp! Вот как это сделать.

Примерное время чтения : 5,5 минут

Устали искать простой способ оформления формы Mailchimp в WordPress?

Мы понимаем. Вы ищете и ищете, но не находите много вариантов. Особенно те, которые не ожидают, что вы знаете, как программировать.

И это расстраивает.

Formidable Forms — лучший плагин для конструктора форм WordPress. Получите это бесплатно!

Но это не обязательно. На самом деле, разработка стиля формы для Mailchimp может быть увлекательной .

Итак, этот пост покажет вам два способа оформления формы для встраивания Mailchimp: с помощью Mailchimp и Formidable Forms.

Давайте начнем.

Как стилизовать формы с помощью Mailchimp
- 1. Как стилизовать формы с помощью Mailchimp
- 2. Стилизуйте свои формы с помощью конструктора форм

Как стилизовать формы Mailchimp в WordPress

Формы Mailchimp выглядят великолепно, но немного примитивны.

И настроить их в соответствии с вашим сайтом — отличный способ выделить их.

Итак, есть три способа стилизовать вашу форму Mailchimp в WordPress:

Использование стилей Mailchimp
Используйте конструктор форм

Поскольку оба работают, мы покажем вам, как сделать каждый.

1. Как стилизовать формы с помощью Mailchimp

Стилизация форм Mailchimp с использованием их метода может быть сложной.

И это потому, что вам нужно знать хотя бы немного кода, чтобы начать. Если вы этого не сделаете, все может очень быстро запутаться. Поэтому мы рекомендуем этот метод людям, уверенным в своих способностях к кодированию.

Чтобы начать настройку формы, перейдите в свою учетную запись Mailchimp и выберите «Аудитория» → «Формы регистрации» → «Встроенные формы» .

Не стесняйтесь настраивать поля формы, добавляя адрес электронной почты, имя или фамилию.

Когда закончите, нажмите Продолжить .

Далее вы увидите фрагмент HTML-кода, который вы можете скопировать и вставить на свой сайт, чтобы отобразить форму.

Если вы хотите настроить внешний вид этой формы, это означает настройку кода вашей формы.

Но иногда вам приходится использовать CSS-хуки Mailchimp. И у Mailchimp их более 30, например mc-embedded-subscribe-form или mc-embed signup.

Если вы достаточно хорошо разбираетесь в CSS и используете эти хуки, вы можете многое сделать со своими формами.

Можно настроить поля ввода, кнопку отправки и любые действия с формой, вставив этот код в редактор и изменив его.

Измените цвет фона вашей формы

Чтобы изменить фон вашей формы, вы должны указать код <div id=”mc_embed_signup”>.

Итак, в разделе стилей вы увидите фрагмент кода:

Вы можете изменить этот код, чтобы настроить фон вашей формы. Например, вы можете изменить фон: #fff на фон: #000 , чтобы изменить фон на черный.

Но теперь текст больше не виден. Таким образом, вы можете добавить цвет: #fff , чтобы изменить его на белый.

Теперь ваша форма выглядит еще лучше!

Не стесняйтесь экспериментировать с настройкой, чтобы увидеть, сможете ли вы соответствовать своему сайту WordPress!

Настройка кнопки отправки

Теперь давайте посмотрим, как изменить кнопку отправки.

Итак, вам нужно настроить таргетинг на <input type="submit">. Но нам нужно будет сделать это иначе, чем ваш фон формы.

Перейдите в раздел <style> и добавьте код для переопределения стиля формы Mailchimp:

Это сделает фон кнопки белым, а текст черным.

И теперь ваша форма начинает собираться вместе!

Вы можете продолжить настраивать свою форму, ориентируясь на крючки CSS, такие как mc-field-groups и код <input type="email">.

Но если вам нужен более простой способ стилизации ваших форм Mailchimp, ознакомьтесь с методом ниже.

2. Стилизуйте свои формы с помощью конструктора форм

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

Если вы умеете кодировать.

Но если вам нужен гораздо более простой вариант, мы предлагаем Formidable Forms .

Formidable — это самый продвинутый конструктор форм WordPress, позволяющий легко настраивать формы. Будь то контактная форма или всплывающее окно Mailchimp, Formidable поможет вам.

Кроме того, благодаря интеграции с Mailchimp и отличному Visual Form Styler, это идеальный конструктор контактных форм для Mailchimp.

Итак, установите и активируйте Formidable, и тогда мы начнем.

Получите стайлер форм Mailchimp!

И сделать это можно всего за пару шагов:

Соедините Mailchimp и Formidable
Создайте свою форму
Настроить дизайн
Показать вашу форму

1. Подключите Mailchimp и Грозный

В панели управления WordPress перейдите в раздел Formidable → Add-Ons , найдите надстройку Mailchimp , установите и активируйте ее.

Далее перейдите в раздел «Грозный» → «Глобальные настройки» → «Mailchimp» .

Вы можете ввести свой ключ API Mailchimp, чтобы подключиться к своей учетной записи Mailchimp.

Теперь, когда ваша учетная запись Mailchimp подключена, пришло время создать форму!

2. Создайте свою форму

Чтобы приступить к созданию формы, перейдите в раздел Formidable → Forms , и нажмите Добавить новый .

Затем выберите один из множества шаблонов Formidable или пустую форму , чтобы начать с нуля.

Затем назовите свою форму и нажмите «Создать» .

Плагин перенесет вас в конструктор форм перетаскивания, где вы сможете приступить к созданию своей формы.

Не стесняйтесь настраивать форму, добавляя адрес электронной почты, имя и текстовые поля в соответствии с вашими потребностями.

После завершения нажмите «Обновить» , чтобы сохранить изменения, перейдите в «Настройки » → «Действия и уведомления» и нажмите «Mailchimp» .

Ниже появится действие Mailchimp, и вы сможете настроить параметры Mailchimp.

Установив их, нажмите «Обновить» , чтобы сохранить изменения. Теперь добавить подписчика Mailchimp в свой список адресов электронной почты так же просто, как заполнить форму.

Теперь пришло время настроить вашу форму. Итак, давайте перейдем на вкладку «Стиль» .

3. Настройте дизайн

Visual Form Styler от Formidable позволяет каждому легко настроить красивую форму.

Нет необходимости кодировать или использовать CSS-хуки. Просто нажмите и настройте параметры на боковой панели.

Итак, вы увидите несколько вариантов на вкладке «Стиль» Formidable.

Вы можете выбрать один из готовых шаблонов дизайна Formidable, чтобы сэкономить время, или приступить к созданию собственного стиля.

Чтобы настроить его, щелкните три точки на шаблоне и нажмите «Изменить» .

В Styler от Formidable вы можете настроить свою форму в соответствии с вашими потребностями.

Изменяйте размер шрифта, радиус границы, цвета — все, что вы видите, вы можете настроить.

Вы можете проявить творческий подход к своей форме и сделать ее уникальной для вашего веб-сайта.

Например, вот форма, которую мы создали для тестового веб-сайта, который мы используем!

Styler от Formidable упрощает работу для вас, будь то новичок или эксперт.

Итак, поэкспериментируйте с настройками и сделайте форму своей.

Просто убедитесь, что вы нажали «Обновить» , когда закончите, чтобы сохранить изменения.

Теперь давайте отобразим эту форму.

4. Отобразите свою форму

Сначала перейдите к сообщению или странице, где вы хотите добавить форму Mailchimp.

Затем добавьте новый блок WordPress, затем найдите блок Formidable Forms и добавьте его.

Затем выберите свою форму из выпадающего меню, и вы увидите свою форму.

Наконец, нажмите «Обновить» , чтобы сохранить изменения, и ваша форма активна!

Мы говорили вам, что Formidable лучше всего подходит для простых форм для Mailchimp!

Всего за несколько простых шагов вы получите готовую форму.

Никакого кода, никаких хлопот — простое создание формы.

Получите стайлер форм Mailchimp!

Как вы будете оформлять формы Mailchimp в WordPress?

Настройка формы регистрации Mailchimp в WordPress — лучший способ выделить ваши формы.

И сегодня вы узнали о двух разных способах настройки встроенных форм для Mailchimp — с помощью кода и с помощью Formidable Forms. Какой из них вы выберете, будет зависеть от вашего удобства работы с кодом, хотя мы рекомендуем Formidable, даже если вы опытный программист.

Если вам все еще интересно, почему Formidable — лучший выбор, ознакомьтесь с этим постом о том, почему это лучший плагин WordPress для формы регистрации Mailchimp.

Вы не будете разочарованы.

Если вы готовы начать, перейдите на нашу страницу с ценами и выберите один из наших отличных планов.

Наконец, подпишитесь на нас в Facebook, Twitter и YouTube, чтобы узнать больше полезных советов и рекомендаций по Mailchimp!

Узнайте больше о Mailchimp и Formidable!

Знаете ли вы, что Formidable Forms — один из самых быстрых плагинов для создания форм WordPress, доступных сегодня? Если вы еще не используете его, начните с нашего бесплатного плагина или полнофункциональной профессиональной версии!