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