Как оформить страницу контакты на сайте


52 элемента для безупречного раздела «Контакты» на сайте :: Гудсайт

Напишите номер телефона

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

Дайте контакты разных подразделений

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

На сайте международного ресторанного холдинга «Ginza Project» выложены телефоны call-центра, PR-службы, HR-департамента и других отделов.

5

На сайте «Тинькофф Банка» помимо контактов отделов есть ещё и разные телефонные номера для различных категорий клиентов: владельцев кредитных карт, дебетовых карт и вкладчиков.

6

Контакты региональных подразделений не обязательно выкладывать сразу большим списком. Можно выводить их только по клику на название нужного представительства. Например, как в разделе контактной информации на сайте «Рефиниш Автолака».

7

У «Центра Международного Обмена» довольно много подразделений во всём мире. Представители компании объединены в рубрики по странам для удобного поиска их телефонов и адресов.

8

Фотографии вывесок офлайновых магазинов на сайте уличного бренда одежды «BatNorton» помогут клиентам сориентироваться в торговом центре и найти нужный отдел.

9

Контакты региональных представительств «Сайнер» появляются во всплывающих окошках. Такой приём позволит освободить страницу контактов от избытка информации. Пользователь сможет подробно ознакомиться с телефоном и адресом только нужного ему дилера.

10

На сайте бренда «Молочная культура» выложены координаты разных офисов. Интересна здесь вот какая деталь. Дополнительные контакты центрального офиса спрятаны в отдельном блоке. И появляются во всплывающем окошке при наведении мыши на слово «ещё».

11

У «Оконного континента» сорок семь представительств в Москве. Для удобства клиентов контакты выложены на сайте в трёх видах: одним списком, на карте города и на схеме метро. В последних двух вариантах контактная информация появляется во всплывающем окошке по клику на нужное представительство.

12

Напишите контакты сотрудников

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

На сайте российского бренда говядины «Праймбиф» есть имена, должности, телефоны и электронные ящики ключевых сотрудников.

13

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

В разделе с контактной информацией на сайте группы компаний «Тяжмаш» есть фотографии руководителей.

14

Покажите схему проезда

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

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

Однако учтите, что отрисовка карты проезда — дело трудозатратное. И скорее всего подойдёт фирмам, у которых немного офисов или точек продаж, одна-две.

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

На сайте «Мэри Трюфель» размещены рисованные схемы проезда к двум свадебным салонам.

15

На отрисованной схеме проезда к магазину подарков «Presentstar» видны мельчайшие детали: от кошки под деревом до инопланетян, крадущих жигули.

16

Контакты представительств «Центр международного обмена» выложены на сайте в виде списка. Если кликнуть на название представительства, то откроется карта проезда во всплывающем окошке.

17

В разделе с контактной информацией на сайте «ПСКБ Банка» схемы проезда к каждому офису изначально спрятаны. И появляются по нажатию на название офиса в раскрывающихся блоках.

18

На странице контактов фирменного интернет-магазина «Sony» во всплывающем окошке пользователь выбирает нужный город. И сразу после этого на странице выводятся соответствующие контактные данные, схема проезда и текстовое описание того, как добраться.

19

На сайте автомобильного фестиваля «Unlim 500+» переключаются три разные схемы — проезд к месту проведения мероприятия, карта автополигона и расположение кафе и сцены на смотровой площадке. Выбираешь нужную схему — меняется описание в левой части страницы и карта в правой части.

20

На сайте «Розовоза» контактная информация выложена в одном всплывающем окошке. И уже внутри окошка можно переключать два информационных блока: адреса цветочных складов и телефон службы доставки.

21

На сайте жилого комплекса «Панорама Сколково» есть возможность проложить маршрут из произвольной точки на карте до офиса продаж.

22

Задействуйте пространство во всплывающем окошке внутри карты

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

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

На сайте группы компаний «Тяжмаш» во всплывающих окошках указаны адреса, телефоны, электронные ящики и сайты подразделений.

23

Однако существуют и более интересные способы того, как использовать маленький кусочек свободного пространства внутри всплывающего окошка на карте!

На сайте ресторанного холдинга «Ginza Project» можно переключать четыре информационных блока внутри всплывающего окошка: адрес ресторана, телефон, время работы, ближайшая станция метро.

24

На сайте «Лето Банка» во всплывающем окошке на карте можно оценить работу отделения по 5-балльной шкале.

25

На сайте цветочной базы «Всё пучком» во всплывающем окошке помимо адреса, телефона и режима работы есть ещё и фотографии каждого склада.

26

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

27

Выложите фотографию входа в офис компании

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

На фото показано, что вход в офис компании «БТИ про» находится под вывеской «Экспобанка».

28

На странице с контактной информацией «Центра медицинской косметологии» есть фотография входной двери.

29

Напишите, как добраться в офис

Приведите несколько вариантов описания того, как люди могут попасть к вам: пешком, на автомобиле, на общественном транспорте. Представьте себя на месте человека, который вышел из последнего вагона метро на станции Калужская и впервые оказался на улице Профсоюзной. Куда ему дальше идти? По какой стороне улицы? Где и куда нужно свернуть? Расскажите об этом как можно подробнее.

Инструкции по ориентированию на местности можно выложить все сразу или спрятать в информационные блоки, раскрывающиеся по клику мыши.

На сайте магазина подарков «Presentstar» есть инструкции для любителей пеших прогулок и для автомобилистов.

30

В «Газпром» можно не только прийти пешком, но и приехать на троллейбусе или автомобиле. Описание прогулок и поездок до офиса выложено на странице с контактами.

31

На сайте «Рефиниш Автолака» описания того, как доехать в компанию на автомобиле или общественном транспорте, появляются по клику на соответствующий заголовок.

32

На странице с контактами клиники репродукции «МАМА» есть не только инструкция для пользователей троллейбусов и автомобилей, но и для иногородних гостей, едущих от вокзала или аэропорта. Блоки с разными текстами переключаются по нажатию на иконки с автомобилем, автобусом, поездом.

33

Уделите внимание текстам

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

«Рамблер» говорит, что есть много причин написать ему. А ведь на этом месте могла бы оказаться какая-нибудь серенькая фраза типа «Список электронных адресов».

34

Бренд вязаных шапок «Handy Hat» хочет быть ближе к своим клиентам. Заходите, говорит, к нам во Вконтактик.

35

На странице с контактами производителя декоративных пропиток «Veres» есть одна незатейливая фраза о том, что продукция представлена более, чем в 300 городах России. На этом месте мог быть стандартный заголовок «Наши представители». Но тогда никто не узнал бы, насколько широка география деятельности компании.

36

Разместите ссылку на контакты в других разделах сайта

«В чёрном-чёрном футере, в самом дальнем углу, среди десятка других ссылок спряталась единственная на сайте ссылка на страницу контактов. Чтобы точно никто не нашёл», — страшная сказка об одной компании, которая не желала слышать звонки и читать письма людей.

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

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

На каждой странице сайта цветочной базы «Всё пучком» хорошо заметна ссылка на адреса складов.

37

В новостях о мероприятиях в ресторанном холдинге «Ginza Project» есть ссылки на контакты соответствующего ресторана.

38

Ссылка на адреса отделений «Лето Банка» оформлена картинкой и стоит обособленно от прочих ссылок.

39

На всех страницах сайта «Центра Международного Обмена» слева есть плашка с контактами. Она привлекает внимание и ведёт на страницу представительства компании в том или ином городе.

40

Разместите форму обратной связи

Прямо на странице с контактами разместите форму обратной связи. Это ещё одна возможность поддержать связь с теми, кому интересна ваша компания.

Главное — никакой капчи. Не усложняйте жизнь ни в чём не виновным людям, не заставляйте рассматривать под лупой символы на картинке и вводить их в специальное поле. Если после неверного ввода капчи сотрётся набранное сообщение, то ваш потенциальный клиент закроет сайт уже через сколько секунд.

Форма обратной связи, стилизованная под чертёж, выдаёт творческую натуру специалистов Строительно-монтажного управления №3.

41

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

42

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

43

В форме обратно связи на сайте клиники репродукции «МАМА» пользователь может выбрать врача, которому собирается задать вопрос.

44

Дайте ссылки на социальные сети

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

Подготовьте версию для печати

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

48

49

Напомните о преимуществах компании

Скажите, почему с вами стоит иметь дело? Хватит нескольких предложений. Убедите клиентов в том, что они делают правильный выбор, собираясь позвонить вам и оформить заказ.

50

51

Продавайте

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

52

Как создать контактную форму в WordPress (шаг за шагом)

Вы хотите добавить контактную форму на свой сайт WordPress?

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

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

Зачем вам нужна контактная форма?

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

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

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

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

  • Защита от спама - Спам-боты регулярно очищают веб-сайты на предмет тега адреса mailto: email. Когда вы разместите свой адрес электронной почты на веб-сайте, вы начнете получать много спама. С другой стороны, используя контактную форму, вы можете избавиться почти от всех спам-писем.
  • Согласованная информация - При электронном письме люди не всегда отправляют вам всю необходимую информацию. С помощью контактной формы вы можете сообщить пользователю, какую именно информацию вы ищете (например, номер телефона, бюджет и т. Д.).
  • Экономит время - Контактные формы помогают сэкономить время гораздо больше, чем вы можете себе представить. Помимо согласованной информации, о которой мы упоминали выше, вы также можете использовать подтверждения формы, чтобы сообщить пользователю, каковы следующие шаги. Например, посмотрите видео или подождите до 24 часов, чтобы получить ответ, чтобы они не отправляли вам несколько запросов.

