Привет!

Services

Как добавить контактную форму в магазин Shopify?

Artur ShevchenkoArtur Shevchenko

Для каждого клиента очень важно иметь возможность обратиться к продавцу с уточнением любого вопроса, касающегося приобретения конкретных товаров или услуг. Для этого вам нужно добавить контактную форму в Shopify-магазин.
Это несложный процесс, который может выполнить любой пользователь Shopify при условии нескольких нюансов. Чтобы узнать каких, читайте ниже.

Современный сайт невозможно представить без контактной формы. Это неотъемлемая часть должна присутствовать на любом сайте, независимо от его тематики. Через контактную форму вы получаете отзывы, жалобы и предложения посетителей, которые помогут вам сделать процесс продажи и покупки удобнее. Это несомненно один из лучших способов, позволяющих владельцу магазина Shopify полноценно общаться со своими клиентами.

Что нужно сделать, чтобы добавить контактную форму Shopify

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

Способ 1: настройка формы с помощью специальных полей

1. Создайте страницу контактов

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

Чтобы создать страницу контактов:

  1. Вам нужно перейти в админку Shopify и выбрать Online Store > Pages.
  2. Нажать Add page.
  3. В поле Title указать название вашей страницы контактов, например “Contact us” или “Get in touch”.
  4. В поле Content добавьте любой текст, который нужно отобразить над формой контакта. Желательно, чтобы текст был лаконичным, дружелюбным и призывающим к действию. Тут вы можете указать свои контактные данные, например, адрес вашего магазина, номера телефонов и т.п.



  5. В блоке Template  выберите page.contact в выпадающем меню Template suffix:



  6. И нажмите Save.

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

2. Добавьте поле в контактную форму

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

Чтобы добавить в коде дополнительные поля в контактную форму необходимо:

  1. В вашей админке Shopify перейти в Online Store > Themes.
  2. Далее выбрать тему, которую вы хотите редактировать, и в выпадающем меню Actions нажать Edit code.
  3. Теперь перед вами весь список файлов вашей темы. В папке Templates необходимо выбрать файл page.contact.liquid.
  4. Код контактной формы для Shopify магазина находится внутри следующих тегов:
    {% form 'contact' %}
    и
    {% endform %}
    Каждая тема отличается, но приблизительно это выглядит так:



    В прямоугольник выделено поле формы для имени: contact.form.name. Ниже вы можете увидеть: contact.form.email, contact.form.phone, contact.form.message.
  5. Код для ваших дополнительных полей вы можете добавить до, после или между существующими полями, в зависимости от ваших предпочтений. Код, который вы добавите, будет зависеть от типа поля формы, которые вы хотите создать.
  6. После добавления нужных вам полей не забудьте нажать Save.

3. Выберите типы полей контактной формы Shopify

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

Текстовое поле

Подумайте, какие данные вы хотите получать от клиента, какие поля должны быть обязательными, а какие нет. Все это вы можете настроить самостоятельно. Чтобы создать текстовое поле для своей контактной формы, вставьте и настройте следующий код:

<label for="ContactFormCountry">Country</label>
<input type="text" id="ContactFormCountry" name="contact[Country]" placeholder="Country">

Выпадающее меню

Чтобы создать раскрывающееся меню для  контактной формы в Shopify магазин, вставьте и настройте следующий код:

<label for="ContactFormFlavor">Choose a flavor</label>
<select id="ContactFormFlavor" name="contact[Flavor]">
 <option>Chocolate</option>
 <option>Vanilla</option>
 <option>Strawberry</option>
</select>

4. Настройте поля контактной формы в Shopify-магазине

Чтобы настроить добавленные вами поля формы, отредактируйте код из приведенных выше примеров, прежде чем сохранять их в шаблоне контактной формы. Затем добавьте нужные вам атрибуты в форму Shopify: name, value, placeholder и label. После добавления этих полей, у вас должна получится контактная форма:



И когда клиент заполнит данную контактную форму, к вам на почту придет отчет такого вида:

Способ 2: создание контактной формы в Shopify-магазине  с помощью приложения

Для создания контактной формы в Shopify можно воспользоваться одним из приложений Shopify. Они оснащены такими полезными функциями, как адаптивные макеты, раскрывающиеся списки, чекбоксы, средства выбора даты, антиспам-фильтры, поддержка нескольких языков, простая настройка цвета, шрифтов и фона и многое другое.

