Добрый день друзья! В этом уроке я научу вас как создать контактную форму на WordPress с помощью плагинов. Форма обратной связи на WordPress служит идеальным решением для тех, кто хочет поддерживать контакт со своей аудиторией или получать заявки на адрес электронной почты на заказ каких-либо услуг. Мы научимся с вами делать всплывающую форму в модальном окне. После прочтения этой статьи вы сможете самостоятельно вставлять форму на свои сайты. Итак, поехали.
Зачем вам нужна контактная форма WordPress?Вы возможно будете удивлены вопросом почему мне нужна форма обратной связи на сайт вордпресс? Почему бы просто не добавить адрес электронной почты на сайт, чтоб люди просто мне написали?
Это наиболее распространенный вопрос от новичков, которые боятся добавлять код формы на сайт, без знания программирования. По правде сказать вам вообще не нужен код при создании формы обратной связи на WordPress. В этом руководстве мы шаг за шагом создадим контактную форму и сделать ее может даже самый абсолютный новичок.
Ниже приведу 3 главные причины, почему использование формы лучше, чем просто добавить адрес почты на сайт.
- – спам боты с завидной регулярностью выцепляют через свои парсеры адреса почты, где есть упоминание почтового домена и заносят его к себе в базу, чтобы потом слать вам нежелательную корреспонденцию. С другой стороны при использовании формы обратной связи для WordPress вы избавляетесь от проблемы засилия СПАМных писем на свой ящик.
- Полнота информации – при отправке почты люди не всегда посылают всю информацию, которая нужна вам. С помощью контактной формы вы сами определяете, какие поля вам нужны, чтобы облегчить пользователям возможность отправить вам письмо (имя, email, номер телефона, комментарий и многое другое).
- Экономия времени – форма обратной связи WordPress поможет вам сэкономить время. Помимо полноты информации, которую вы запросили у пользователя и которую он вам отправит, вы также можете указать, что ждет на следующем шаге, например «Ваша заявка будет рассмотрена в течение 24 часов» или Смотрите видео и много других полезностей.
Ниже приведен пример контактной формы, которую мы будем создавать в этом пособии.
Начнем-с, господа.
Шаг 1: Выбираем лучший плагин формы обратной связи для WordPressНа данном шаге нам необходимо определиться с выбором соответствующего плагина формы. Их существует великое множество как бесплатных, так и платных. В этом уроке я расскажу вам про разные плагины, чтобы у вас богатый был выбор. В первом случае будет задействован плагин WPForms.
Ниже приведены причины по которым WPForms является лучшим плагином обратной связи:
Отлично, если эти причины оказались достаточными и я вас убедил, тогда движемся вперед.
Шаг 2: Установка плагина контактной формы WordPressДля этого урока мы используем версию Lite, потому что это бесплатно и удобно в работе. Вы можете установить его войдя в блога и перейдя в Плагины – Добавить новый.
В строчке поиска набираем название нашего плагина и жмем Install now (Установить сейчас).
После установки плагина убедитесь, что вы его активировали. Это показано здесь:
Итак, после успешного завершения активации плагина, самое время создать нашу форму обратной связи. Для этого в панели администратора блога кликните на вкладку WPForms Menu и перейдите в Add New (Добавить новую).
Это позволит открыть вам конструктор Wpforms, где простым перетаскиванием нужных блоков вы можете создать контактную форму обратной связи WordPress. В бесплатной версии Lite доступны два предварительно встроенных шаблона (пустой и простая форма). Вы же можете использовать их вместе, чтобы составить нужную и удобную для вас. В этом примере для вас мы выбрали второй вариант, т.е простой контактной формы. В нее добавим имя, Email и текстовое поле.
Вы можете кликнуть на каждое поле, чтобы отредактировать его. Также с помощью мыши вы можете перетаскивать и менять порядок полей формы.
Если вы хотите добавить новое поле, просто выберите нужно из списка слева и перетащите в рабочую область.
Когда все сделано, просто нажмите кнопку Сохранить (Save).
Шаг 4: Настройка уведомлений и ПодтвержденийПосле того, как вы успешно создали форму обратной связи на WordPress, очень важно правильно настроить формы уведомлений и подтверждений.
Форма подтверждения это то, что видят ваши пользователи, когда отправляют вам заявку с формы. Это может быть сообщение благодарности или вы их можете перенаправить на другую специальную страницу.
Форма уведомления – это сообщения, которые получаете вы, когда к вам приходит новая заявка или email письмо с вашего WordPress сайта.
Вы можете настроить оба этих поля, перейдя в Настройки (Setting) внутри плагина конструктора фор WPForms.
Мы по умолчанию не ставили трогать и оставили как есть поле Формы Подтверждения с сообщением «Спасибо за ваше обращение». Однако, вы вправе поменять его на другой текст или перенаправить пользователя на отдельную страницу.
Лучшим в этом плагине является то, что настройки, которые идут по умолчанию, просто идеальны для новичков. Им не нужно додумывать, что сделать или что поменять. Все очень интуитивно понятно и просто. Когда вы переходите в настройку уведомлений, все поля будут предзаполнены динамически.
Уведомления по умолчанию отправляются на ту почту, которую в настройках указали вы. Если вы хотите изменить адресат для отправки уведомлений, то его также можно легко изменить. Если хотите указать несколько адресов почты (указываются через запятую), то пожалуйста, карты в руки, как говорится 🙂
Поле Тема email будет автоматически заполнено c вашим именем формы. Поле имя будет браться из имени пользователя (вашего имени). Когда вы будете отвечать на письмо, то оно будет идти на почту с именем пользователя, который заполнил контактную форму.
Шаг 5: Добавление контактной формы WordPress на страницуНа данном шаге, когда вы построили и настроили форму обратной связи, нужно создать для нее отдельную страницу «Контакты», куда вы сможете ее поместить. Либо вы создаете новую, либо редактируете уже существующую страницу, где вы можете ее добавить.
Мы будем использовать простой шорткод для вставки формы на страницу. Просто кликните на кнопку «Add form» и выберите название вашей формы, чтобы вставить ее на страницу.
Отлично. Теперь сохраняете и страницу и открываете предпросмотр, чтобы увидеть изменения.
Вот как примерно будет выглядеть форма на простой WordPress странице:
Если вы хотите просто добавить форму на страницу, то поздравляю вас. Все шаги сделано успешно. Если вы хотие добавить ее в виде виджета в сайдбар, то продолжение ниже.
Шаг 6: Добавление контактной формы WordPress в сайдбарПлагин WPForms поставляется с встроенным виджетом формы обратной связи, который вы можете добавить в сайдбар или любую другую область на сайте (например в подвал).
Для этого нам нужно перейти в раздел «Внешний Вид» (Appearance)-> Виджеты (Widgets). Там вы увидите предустановленный виджет плагина формы в левой части. Просто берем и обычным перетаскиванием задаем порядок отображения в нужной области в сайдбаре.
Следующим шагом указываете название виджета и сохраняете. Переходите на сайт и смотрите результат.
На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!
Его можно также сделать адаптивным, т.е форма обратной связи будет приспосабливаться к размерам экрана вашего устройства.
Так, на всякий случай, чтобы вы знали, что они естьJ
Как сделать контактную форму обратной связи с помощью Contact Form 7Продолжаем разбираться в вопросе создания форм для приема заявок с вашего сайта. Впереди у нас еще один плагин контактной формы вордпресс под названием Contact Form 7. Давайте его установим к себе на блог и активируем, как мы это умеем делать.
Она уже установлена на моем сайте, не на этом блоге. Процедура стандартная. Теперь нам нужно зайти в админку блога и создать новую форму, которая будет собирать нам заявки и другую полезную информацию. Переходим в раздел «Contact Form 7» -> Добавить новую.
Отлично! Теперь давайте дадим ей соответствующее название, в моем случае этих контактных форм очень много. Выберем одну, например «Форма заказа продвижения сайта»
Вкратце расскажу, что нам здесь будет нужно. В первую очередь, нам нужно определиться сколько полей форм мы хотим сделать. Сразу скажу, что 100500 полей делать не нужно и это бессмысленно, по той просто причине, что люди закроют ваш сайт и не оставят заявку. Им нужно упростить этот этап. Т.е если подумать, то нам от человека нужно что:
Это основные данные, другие вы можете уже выяснить в ходе переписки или телефонного разговора. Логично? Я думаю, что да. Движемся дальше.
Создание полей контактной формы в плагине Contact Form 7Так, с количеством полей определились, теперь нам нужно эти поля создать. Нам доступны следующие табы:
- Text (Любое текстовое поле, например «Имя», «Задать вопрос», или любое другое название, которые вы будете собирать через это поле)
- Email (тут предназначение одно, чтобы пользователь ввел )
- URL (в это поле будет вводиться адрес сайта, другие значения не приемлемы, будет выдаваться ошибка)
- Tel (поле с телефонным номером для нашей формы обратной связи на WordPress, допустимы числовые значения, текст даст ошибку)
- Number (Числовой диапазон значений, можно применить, например, к цене: «сколько вы готовы заплатить за сайт? От 23000 до 120000 рублей»)
- Date (Указываем дату, с какого по какое число. Пример: «Бронирование автомобиля с 13/04/2016 по 25/04/2016»)
- Text Area (Текстовая область, сюда можно вводить текст в качестве комментария)
- Drop-Down Menu (Выпадающий список). Реализовано на моем блоге, можете посмотреть. В конце каждой статьи я предлагаю пользователям создание или простого сайта, или интернет магазина. Именно такой функционал обеспечивает данная опция.
- Checkboxes (множественный выбор, например: Сайт + Создание логотипа + продвижение + контекстная реклама)
- Radio buttons (Выбор какого-то одного пункта, например: «Вы заказываете или контекстную рекламу или таргетированную»)
- Acceptance (Принимаете условия соглашения, т.е пользовательская информация, типо публичной оферты)
- Quiz (Викторина – серия коротких вопросов, тоже можно вставить в контактную форму).
- reCaptcha (Подтверждение, что вы не робот и не будете спамить.) Хорошая защита от СПАМА. Примечание: данная опция работает, если вы подключили плагин Really Simple Captcha.
- File (Если вы хотите дать возможность пользователям загрузить вам файл, например: «Прикрепите ТЗ на разработоку сайта»).
- Submit (Отправить данные на почту)
Итак, с полями мы определились, значение каждого вы тоже знаете. Давайте приступим к сборке нашей контактной формы на WordPress.
В примере ниже я использовал 2 поля: Имя, Email. Соответственно вам потребуются эти вкладки:
Нажав на текстовую вкладку (Text) мы попадаем в диалоговое окно:
Здесь нам нужно нажать на галочку Тип Поля – Обязательное. Сделано для того, что если пользователь не введет в него имя, то заявку он вам прислать не сможет, будет ошибка отправки, что не все поля заполнены корректно.
Затем вы увидите шорткод для вставки этого поля и рядом с ним синяя кнопка «Вставить тэг». Таким образом вы добавите одно новое поле контактной формы.
Чтобы вы не запутались я выделил его стилем. Код ниже:
Full Name
< div class = "col-md-4" > < label class = "sr-only" > Full Name < / label > [ text* text - 658 class : form - control placeholder "Ваше имя" ] < / div > |
А вот скрин:
Аналогичную операцию проделываем для поле «Email». Кликаем на соответствующую вкладку и попадаем вот в такое диалоговое окошко.
Абсолютно ничем не отличается от предыдущего, просто повторяем наши с вами действия. У меня поле емэйла также имеет стиль. Привожу ниже код:
Full Email
< div class = "col-md-4" > < label class = "sr-only" > Full Email < / label > [ email* email - 447 class : form - control placeholder "Ваш Email" ] < / div > |
А вот скрин:
И, наконец, кнопка «Submit» (Отправить данные). Она у меня вся в стилях.
< div class = "col-md-4" > [ submit class : btn - flat class : col - xs - 12 "Заказать" ] < / div > < / div > |
Важное примечание: Дорогие друзья, в этом примере я использую адаптивные стили для создания контактной формы на WordPress, т. е она может принимать формы любого размера экрана.
Кнопку вы увидите в правом верхнем углу. Уж точно не промахнетесь. 🙂
Часть работ мы сделали, теперь переходим к следующему этапу.
Настройка почтового адреса для приема заявокНа этом шаге нам нужно сделать некоторые настройки, чтобы письма уходили именно нам на наш почтовый ящик. Как этого достичь я расскажу ниже.
Нам необходимо нажать на большую вкладку «Письмо». Она будет второй после Шаблона формы.
Первое, что увидите, это ваши теги, которые вы добавили, их нам необходим вставить в тело письма, именно они будут подставлять данные, которые вводит пользователь с формы. Думаю, что объяснил доходчиво.
Теперь по полям:
- To (Куда будет отправляться заявка, в моем случае, это мой адрес почты, можно указывать несколько адресов, куда присылать заявки)
- From (Поле Откуда, т.е будет подставляться значение, что заявка идет с моего студийного сайта)
- Тема (Служит для определения, с какой формы приходит заявка, в нашем случае это заявка с формы продвижения сайта).
- Additional Headers (Дополнительные заголовки, их не трогаем, они нужны для корректности отправки формы)
- Message Body (Тело сообщения, здесь вы указываете, От кого пришло письмо и с какого адреса, например: «От: Ивана» «Адрес почты: vasya @ mail . ru »)
- File Attachments (Приложения к файлу, не трогаю)
Теперь нам необходимо настроить уведомления об успешной или неуспешной отправки письма с контактной формы WordPress.
Это будут сообщения, которые будут показываться пользователю в ответ на его действия с формой. По умолчанию они идут на английском языке. Я сделал перевод на русских самых необходимых для вас. Их будет более, чем достаточно, а если нет, то переводчик Гугла вам в помощь. Итак, приступим.
- При успешной отправки сообщения: «Ваше сообщение было отправлено успешно. Спасибо.»
- При некорректной отправке сообщения с формы: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
- Ошибка заполнения: «Ошибки заполнения. Пожалуйста, проверьте все поля и отправьте снова.»
- Отправленные данные определены как спам: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
- Некоторые условия должны быть приняты: «Пожалуйста, примите условия для продолжения.»
- Некоторые поля должны быть заполнены: «Пожалуйста, заполните обязательное поле.»
- Превышена длина символов в поле: «Указано слишком много данных.»
- Недостаточная длина символов в поле: «Указано слишком мало данных.»
- Неверный формат даты: «Формат даты некорректен.»
- Ранняя дата в минимальном пределе: «Указана слишком ранняя дата.»
- Поздняя дата в максимальном пределе: «Указана слишком поздняя дата.»
- Неудачная загрузка файла: «Не удалось загрузить файл.»
- Неразрешенный тип файлов: «Этот тип файла не разрешен.»
- Загрузка слишком большого файла: «Этот файл слишком большой.»
- Загрузка файла не удалась из-за ошибки PHP: «Отправка файла не удалась. Возникла ошибка.»
- Числовой формат, введенный отправителем, неверен: «Числовой формат некорректен.»
- Число меньше минимального предела: «Это число слишком мало.»
- Число больше максимального предела: «Это число слишком велико.»
- Отправитель не ввел корректный ответ на вопрос: «Вы ввели некорректный ответ.»
- Адрес e-mail, введенный отправителем, неверен: «Некорректный e-mail.»
- URL, введенный отправителем, неверен: «Некорректный URL.»
- Номер телефона, введенный отправителем, неверен: «Некорректный номер телефона.»
Очень хорошо. С настройкой формы мы закончили, теперь необходимо вставить ее на сайт. Для этого по уже известной технологии, зайдем на уже существующую страницу или создадим новую. В своем примере я покажу вам пример существующей формы на странице сайта WordPress.
Так как наша форма собирает заявки на продвижение сайта, то зайдем на аналогичную страницу.
Чтобы вставить нашу контактную форму, нам нужно скопировать, присвоенный ей плагином, шорткод. Он доступен под названием вашей формы.
Копируем и вставляем в нашу страницу, предварительно перейдя в текстовый редактор (не визуальный). Представлено на скриншоте ниже:
Сохраним нашу страницу и посмотрим, что получилось в итоге в браузере:
Супер! Теперь давайте попробуем отправить форму ничего в нее не заполнив. И вот, что мы увидим.
Произошла ошибка отправки с формы, поскольку пользователь не указал нужные данные в полях. Теперь давайте введем корректные данные и посмотрим, что у нас получится в этом случае.
Нажимаем отправить и вот, что пишет наша форма:
Теперь посмотрим, как выглядит наша заявка. Они приходят у меня на мэйловскую почту. Проверим доставку:
Зайдем внутрь, чтобы убедиться в корректности кодировки и всех данных.
Все просто отлично. Форма работает исправно и отправляет данные. Теперь мы можем собирать заявки, которые будут приходить вам когда вы займетесь , если мы говорим про региональное продвижение.
Итак, мы рассказали как сделать контактную форму на WordPress на странице сайта. Сейчас я расскажу как сделать всплывающую адаптивную форму обратной связи с помощью нашего плагина Contact form 7.
Делаем всплывающую адаптивную контактную форму обратной связи на WordPressДля того, чтобы наша форма стала адаптивной, т.е «резиновой», нам необходимо подключить еще один плагин, а точнее его дополнение к Contact Form 7 – называется он Bootstrap Contact Form 7. Устанавливаем и просто активируем и все – он работает. С ним никаких настроек делать не нужно. Установили и забыли.
На следующем шаге я расскажу, какие изменения нужно внести, чтобы наша форма стала всплывающей и адаптивной. Подобную реализацию я сделал на главной странице своего студийного сайта. Для этого перейдем в шаблон index.php, который находится в разделе «Внешний Вид — Редактор». Мы будем работать только с кодом, вручную.
Наша всплывающая форма будет отображаться в модальном диалоговом окне примерно так:
Чтобы достичь этого результата вам понадобится следующий код, я представлю его полностью в сниппете:
Заказать ×Close Оставить заявку
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > Заказать< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > & times ; < / span > < span class = "sr-only" > Close < / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" > Оставитьзаявку< / h4 > < / div > |
Приветствую вас дорогой читатель, в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте WordPress. Часто при разработке собственного сайта или блога необходимо установить возможность оперативной связи с посетителями интернет-ресурса. В этом случае как раз и пригодится всплывающая форма обратной связи для wordpress, которая поможет наладить быстрый контакт с пользователями.
Для чего нужна всплывающая форма обратной связи для wordpress Причины использованияРассмотрим, для чего нужна такая форма
Дополнительный бонус: форму легко видоизменить и настроить под нужды вашего сайта. Всплывающая форма обратной связи для wordpress может быть представлена в виде открывающегося окна для заказа звонка, услуги или товара, оформления подписки. При желании можно добавить визуальные эффекты, различные изображения и пр.
Плагины для установки всплывающей формыРассмотрим инструменты, необходимые для разработки всплывающих окон в wordpress – специального приложения для разработки и создания сайтов.
Contact Form 7Данный плагин используется непосредственно для конструирования формы. Для его установки выполните следующие действия:
Easy FancyBox
Данный плагин пригоден для разработки эффекта всплывающего окна. Последовательность установки Easy FancyBox аналогична установке предыдущего плагина.
Настроить параметры дополнения Easy FancyBox можно через медиафайлы. Воспользуйтесь опциями меню «Настройки» -> «Медиафайлы».
В открывшемся блоке чуть ниже стандартных настроек будут расположены параметры самого плагина. Здесь обычно стоит галочка напротив пункта «Images», которая указывает на активирование выплывающего окна при клике по изображению. Желательно ее снять, так как при наличии других дополнительных инструментов создания всплывающей анимации будет происходить двойное открытие изображений.
Но это еще не все. Поставьте галочку напротив пункта «Inline content»
Все желающие могут дополнительно покопаться в настройках плагина и выставить их на свое усмотрение.
Совет: если вы хотите, чтобы форма всегда была открыта, тогда снимите в настройках Easy FancyBox галочку напротив опции «Close FancyBox when overlay is clicked», выполняющей функцию закрытия окна при клике мышкой за его пределами.
Пошаговая инструкцияНу вот, со «скучной» предварительной подготовкой покончено, теперь перейдем к самой «вкусной» части – как, собственно, разрабатывается всплывающая форма обратной связи wordpress.
Обработка окна формыС чего начнем? Конечно же, с предварительной настройки самой формы. Выберите в правом меню пункт «Contact Form 7», а потом опцию «Добавить новую».
Придумайте новое имя формы, например, «Эксперимент», вбейте его в поле ввода открывшегося окна, где расположен текст «Заголовок», и нажмите на кнопку «Сохранить». Можно изменять и другие параметры, в том числе и сам шаблон формы, но мы его трогать не будем. Сейчас наша главная цель – просто научиться созданию всплывающих форм.
Взгляните на полученный результат. Как можно видеть, плагином был сгенерирован специальный шорткод, используемый для последующего вывода формы. Необходимо скопировать его.
Теперь займемся программированием. Новый программный код можно вставить в любом месте сайта, например, в «Контакты», и других. В нашем примере новая форма будет выведена в виджете. Выберите в меню последовательно «Внешний вид», потом кликните на «Виджеты», затем в открывшемся окне нажмите на опцию «Текст».
Теперь щелкните по кнопке «Добавить виджет»
Вставьте в поле ввода «Содержимое» следующий программный код:
Написать письмо Начальный текст Завершающий текст
Вот так будет выглядеть получившийся результат:
Учитывайте, что вместо указанного в примере шорткода вам надо будет указать тот, который образовался у вас в результате создания новой формы.
Дополнительно форму можно отредактировать: добавить или убрать поля ввода, ввести начальный и/или конечный текст до и после формы, преобразовать текст в заголовок или вывести его отдельным блоком, использовать различные стили, плэйсхолдеры и т.д. Были бы время и желание!
Стилизация ссылкиРассмотрим также два способа преобразования ссылки в кнопку для улучшения ее визуального отображения.
1 способ – использование дополнительных стилей темы.
Приведенный ниже программный код можно вставить следующим образом:
Сам программный код выглядит так:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } |
/***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }
Получилась такая кнопка:
В коде уже написано, какой его параметр за что отвечает. Теперь каждый может отредактировать код на свое усмотрение, экспериментируя с различными стилями и цветами и создавая наиболее подходящую ссылку для всплывающего окна.
2 способ – использование изображения в виде кнопки. Сначала загрузите на сайт необходимую картинку (любую по вкусу, не обязательно в виде кнопки, — это не имеет особого значения). Для этого щелкните на «Медиафайлы» -> «Добавить новый» и выберите нужный рисунок. Справа от изображения появится постоянная ссылка на файл (в данном примере http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), скопируйте ее и добавьте в код (кавычки не удалять):
Полученный код добавьте в основной код вывода формы вместо текста «Написать письмо».
| 1 | 
|
На моем сайте отобразилась кнопка, приведенная на скриншоте ниже:
А вот так будет выглядеть кнопка, если оставить дополнительный стиль, описанный в первом способе:
Чтобы всплывающая форма обратной связи для wordpress могла вызываться прямиком из меню, необходимо воспользоваться следующим кодом
| 1 2 3 | |
Сначала нужно разобраться, куда именно необходимо вставить этот код. Зайдите в «Редактор» через «Внешний вид» и среди шаблонов выберите «Заголовок (header.php)»
Теперь отыщите то место, где расположен код меню. Найдите следующую информацию:
| 1 2 |
- «Скопируйте этот код и вставьте его в шаблон формы слева» – этот код вставляется в код формы аналогично со всеми остальными;
- «И вставьте следующий код в шаблон письма ниже» – этот код понадобится нам для оформления письма в следующем блоке.
- Поставить обязательную капчу (это можно сделать дополнительным плагином – Really Simple CAPTCHA).
- Воспользоваться антиспамерским плагином для wordpress – Akismet.
- в поле с именем автора дописываем akismet:author
- в поле с email отправителя письма akismet:author_email
- в поле для адреса сайта akismet:author_url
- Меняется ссылка, параметру href присваиваете значение #contact_form_pop_2
- Изменяете идентификатор id на то же значение #contact_form_pop_2
Ниже вставьте ваш код как раз перед закрывающим тегом.
В целом, в добавлении контактной формы на свой сайт нет ничего сложного, главное – иметь в наличии немного свободного времени и желания досконально изучить все аспекты. Теперь вы знаете, что представляет из себя контактная форма, для чего она нужна, как ее использовать на сайте, и как обрабатывать ссылку для вызова окна с всплывающим эффектом. Удачи вам и успехов в этом нелегком, но увлекательном деле сайтостроения.
Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.
Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.
Некоторые утверждают, что это из-за того, что у людей потихоньку «вырабатывается иммунитет» и открытая форма — это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то «впарить». Не совсем согласен с этой теорией, но зерно истины — присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.
Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться:)
Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.
Кнопка, по нажатию на которую будет открываться модальное окно:
Оставить заявку
Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.
Теперь приведу код формы и блока, на котором будет располагаться форма:
Оставьте ваши контактные данные и наш консультант свяжется
с вами
Хочу такую форму на свой сайт
Добавив стили, выглядеть это стало так:
Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.
Между тегами head подключаем стили:
А перед закрывающимся тегом body — добавляем скрипты:
Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:
$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); $.ajax({ type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) { // Вывод текста результата отправки $(formNm).html(data); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $(formNm).html(error); } }); return false; }); });
Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):
Пожалуйста , не забывайте менять адреса электронной почты на свои.
Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!
Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период. В противном случае, в 90% случаев форма работать не будет.
Не ждите письма у себя в почтовом ящике, если вы просто открыли индексный файл в браузере и нажали кнопку «Отправить». Php — это серверный язык!
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
Обновленная версия статьи находится
Приветствую вас, друзья. Сегодняшний урок поможет вашему wordpress сайту обзавестись симпатичной и функциональной формой обратной связи. Сделаем мы ее с помощью плагина Contact Form 7. В свое время я потратил немало времени на поиски нормальной контактной формы и достойной альтернативы данному плагину так и не нашел.
Возможности плагинаЕще раз напомню, что мы будем работать с плагином, поэтому, если вам нужна обратная связь без плагина, вам лучше посетить статью про , там настройка чуть посложнее, но, зато, вариант более универсальный (подойдет каждому сайту) и меньше нагружает сервера.
Главное достоинство контактной формы на Contact Form 7 в простоте ее настройки, почти неограниченной функциональности и автоматической подстройке дизайна под любые шаблоны WordPress . С ее помощью можно сделать не только форму для отправки сообщений с сайта. Плагин можно использовать для создания кнопки заказа, обратного звонка или сложной анкеты с чекбоксами и выпадающими списками. Также, есть возможность прикреплять для передачи файлы.
Одним словом, плагин мегафункциональный.
Если вас до сих пор волнует вопрос «делать или не делать форму связи?» (можно обойтись простым размещением контактных данных на нужных страницах), то я скажу однозначно – делать стоит.
Во-первых, отправлять сообщение прямо с сайта удобнее, чем открывать почтовую программу и там заполнять все вручную. Экономия времени никому не помешает.
Во-вторых, контактную форму можно настроить и это позволит вам получать письма стандартного образца – в них будет проще ориентироваться. Например, вы можете поставить стандартный заголовок для сообщения «Заказ» и все письма со страницы заказов будут приходить с таким заголовком.
В-третьих, использование контактной формы позволяет скрыть ваш адрес электронной почты и, тем самым, избавиться от возможного спама, который неизбежно появляется при попадании электронного ящика в свободный доступ.
В-четвертых, это просто стильно и современно.
Установка и настройка плагина Contact form 7Плагин есть в общей базе wordpress, поэтому нет необходимости искать где-то его файлы, скачивать их себе и потом закидывать на хостинг. Все делается проще – через админку wordpress входите в раздел плагины, набираете в поле для поиска «Contact form 7» и устанавливаете его. Если вы никогда плагины не ставили, то подробная инструкция как установить плагин .
Настройка плагина состоит из двух этапов.
Первый – это настройка конкретной формы. Разных форм может быть много, каждая из них может содержать свой набор полей. Одним словом, под каждую задачу и каждую страницу на сайте вы можете отдельно создать форму обратной связи, wordpress это позволяет – их список будет храниться в базе плагина.
Второй этап – это вставка формы на страницы сайта. Каждая форма, созданная нами внутри плагина, будет иметь собственный уникальный шорткод. Для вставки на страницу достаточно будет вставить только его.
Итак, поехали.
Для начала в левом меню панели администратора находим вкладку Contact form 7. Под ней всплывет меню с двумя пунктами – «Формы» и «Добавить новую».
Пока у нас нет готовых форм, поэтому, переходим в раздел «Добавить новую». Там откроется страница, предлагающая выбрать язык, и там же указан язык по умолчанию. Просто нажимаем синюю кнопку «Добавить новую».
Настройка формы разделена на отдельные блоки. Рассматривать их я буду по порядку.
Блок «Название формы»Первый блок отвечает за название вашей формы – поставьте курсор на надпись «Без названия» и введите нужное вам имя. Это название будет отображаться только вам в списке контактных форм плагина, так что делайте его понятным для вас, чтобы в будущем не запутаться во всем многообразии.
Изначально в этом блоке задана стандартная конфигурация полей. Она содержит имя отправителя письма, его электронный адрес, тему письма, содержимое письма и кнопку отправить.
Звездочками помечены поля обязательные для заполнения. Если такое поле оставить пустым, то сообщение не будет отправляться.
Расположение полей можно настраивать с помощью обычной html разметки.
Что касается настройки самих полей, то вы можете удалить ненужные и добавить те, которые вам потребуются. Если вы не хотите, чтобы тему письма вносили вручную – просто удалите соответствующий блок.
Добавляются поля тоже очень просто. С правой стороны есть кнопка сгенерировать тег, нажав на нее, вы увидите список всех возможных полей, которые поддерживает этот плагин.
Выберите нужный элемент и настройте его параметры. Плагин на русском, поэтому все настройки интуитивно понятны.
Первый чекбокс указывает на обязательность или необязательность поля (он добавляет звездочку).
После настройки поля у вас появятся 2 шорткода:
Таким образом вы можете добавить в форму любое количество полей, чекбоксов, выпадающих списков, элементов для прикрепления файлов и т.д.
Блок «Письмо»Теперь наша задача настроить письмо, которое мы будем получать. Письмо никак не влияет на работоспособность формы обратной связи, оно служит только для передачи той информации, которую ввели в форме.
Наша задача включить в письмо всю информацию.
Первым пунктом мы указываем электронный адрес, на который будет отправляться сообщение (он может быть любым).
Вторым пунктом указывается электронный ящик, с которого письмо будет отправлено вам. Я бы ничего тут не менял, по умолчанию указан почтовый ящик вашего блога и к нему добавлен тег с именем человека, отправляющего сообщение.
Дальше мы указываем тему письма. Стандартно, тема берется из поля , которое заполняется в форме. Но можно из формы этот элемент удалить, а в поле вписать конкретную тему, задаваемую в каждом письме автоматически. Я так сделал для форм обратной связи со страниц об услугах и рекламе. Сообщения оттуда всегда приходят с одной и той же темой «Заказ услуг» или «Заказ рекламы» – просто и понятно.
Поле дополнительных заголовков содержит тег «Reply-To: » для того, чтобы при ответе на письмо, полученное с вашего блога вы отсылали сообщение на на блог, а на тот адрес, который указывал отправитель письма в поле формы . Менять это поле не стоит.
Поле «Шаблон письма» отвечает за внутреннее содержание полученного вами сообщения. По умолчанию оно содержит информацию об отправителе, теме и текст сообщения, введенный в поле .
В конце указывается сайт, с которого отправлено письмо.
Если вы вносили в форму какие-то дополнительные поля, не установленные по умолчанию, то в шаблоне письма не забудьте добавить соответствующий тег. Он был вам дан в блоке «Шаблон формы», там, где вы генерировали соответствующий тег (поле «И вставьте следующий код в шаблон письма ниже»).
Любую текстовую информацию этого блока (кроме тегов) можно менять по своему вкусу. Также вы можете добавить любые описания и менять теги местами, расставляя их в том порядке, который вам удобен.
Блок «Письмо 2»Если вы хотите, чтобы отправленное вам сообщение получал кто-то еще, то можно поставить галочку в этом блоке.
Настраивается этот блок аналогично предыдущему. По умолчанию все поля в нем заполнены для того, чтобы письмо ушло тому человеку, который заполнял форму (видимо, чтобы он не забыл).
Вы можете настроить отправку копии, например, своему менеджеру или бухгалтеру.
Блок «Уведомления при отправке формы»В этом блоке можно настроить сообщения, которые видит пользователь, после того, как он нажмет кнопку отправить сообщение. Хотите что-либо поменять – пожалуйста, я оставил все как есть.
Активация формыПосле того, как вы заполнили все поля, вернитесь в начало к блоку «Название формы» и нажмите кнопку «сохранить», расположенную справа.
Плагин поместит созданную вами форму в список действующих и присвоит ей специальный код примерно такого вида:
[ contact - form - 7 id = "5464" title = "Проверка" ] |
Вставив этот код в любое место на вашем сайте, вы получите готовую форму для общения с вашими потенциальными клиентами.
Борьба со спамом – Akismet и CaptchaСпамеры доставляют немало хлопот владельцам сайтов, а каждая новая форма, позволяющая что-то писать, только добавляет количество спам ботов.
Если вы оставите плагин контактной формы в базовом варианта, то, спустя некоторое время, будете атакованы множеством пустых и бессмысленных сообщений.
Избавиться от спамеров можно двумя способами:
Первый вариант неудобен тем, что заставляет посетителей вручную вводить дополнительные символы. Это не так сложно, но некоторым не нравится.
Использование плагина Akismet удобнее тем, что он самостоятельно анализирует вводимые данные (имена, email адреса, ссылки) и на основании наработанной базы делает выводы о спамности или неспамности сообщения.
Кроме того, akismet стоит на большинстве wordpress сайтов для защиты от спама в комментариях к статьям. Значит, при его использовании не потребуется устанавливать дополнительные плагины и создавать лишнюю нагрузку на сайт.
Защита от спама с помощью Akismet1. Устанавливаем плагин Akismet на ваш сайт и активируем его – .
2. Добавляем в теги контактной формы дополнительные данные:
Должно получиться вот так:
После сохранения, контактная форма должна блокировать все сообщения, отправляемые спамерами. Проверить работу фильтра можно с помощью специального тестового имени “viagra-test-123? – при его вводе должно появляться сообщение об ошибке.
Чтобы проверка была менее жесткая, вы можете проверять лишь часть полей, например имя и электронную почту, а адрес сайта оставить без проверки. В этом случае вероятность прохождения спамных сообщений увеличится, но вы с меньшей вероятностью потеряете нужные сообщения.
Защита от спама с помощью Really Simple CAPTCHAЕсли вы обнаружите, что Akismet вас не устраивает (пропускает много спама или блокирует нужные сообщения), то вы можете подключить капчу. Для этого установите плагин Really Simple CAPTCHA.
Открываем для редактирования нужную контактную форму
В списке тегов выбираем Captcha. В настройках тегов можно выбрать размер картинки с символами, в остальном ничего менять не стоит. В нижней части настроечного окна появятся 2 тега, один отвечает за вывод картинки, второй выводит поле для ввода данных с этой картинки.
Чтобы капча начала работать, необходимо скопировать и вставить оба этих тега в левое окно шаблона формы, после чего сохранить изменения.
Размещение формы обратной связи во всплывающем окнеНе всегда контактная форма должна располагаться в каком-то определенном разделе сайте, порой, клиент должен иметь возможность получить к ней доступ с каждой страницы ресурса.
В таких случаях размещать полноценную форму не всегда удобно. Гораздо проще поместить на видное место кнопку, привлекающую внимание. Нажатие этой кнопку уже должно вести к открытию формы.
Таким образом, человек сможет отправлять сообщения с сайта, не покидая нужной ему страницы.
Делается это с помощью еще одного плагина – Easy FancyBox.
1. Установка плагина
Первым делом устанавливаем сам плагин, он есть в общей базе плагинов, поэтому, достаточно в админке вашего блога в поиске плагинов ввести его название. После установки плагина в разделе «настройки» появится вкладка «медиафайлы».
В этой вкладке нужно найти перечень типов контента, который должен отображаться во всплывающем окне. По умолчанию стоит только Images, нужно добавить Inline content.
На этом настройка плагина закончена, переходим к настройке кнопки обратной связи.
2. Вставляем код на сайтВ принципе, можно использовать обычную текстовую ссылку, но кнопка-картинка будет выглядеть лучше.
На вашем сайте, там где вы хотите вывести кнопку для формы связи (в шапке, подвале или сайдбаре) вставьте следующий код:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "контактная форма" alt = " контактная форма " src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "id вашей формы" title = "название вашей формы" ] < / div > < / div > |
В коде вам необходимо указать адрес картинки, которую вы используете в качестве кнопки обратной связи, и отредактировать шорткод самой формы – прописать ваш id и title.
3. Снимаем ограничение на шорткоды в сайдбареЭтот пункт необходим, если вы хотите установить кнопку в сайдбаре. Не всегда сайдбар в вордпрессе позволяет выполнять шорткоды.
Чтобы эту функцию разрешить, требуется открыть для редактирования файл function.php (прямо из админки wordpress) и вставить перед закрывающей скобкой «?>» следующий код:
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
Он даст возможность выполнять все шорткоды в сайдбаре.
У меня получилась вот такая симпатичная всплывающая форма:
Иногда возникает необходимость разместить на сайте несколько форм с разными настройками и полями.
Например, одна кнопка у вас ведет на форму с именем и телефоном и служит для заказа обратного звонка с сайта, а вторая должна открывать другую форм где идет подробная заявка на заказ (с адресом, полем для описания, возможностью прикрепить файл и т.д.). В самом плагине Contact Form 7 вы можете сделать бесконечное количество вариантов форм, но как их впихнуть в разные кнопки одной страницы?
Для этого необходимо корректировать код кнопки из предыдущего пункта. Первая кнопка использует представленный выше вариант. Во второй меняются два значения:
Существует множество плагинов для WordPress для создания форм обратной связи на вашем блоге или сайте. самый примечательный из них, он позволяет встраивать контактную форму прямо в записи и страницы WordPress (в то время как многие плагины заставляют применять пользовательский шаблон к странице, тем самым ограничивая ее редактирование).
Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox
1. Первым делом устанавливаем плагины и Easy FancyBox .
2. Для простоты мы будем использовать форму Contact Form 7, уже созданную самим плагином при установке для примера. На странице настроек Contact Form берем код формы, который нужно скопировать и вставить в редактор WordPress для создания формы.
3. Создаем новую страницу в WordPress. Для того, чтобы добавить контактную форму вам нужно вставить код, находящийся в квадратных скобках со страницы настроек Contact Form 7, на вашу страницу. Убедитесь, что вставили код корректно, ровно также как его отображает плагин.
4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:
Contact Us
5. Все, теперь у нас есть ссылка, которая «запускает» форму контактов во всплывающем окне. Поздравляем! Вероятно вам придется подправить CSS емейл-формы для корректного отображения ширины и высоты, а также сообщений о возможных ошибках при заполнении. Для начала этого должно быть достаточно.