Ниже приведен пример контактной формы WordPress, которую мы создадим в этом руководстве.

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

Звучит хорошо? Итак, приступим.

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции, продолжайте читать.

Шаг 1. Выбор лучшего подключаемого модуля для контактной формы

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

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

Ниже приведены три причины, по которым мы считаем WPForms лучшим:

  1. Это самый удобный для новичков плагин контактной формы из доступных. Вы можете использовать конструктор перетаскивания, чтобы легко создать контактную форму всего за несколько щелчков мышью.
  2. WPForms Lite на 100% бесплатен, и вы можете использовать его для создания простой контактной формы (ее используют более 3 миллионов сайтов).
  3. Когда вы будете готовы к более мощным функциям, вы можете перейти на WPForms Pro.

Теперь, когда мы определились с плагином контактной формы, давайте продолжим и установим его на ваш сайт.

Шаг 2. Установите плагин контактной формы в WordPress

В этом руководстве по контактной форме мы будем использовать WPForms Lite, потому что он бесплатный и простой в использовании.

Вы можете установить этот плагин на свой сайт, войдя в свою панель управления WordPress и выбрав Плагины »Добавить новый .

В поле поиска введите WPForms и нажмите кнопку Установить сейчас .

После установки плагина обязательно активируйте его.

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

Шаг 3. Создайте контактную форму в WordPress

Теперь, когда вы активировали WPForms, вы готовы создать контактную форму в WordPress.

На панели управления WordPress щелкните меню WPForms и перейдите к Добавить новый.

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

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

Для этого примера мы продолжим и выберем Простая контактная форма . Он добавит поля имени, электронной почты и сообщения.

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

Если вы хотите добавить новое поле, просто выберите из доступных полей на левой боковой панели.

Когда вы закончите, нажмите кнопку Сохранить .

Шаг 4. Настройка формы уведомления и подтверждения

Теперь, когда вы создали форму WordPress, важно правильно настроить уведомление формы и подтверждение формы.

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

Уведомление о форме - это электронное письмо, которое вы получите после того, как кто-то отправит контактную форму на вашем сайте WordPress.

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

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

Самое лучшее в WPForms - это то, что настройки по умолчанию идеально подходят для начинающих.При переходе в настройки уведомлений все поля будут предварительно заполнены динамически.

Уведомления по умолчанию отправляются на адрес электронной почты администратора, который вы настроили на своем сайте.

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

Тема электронного письма предварительно заполнена вашим именем в форме. Поле от имени автоматически заполняется именем вашего пользователя.Когда вы ответите на запрос, он перейдет на адрес электронной почты, который ваш пользователь заполнил в контактной форме.

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

Шаг 5. Добавление контактной формы WordPress на страницу

Теперь, когда вы закончили настройку контактной формы WordPress, пора добавить ее на страницу.

Первое, что вам нужно сделать, это либо создать новую страницу в WordPress, либо отредактировать существующую страницу, на которую вы хотите добавить контактную форму.

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

Блок

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

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

Вот как будет выглядеть форма на примере страницы WordPress:

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

WPForms также поставляется с коротким кодом контактной формы WordPress. Вы можете скопировать шорткод контактной формы, посетив страницу WPForms »Все формы , а затем вставить его в любое сообщение или страницу WordPress.

Если вы хотите добавить контактную форму на боковую панель или в другую область готовности виджетов, перейдите к шагу 6.

Шаг 6. Добавление контактной формы WordPress на боковой панели

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

В админке WordPress перейдите в Внешний вид »Виджеты . Вы увидите виджет WPForms, который можно легко перетащить в любые области вашей темы, готовые к работе с виджетами.

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как создать контакт Раздел


Узнайте, как создать адаптивный раздел контактов для веб-страниц.


Связаться с отделом

Попробуй сам "

Создание раздела контактов

Шаг 1) Добавьте HTML:

Пример



Свяжитесь с нами


Зайдите за чашкой кофе или оставьте нам сообщение:






















Шаг 2) Добавьте CSS:

Пример

* {
размер коробки: рамка-рамка;
}

/ * Стиль ввода * /
input [type = text], select, textarea {
ширина: 100%;
отступ: 12 пикселей;
граница: сплошная 1px #ccc;
margin-top: 6 пикселей;
нижнее поле: 16 пикселей;
изменение размера: вертикальное;
}

