Контактная форма служит важным инструментом для облегчения общения между отдельными лицами или компаниями. Он предоставляет пользователям удобный и организованный способ связаться и выразить свои запросы. Вы также можете принимать заявки, контактные запросы и опросы общественного мнения, используя его.
Вы можете легко создать страницу контактов на своем веб-сайте, используя раздел «Контакты».
В этой статье:
-
- Добавление раздела контактов на страницу
- Управление контактной формой
- Содержание контактной формы
- Управление полями формы
- Типы полей
- Встроенная форма и всплывающая форма
- Управление макетом
- Контактная форма стиля
- Настройки контактной формы
- Перенаправить форму на другую страницу
- Экспорт данных формы
- Уведомления по электронной почте
- Отправленные данные формы
- Живой пример
Добавление раздела контактов на страницу
- На твоей странице, нажмите на синий + значок чтобы добавить новый раздел на свою страницу.
- Теперь вы увидите опцию Категории разделов на левой стороне.
- Выберите Формы (1) категорию и нажмите на Контакты вкладка (2), где вы можете выбрать разные макеты Контакты (3) раздел.
- Выберите любой макет раздела и нажмите на него, чтобы добавить его на свою страницу.
Управление контактной формой
- Нажмите на Редактировать контент (1) кнопка.
- У вас будет возможность управлять Контент (2) Планировка (3) Стиль (4) Настройки (5), и Уведомления по электронной почте (6).
- Удар Сохранено (7) применить изменения к форме.
Содержание контактной формы
Это важная часть формы, так как вы загружаете или меняете изображение, указываете здесь заголовок и описание, чтобы пользователи поняли назначение самой формы. Тщательно разработав краткий описательный заголовок и информативное убедительное описание, вы можете улучшить общение и установить прочные связи с посетителями вашего веб-сайта.
Управление полями формы
В разделе «Управление полями формы» вы можете указать поля, которые вы хотите, чтобы посетители заполняли в этой форме.
- Нажмите на Добавить новое поле (1), чтобы добавить дополнительные поля в форму.
- Изменить или удалить (2) уже добавленное поле.
- Перетаскивание (3) поля для изменения их последовательности в форме.
- Установить Надпись на кнопке призыва к действию (4) для формы.
Поле E-mail является обязательным в форме и не может быть удалено.
При нажатии на + Добавить поле Кнопка откроет всплывающее окно, из которого вы можете выбрать поля формы.
- Захватить имя вашего клиента.
- Захват любой небольшой информации через Краткий текст поле.
- Захватывайте любую сложную информацию/сообщение через Длинный текст поле.
- Захватить e-mail вашего клиента.
- Захват любого числовая информация от вашего клиента.
- Добавляйте услуги на выбор в падать пути.
- Одиночный выбор: Добавьте выбор радио для ваших услуг.
- Множественный выбор: Добавьте поле флажка для множественного выбора.
- Добавить выбор даты чтобы ваши клиенты могли выбрать дату для любого мероприятия.
- Добавить линия между полями формы.
- Захватить адрес вашего клиента.
- Захватить . вашего клиента.
- Захватить Телефон номер вашего клиента.
- Добавить время поле, чтобы ваши клиенты могли сами указать время события.
- Добавить разделитель между полями формы.
- поле согласия Опция может использоваться для получения разрешений на информационные бюллетени, принимая условия конфиденциальности и использования.
- Соберите отзывы клиентов с помощью звезда лестница, числовая шкала и масштаб смайликов.
- При добавлении определенных полей вы можете выбрать ширину между полной, половиной и одной третью.
- Вы также можете выбрать отображение полей рядом, выбрав вариант «Половина» или «Одна треть».
Стиль формы
- Отобразить форму в виде всплывающего окна – Включите эту опцию, чтобы форма открывалась во всплывающем окне при нажатии на кнопку призыва к действию.
- Метка кнопки призыва к действию – Установить Надпись на кнопке призыва к действию для формы.
- Всплывающее окно заголовка – Укажите форму Заголовок, если есть.
- Загрузить или удалить (1) изображение формы для формы.
- Добавить Название (2), и Описание (3) для формы. Перед добавлением описания проверьте этой статьи.
Headline
- Headline – Укажите Заголовок раздела (1) для раздела «Форма оплаты».
- Кнопки и значки - Узнать больше о Кнопки и значки (2).
Управление макетом
- Нажмите на Редактировать контент (1) кнопка.
- Выберите Планировка (2) вкладка.
- Выберите макет для вашего раздела (3) и Сохранено (4) изменения.
Изменение макета применит стиль формы по умолчанию.
Контактная форма стиля
Стилизация контактной формы является важным аспектом создания визуально привлекательного и удобного интерфейса.
У вас будет несколько вариантов стиля для раздела:
- Поля формы
- центровка
- Текст
- Расстояние
- Headline
- Фотографии
- Граница изображения
- Всплывающая кнопка
- Кнопка формы
- Кнопки заголовков
- Заголовки социальных иконок
Поля формы
Pixpa позволяет в полностью настроить Появление of форма полей. Эти моделирование кредита поданного в ВСЕ вход поля in Контакты форма для заполнения и давать большой контроль за это форма внешность и переживает on
- Форма: Выберите форму полей ввода — например, прямоугольную, округлую, таблетку или текст — в соответствии с эстетикой вашего веб-сайта.
- Наполните: Включите этот переключатель, чтобы применить цвет фоновой заливки к полям формы.
- Базовый цвет: Установите цвет фона полей, если включена опция заполнения.
- Outline: Включить или отключить границу (контур) для каждого поля.
- Цвет контура: Выберите цвет границы поля, когда контур включен.
- Цвет текста поля: Установите цвет текста, вводимого пользователями в поля формы.
- Высота: Отрегулируйте высоту полей, выбрав один из вариантов: Маленький, Средний, Большой или Очень большой.
- Ярлыки: Выберите, будут ли отображаться подписи полей формы внутри или снаружи поля.
- Этикетка Цвет: Определите цвет меток, размещенных за пределами поля.
- Цвет внутренней этикетки: Установите цвет для меток, размещенных внутри поля (полезно для меток в стиле заполнителей).
- Расстояние между полями: Используйте ползунок, чтобы задать вертикальный интервал (в пикселях) между каждым полем формы.
центровка
- Управляйте выравниванием содержимого формы по горизонтали от Горизонтальное выравнивание (1).
- Управляйте выравниванием содержимого формы по вертикали от Вертикальное выравнивание (2).
Текст
- Нажмите на Изменить стиль текста (1) кнопка для посещения Дизайн и управлять размерами и стилями шрифта.
- Укажите Название (2) стиль шрифта формы.
- Укажите Описание (3) стиль шрифта формы.
Расстояние
- Укажите Ширина изображения (1) изображения в виде в процентах.
- Укажите Пространство между изображением и текстом (3) в процентах.
- Укажите Пробел под заголовком (4) в процентах.
Headline
- Горизонтальное выравнивание текст заголовка раздела. Вы можете задать его слева, по центру и справа.
- Включить/выключить Делитель между заголовком раздела и содержанием раздела.
- Установить толщина разделителя (в пикселях).
- Укажите Цвет разделителя из палитры цветов.
- Выбрать Стиль разделителя из выпадающего списка.
- Установить Ширина заголовка чтобы определить ширину отображения заголовка раздела, начиная с минимального значения 50%.
- Укажите Пространство под заголовком внутри раздела (в пикселях).
Фотографии
- Обрезка изображения: Выберите Iмаг урожай для элементов списка. Вы можете установить изображения как «Квадрат», «Круг», «Горизонтально», «Портрет» и «Оригинал».
- Угловой радиус: Выберите общий радиус угла или разный радиус угла для каждой стороны элементов списка и установите число (в пикселях) для Cугловой радиус изображений элементов списка. Узнать больше.
- Анимация при наведении: Выберите Анимировать изображение раздела при наведении указателя мыши, включив переключатель. Проверьте эту функцию на живой странице.
- Стиль анимации: Выберите Стиль анимации для изображения при наведении на них курсора.
- Маска формы: Включите этот переключатель, чтобы применить маску формы к изображениям в разделе «Список изображений». После включения выбранная форма визуально обрежет изображение в этой форме.
- Выберите форму: Выбирайте из различных предопределенных форм для применения к вашим изображениям. Это позволяет вам творчески стилизовать ваш контент, отображая изображения в уникальных формах, таких как закругленные, ромбовидные, каплевидные и т. д.
Посмотрите на график угловой радиус поле, вы можете создавать различные формы изображений элементов списка. Если вы укажете здесь 500 пикселей, изображения будут отображаться в форме круга.
- Если вы выбрали разделенные углы, вы можете установить разные радиусы углов для каждого угла.
Граница изображения
- Включить/отключить границу по изображению, переключая переключатель.
- Выберите, чтобы иметь общая граница на всех сторонах изображения или вы можете указать границы отдельно с каждой стороны.
- Укажите ширина подачи границы. Если установлено значение 0, граница не появится. У вас также есть возможность установить ширину границы индивидуально для каждой стороны изображения.
- Выберите выделяющий цвет из палитры цветов.
- Выберите предпочтительный Стиль обрамления из выпадающего списка.
- Обозначить ширина границы для мобильных устройств устройств, выровняв его по ширине, выбранной для рабочего стола.
Всплывающая кнопка
Эти параметры стиля предназначены для всплывающей кнопки, при нажатии на которую откроется контактная форма.
- Размер кнопки – Выберите размер кнопки: маленький, средний или большой.
- Пробел над кнопкой – Отрегулируйте вертикальный интервал над кнопкой (в процентах).
- Стиль кнопки – Выберите стиль кнопки, например «по умолчанию» или «пользовательский».
- Цвет кнопки – Выберите цветовой стиль кнопки. Доступные варианты: «По умолчанию», «Инвертировать» или «Пользовательский».
- Текст кнопки – Настройте цвет текста для кнопки.
- Фон кнопки – Выберите цвет фона для кнопки.
Кнопка формы
Эти настройки позволяют настраивать кнопку отправки формы в соответствии с дизайном и макетом страницы.
- Размер кнопки – Выберите размер кнопки (маленькая, средняя или большая).
- Пробел над кнопкой – Отрегулируйте вертикальный интервал над кнопкой (указывается в процентах).
- Стиль кнопки – Выберите общий стиль кнопки, например «По умолчанию» или «Пользовательский».
- Цвет кнопки – Задайте цветовой стиль кнопки. Доступные варианты: «По умолчанию», «Инвертировать» или «Пользовательский».
- Текст кнопки – Настройте цвет текста, отображаемого на кнопке.
- Фон кнопки – Выберите цвет фона для кнопки.
- Выравнивание кнопок – Выберите выравнивание кнопки (слева, по центру или справа).
- Ширина кнопки – Настройте ширину кнопки. Доступные варианты: «По умолчанию», «Большая», «Очень большая» или «Полная ширина».
Кнопки заголовков
Эти настройки управляют внешним видом и расстоянием между кнопками, размещаемыми в заголовке раздела.
- Размер кнопки – Выберите общий размер кнопок (Маленький, Средний или Большой).
- Расстояние между кнопками – Отрегулируйте расстояние между несколькими кнопками (измеряется в vw).
- Пространство над кнопками – Установите вертикальное расстояние над кнопками (измеряется в процентах).
- Ширина кнопки – Выберите ширину кнопок. Доступные варианты: «По умолчанию», «Большие», «Очень большие» и «Полная ширина».
- Размер текстовой ссылки – Укажите размер шрифта текстовых ссылок, связанных с кнопками (измеряется в пикселях).
- Размер кнопки изображения – Отрегулируйте размер кнопок с изображениями (измеряется в пикселях).
Заголовки социальных иконок
Отображение и настройка значков социальных сетей в форме.
- Размер значка – Отрегулируйте размер значков социальных сетей (измеряется в пикселях).
- Тип значка – Выберите стиль значков, например «Классический», «Сплошной» или «Контурный».
- Цвет значка – Выберите цвет значков. Доступны следующие варианты: «Текст ссылки», «Пользовательский» или «Цвет бренда» (оригинальный цвет социальной платформы).
- Цвет фона значка – Установите индивидуальный цвет фона для значков, чтобы улучшить их видимость и стиль.
Настройки контактной формы
- Нажмите на Редактировать контент (1) кнопка.
- Настройте параметры формы в Настройки (2) вкладка и Сохранено (3) ваши изменения.
Имя формы
- Введите имя для найдите форму обратной связи в Pixpa Studio. Это имя не отображается посетителям сайта.
Действие после отправки
В качестве действия после отправки вы можете выбрать Показать сообщение об успехе (1) или Перенаправить на URL (2).
В случае Показать сообщение об успехе (1):
- Укажите Сообщение об успехе (2) Этот текст отображается после того, как пользователь отправит форму.
- Вы также можете добавить любой скрипт в успешное завершение платежа HTML (3) пунктом.
- В случае Rперенаправить на URLВы можете указать любую внутреннюю/внешнюю страницу, нажав на значок настроек (⚙️). Узнать больше.
Перенаправить форму на другую страницу
Перенаправление пользователей на определенную страницу после отправки формы может улучшить общее взаимодействие с пользователем и служит различным целям, таким как предотвращение дублирования отправки, аналитика и отслеживание, удержание пользователей на веб-сайте в течение более длительного периода времени и т. д.
Перенаправление может быть легко создано с помощью Действие после отправки на вкладке Настройка.
- Вы можете создать переадресацию на своем веб-сайте с Содержание веб-сайта (1) вариант. Это может быть страница, галерея, блог, галерея электронной коммерции, папка и т. д. Вам нужно ввести имя элемента в поле, как показано на скриншоте ниже, и вы получите предложения, относящиеся к нему.
- Используйте Ссылка (2) возможность создать перенаправление за пределы вашего сайта. Вам нужно будет ввести URL-адрес в поле, куда вы хотите, чтобы пользователи перенаправлялись после отправки формы.
Узнайте больше о как использовать Линкбилдер.
Синхронизация и экспорт данных формы
- Передайте данные из формы на Make.com. Узнать больше.
- Передайте данные формы в Zapier.com. Узнать больше.
- Экспорт данных формы в CSV-файл. Узнать больше.
Уведомления по электронной почте
Отсюда вы можете настроить тему письма для уведомлений, которые вы получаете как владелец веб-сайта при успешной отправке формы. Кроме того, вы можете персонализировать письмо об успешной отправке, отправляемое пользователям или клиентам после отправки формы. Эту функцию можно использовать для эффективного брендинга, маркетинга и проведения кампаний.
- Электронное письмо владельцу сайта: Включить или отключить уведомления по электронной почте для отправки форм. Если включено, уведомления будут отправляться на указанные адреса электронной почты.
- Предмет: Настройте тему письма. Используйте {ВЕБ-САЙТ} переменная для динамического включения имени веб-сайта в тему. Это полезно, когда у вас несколько веб-сайтов.
- Электронная почта: Укажите до 3 адресов электронной почты, на которые вы будете получать уведомления при отправке формы.
- Укажите Тема из контактной формы отправки email. Вы также можете включить {ВЕБ-САЙТ} переменная, включающая название веб-сайта.
Электронное письмо клиенту
- Вы можете включить Электронное письмо клиенту (1) отправить письмо об успешной отправке формы.
- Укажите Тема (2) почты.
- Укажите содержимое внутри письма от Сообщение об успехе (3).
- Электронная почта для клиентов — это премиум-функция, доступная только на Профессиональный и продвинутый планы. Узнать больше.
- Тщательно настройте содержимое электронной почты, чтобы обеспечить последовательное и профессиональное общение с вашими клиентами.
Отправленные данные формы
Отправленные данные формы в контактной форме включают информацию, которую пользователь вводит в поля формы при ее отправке.
- Все данные формы хранятся и доступны из Представления формы страница студии. Узнать больше.
- Все данные, отправленные через контактную форму, также будут перенаправлены на адрес электронной почты, указанный в настройках контактной формы. Твой адрес электронной почты учетной записи принимается по умолчанию.
Также проверьте: Изменить адрес электронной почты аккаунта.
Живой пример
Вот живая всплывающая контактная форма:
Просмотрите демо-сайт в реальном времени.
Вот живая встроенная контактная форма:
Просмотрите демо-сайт в реальном времени.
Чтобы уменьшить количество спамеров в форме, в вашей форме автоматически включается защита Google captcha.