Список самых лучших приложений для контактной формы Shopify

1. Easy Contact Form

Easy Contact Form - это бесплатное приложение, разработанное Zotabox для создания неограниченного количества контактных форм. Оно оснащено отзывчивым дизайном, поэтому ваши формы будут хорошо выглядеть и работать на мобильных устройствах, таких как телефоны и планшеты. Вы сможете легко настроить внешний вид форм в соответствии с существующим брендом вашего магазина. Приложение Easy Contact Form очень простое в установке и настройке, включает в себя Ajax и HTML5-код и позволяет загружать фоновые изображения.

★★★☆☆

2. Form Builder

POWr Form Builder позволит вам создавать бесплатные профессиональные, простые в использовании и универсальные формы для сбора любой информации, которая вам нужна для бизнеса. Приложение оснащено многочисленными удобными функциями, такими как автоматические почтовые ответы на заполненную клиентами форму, защита от спама, возможность загрузки файла, многостраничная форма и многое другое.

★★★★☆

3. Improved Contact Form

Improved Contact Form - приложение, разработанное компанией Awio. Оно  позволит вам легко добавить всплывающую контактную форму на ваш сайт или традиционную форму на странице вашего магазина. Кроме того, вы также можете настроить, какое поле вы хотите отображать в контактных формах, например имя, адрес электронной почты или номер телефона. Приложение оснащено встроенной защитой от спама. Improved Contact Form также предоставит вам полезную информацию о людях, которые заполнили и отправили вашу контактную форму, например, их местоположение, IP-адрес, какие страницы они просматривали до того, как связались с вами, и, самое главное, как они нашли ваш сайт. Эти детали помогут вам лучше понять ваших клиентов, и в результате вы сможете лучше удовлетворить их пожелания.

★★★★★

4. Contact Form by Powr

Contact Form by POWr предлагает множество опций настройки, поэтому вы можете выбрать фон, цвет и шрифт, которые вы хотите иметь в своей форме, и включает поддержку нескольких вариантов ввода, включая даты, текст, адреса электронной почты, выпадающие списки, и чекбоксы. Кроме того, это приложение может помочь вам в сборе контактной информации о ваших клиентах, которой вы возможно захотите воспользоваться позже. Также Contact Form by POWr может эффективно управлять всеми вашими контактами с личной панели управления POWr.

★★★★☆

5. Form Builder for Custom Forms

Form Builder for Custom Forms - это приложение, разработанное компанией AAAeCommerce Inc. Оно платное, однако есть двухдневная бесплатная пробная версия. Вам становятся доступны разнообразные пользовательские формы, такие как форма регистрации, форма обновления профиля клиента, форма заказа, форма обратной связи, форма для сбора пожертвований и другие. За несколько кликов мыши вы можете легко создать любую нужную вам форму с возможностью загрузки файлов, настраиваемыми полями, расширенной отчетностью о клиентах, интеграцией MailChimp / Klaviyo и возможностью принимать платежи в форме с помощью Stripe / PayPal.

★★★★☆

Как добавить приложение для контактной формы в Shopify-магазин?

  1. Зайдите в Shopify app store
  2. Выберите приложение из списка выше
  3. Кликните кнопку "Add App"

На этом все.

Если вы захотите изменить информацию в контактной форме Shopify, войдите в админ панель своего магазина, кликните  "Apps" в меню, затем нажмите на "Improved Contact Form". После, вы сможете изменить поля формы, настроить текст и цвета, добавить фоновые изображения и многое другое.

Выводы

Мы описали вам два возможных варианта добавления контактной формы в ваш Shopify магазин, но выбор остается за вами: вы можете создать ее самостоятельно или с помощью одного из многочисленных приложений в Shopify app store. Самое главное,  чтобы контактная форма присутствовала в вашем интернет-магазине, так как это один из главных типов обмена информацией с вашими клиентами и мощный маркетинговый инструмент для успешного ведения бизнеса. Заполните форму и наш Shopify консультант поможет вам определить способы повышения вашего профессионального роста.

Мы знаем как разрабатывать eCommerce проекты

Спасибо!
Ваша заявка отправлена