ввод [type = submit] {
цвет фона: # 4CAF50;
цвет: белый;
отступ: 12 пикселей 20 пикселей;
граница: отсутствует;
курсор: указатель;
}

input [type = submit]: hover {
background-color: # 45a049;
}

/ * Стиль контейнера / контактной секции * /
.контейнер {
border-radius: 5px;
цвет фона: # f2f2f2;
отступ: 10 пикселей;
}

/ * Создаем два столбца, плавающих рядом друг с другом * /
.column {
float: left;
ширина: 50%;
margin-top: 6 пикселей;
отступ: 20 пикселей;
}

/ * Очистить числа с плавающей запятой после столбцов * /
.row: after {
content: "";
дисплей: таблица;
ясно: оба;
}

/ * Адаптивный макет - когда экран меньше 600 пикселей в ширину, сделайте два столбца стопкой друг на друга, а не рядом * /
@media screen и (max-width: 600 пикселей) {
.столбец, ввод [type = submit] {
ширина: 100%;
margin-top: 0;
}
}

Попробуй сам "

.

Добавьте страницу контактов в свой магазин · Справочный центр Shopify

Эта страница была напечатана 5 сентября 2020 г. Чтобы просмотреть текущую версию, посетите https://help.shopify.com/en/manual/online-store/os/using-themes/change-the-layout/add-contact- форма.

Примечание

Если вы используете бесплатную тему от Shopify, то вы можете обратиться в службу поддержки Shopify за помощью в этом руководстве. Чтобы узнать больше, см. Поддержка тем .

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

Создать контактную страницу

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

Подсказка

Чтобы увидеть больше видео, посетите наш канал YouTube.

Для создания страницы контактов:

  1. От администратора Shopify перейдите в интернет-магазин > Pages .
  1. В приложении Shopify нажмите Магазин .
  2. В разделе Каналы продаж коснитесь Интернет-магазин .
  3. Нажмите Страницы .
  1. В приложении Shopify нажмите Магазин .
  2. В разделе Каналы продаж коснитесь Интернет-магазин .
  3. Нажмите Страницы .
  1. Щелкните Добавить страницу .

  2. В поле Название введите заголовок для своей страницы контактов, например Свяжитесь с нами или Свяжитесь с нами .

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

    Некоторая информация, которую вы можете добавить в поле Content :

    • Короткий дружественный текст, например «Мы свяжемся с вами, как только сможем»
    • Адрес вашего магазина, если у вас есть розничная торговля
    • Ваш номер телефона, если вы хотите, чтобы клиенты могли связаться с вами по телефону
  4. В разделе «Шаблон » выберите страницу .свяжитесь с из раскрывающегося меню суффикса шаблона :

  5. Нажмите Сохранить .

Ваша контактная форма теперь должна быть видна на странице Contact .

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

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

Примечание

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

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

Фильтрация спама

Содержимое поля contact [body] вашей контактной формы анализируется спам-фильтрами Shopify. Если Shopify решит, что отправка является спамом, тогда к теме письма будет добавлен префикс [СПАМ] , но письмо все равно будет отправлено.Вы можете создать фильтр электронной почты, чтобы отложить электронные письма с темой, содержащей [СПАМ] .

Shopify отправляет все отправленные контактные формы, в том числе помеченные как спам, чтобы вы не пропустили ни одного законного сообщения, которое по ошибке было помечено как спам.

.

Как создать контактную форму с помощью CSS

/ * Стиль ввода с type = "text", элементы выбора и текстовые поля * /
input [type = text], select, textarea {
width: 100%; / * Полная ширина * /
отступ: 12 пикселей; / * Некоторые отступы * /
border: 1px solid #ccc; / * Серая рамка * /
радиус границы: 4 пикселя; / * Закругленные границы * /
box-sizing: border-box; / * Убедитесь, что отступ и ширина остаются на месте * /
маржа сверху: 6 пикселей; / * Добавляем верхнее поле * /
margin-bottom: 16px; / * Нижнее поле * /
resize: vertical / * Разрешить пользователю для изменения размера текстового поля по вертикали (а не по горизонтали) * /
}

/ * Стиль кнопки отправки с определенным цветом фона и т. д. * /
input [type = submit] {
background-color: # 4CAF50;
цвет: белый;
отступ: 12 пикселей 20 пикселей;
граница: отсутствует;
радиус границы: 4 пикселя;
курсор: указатель;
}

/ * При наведении курсора мыши на кнопку отправки, добавить более темно-зеленый цвет * /
input [type = submit]: hover {
цвет фона: # 45a049;
}

/ * Добавьте цвет фона и немного отступы вокруг формы * /
.контейнер {
border-radius: 5px;
цвет фона: # f2f2f2;
отступ: 20 пикселей;
}

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий