Вверх

Автозаполнение полей в Contact Form 7 через GET запрос

avtozapolnenie-polej-v-contact-form-7-cherez-get-zapros

Недавно мне пришлось помучаться с реализацией автоматического заполнения полей в  Contact Form 7 через GET запрос(то есть ключ находится в URL). Для данной проблемы уже якобы есть плагин, способный решить эту задачу, но я не разобрался как он работает и решил делать другим способом.

Для большего понимания немного опишу суть задачи, которую предстояло решить. На сайте находился каталог товаров, в карточке(на странице) товара находилась кнопочка «Заказать», при нажатии на нее мы переходим к странице обратной связи(форма от плагина Contact Form 7) и там автоматически заполнялось поле «Тема» кодом товара(темой), с которого перешли.

Как создать GET запрос?

Думаю для начала стоит объяснить как сделать корректный GET запрос. К примеру мы имеем такие данные:

  • http://ixmaster.net/contacts — адрес страницы, на которой находится контактная форма
  • them — мнимое поле имя поля, которое нужно заполнить(подробнее можно прочитать тут)
  • Пластиковое окно с Европы — заголовок страницы, с которой будем переходить на форму контактов

Вот так будет выглядеть URL c GET запросом для перехода на страницу контактов:

Что бы у нас все работало на автомате, вставьте следующий код в шаблон страницы, с которой будет происходить перехода к форме контактов:

Не забудьте изменить мой адрес к контактной форме на свой!

Обработка GET запроса

Обрабатывается этот запрос(уже на странице контактов) с помощью такого кода:

Как Вы догадались, выше приведенный код выведет нам на странице текст»Пластиковое окно с Европы»

Автоматическое заполнение формы

В этом нам поможет следующий скрипт:

Здесь есть следующие параметры:

  • forms — номер формы, которую брать(стоит значение 1, то есть будет взята первая)
  • elements — с каким элементом формы работать
  • value — какое значение value присвоить этому элементу

Стоит задержатся на втором пункте, в примере стоит значение 6, при котором заполняется третье поле формы. Это связано с тем, что в плагине есть еще скрытые формы, которые пользователь не видит. Если у Вас не три поля — можете подобрать значение относительно данного и изменить.

На исходе мы подставляем в значение value скрипта обработанный GET запрос и получаем следующий код:

Я поставил этот скрипт в файл шаблона footer.php для того, что бы он обрабатывался после загрузки страницы(что советую и Вам). Теперь при переходе под ссылке мы получим следующую форму:

Автозаполнение полей в Contact Form 7 через GET запрос

Вот и все, проблема решина, поле заполнилось автоматически 🙂

PS Для работы кода нужен jQuery

1 бал2 бала3 бала4 бала5 балов (4 голос, средний бал: 5,00 из 5)
Загрузка...
     Вызвать мастера :)
Скопировать короткую ссылку

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

  1. Аватар
    Автор: alexandr - 27.03.2013 в 22:29
    417

    Прошу вас исходник. Очень надо

    Ответить

    Аватар
    Автор: admin - 28.03.2013 в 07:35
    421

    Какие исходники? В статье все ясно расписано..

    Ответить

  2. Аватар
    Автор: Макс - 01.04.2013 в 18:26
    454

    А как заполнить несколько полей?

    Ответить

    Аватар
    Автор: admin - 02.04.2013 в 19:34
    465

    Создаем еще одну строку с нужными параметрами, например:
    window.document.forms[1].elements[6].value = '< ?php echo $_GET['them']; ?>';
    window.document.forms[1].elements[5].value = '< ?php echo $_GET['email']; ?>';

    Тогда ссылка выглядит так:
    http://ixmaster.net/contacts/?them=%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81/%D0%BF%D1%80%D0%B5%D0%B4%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5&email=1213213

    Ответить

    Аватар
    Автор: Макс - 02.04.2013 в 19:56
    466

    Спасибо, добрый человек! Упомяну тебя в своих молитвах в соцсетях! 💡

    Ответить

    Аватар
    Автор: admin - 02.04.2013 в 20:35
    467

    Не стесняйтесь заглядывайте почаще на блог и форум 🙂

    Ответить

  3. Аватар
    Автор: Александра - 19.04.2013 в 17:36
    701

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

    Нижайше прошу помощи, за финансовое, при необхоимости, «спасибо».

    Ответить

    Аватар
    Автор: admin - 19.04.2013 в 17:55
    702

    Напишу Вам на емайл или свжитесь со мной по моим контактам

    Ответить

    Аватар
    Автор: Александра - 19.04.2013 в 18:07
    703

    написала Вам, жду с нетерпением.

    Ответить

  4. Аватар
    Автор: ushi - 26.04.2013 в 19:39
    795

    Добрый день! У меня тот же вопрос, что и у Александры. Форма выводится через fancybox.
    Когда прописано: value = ‘, то value в коде страницы остается пустым: value = ».
    Если прописать value = ‘win’, то тогда на странице в нужном поле вернется значение win. Что же не так с echo GET?

    Ответить

    Аватар
    Автор: admin - 27.04.2013 в 10:27
    801

    Сложно что то сказать Вам. Нужно смотреть конкретно на самом сайте.

    Ответить

  5. Аватар
    Автор: ushi - 26.04.2013 в 19:42
    796

    Съело код. Когда с echo get, то значение value в исходом коде страницы пустое, если прописать в value=’текст’, то в нужном поле контактной формы появляется ‘текст’. Вот такая беда.

    Ответить

  6. Аватар
    Автор: ushi - 30.04.2013 в 02:32
    831

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

    Ответить

    Аватар
    Автор: admin - 30.04.2013 в 09:06
    834

    Никогда не задавался этим вопросом 🙂 Если в WP — можно посмотреть в таблице wp-user, но вряд ли найдете там, это личная инфа пользователя и фейсбук не должен по идеи ее раздавать всем.

    Ответить

    Аватар
    Автор: ushi - 01.05.2013 в 00:03
    842

    Естественно всем раздавать не надо, но пользователь авторизировался, а значит дал добро на совместную работу facebook и сайта. Значит, как-то вытащить можно. А как? А кто расскажет? Тайна пока.

    Ответить

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: