Contact Form 7. Передача в форму дополнительных значений

Артем Абрамович

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

99 комментариев к “Contact Form 7. Передача в форму дополнительных значений”

  1. как вариант для более детализированных настроек можно вместо jquery onclick использовать DOM events от самого CF7:

    Doc: https://contactform7.com/dom-events/

    var wpcf7Elm = document.querySelector( ‘.wpcf7’ );

    wpcf7Elm.addEventListener( ‘wpcf7submit’, function( event ) {
    alert( «Fire!» );
    }, false );

    Ответить
  2. В контакт форм 7 уже есть готовые теги для вывода подобной информации, например  [_post_title] и [_post_url] выводят тайтл и урл, их достаточно просто прописать в теле письма.

    Ответить
  3. Но для абсолютеной гибкости данный метод конечно лучше.

    Ответить
  4. Спасибо, как раз пригодится) а нельзя ли калькулятор подключить к cf7, т.е чтобы можно было выбрать в нескольких select по значению, и он автоматом посчитал стоимость с выводом на экран и с последующей передачей в письмо при нажатии кнопки отправить.
    Сейчас я написал скрипт на js, но поскольку пока что я ещё рукожоп, то он работает только если предварительно нажать кнопку рассчитать, а уже потом кнопку отправить, если не нажать кнопку рассчитать, то значения не передаются в письмо .

    Ответить
    • Все возможно. Судя по описанию, вам надо событие расчета вещать на кнопку отправки

      Ответить
  5. Здравствуйте, Артём. Вопрос не совсем по теме. Вы не можете подсказать, как парсит инфу о фильмах владелец вот этого сайта на вордпресс http://www.filmostok.ru и этого http://hitkino.net/ Плагинов вроде бы нет…

    Ответить
    • Доброго! Ну плагин то вряд ли для этого есть, а так парсят обычным образом через запросы

      Ответить
  6. Отличное видео! Вся кратко и понятно. А можешь записать видео как передавать в contact form7 HTTP referer?

    Ответить
  7. Всё супер как обычно! Есть один вопрос, а вы сталкивались с такой задачей, когда нужно добавить к форме чекбокс «отправить мне копию письма»? Интересна именно реализация с CF7.
    Спасибо.

    Ответить
    • Доброго! Не, никогда с таким не сталкивался, но думаю есть решение, плагин популярный должно что то быть.

      Ответить
    • Андрей! Если я правильно поняла, Вы имеете ввиду — отправить копию письма автору сообщения? Тогда есть такой вариант. Нужно настроить в шаблоне «письмо 2», оно находится внизу на вкладке «письмо» в шаблоне (когда вы настраиваете форму сообщения). В этом письме 2 настройте почту наоборот — от Вас к отправителю) и буквально через несколько секунд (не смотря на то, что колёсико крутится и не показывается ничего об отправке уведомления) и на Вашу почту и на почту отправителя придут одновременно два письма. Вам — о новом сообщении, отправителю — что его «сообщение успешно доставлено» (написать такой текст в форме) и текст его отправленного сообщения. Для этого не нужен такой чекбокс. Если настроить «письмо 2», то хочет/не хочет)))), а уведомление с текстом ему (автору сообщения) придёт. Я настраивала «письмо 2» по этому видео https://www.youtube.com/watch?v=J9Px0V43E1Y&t=307s с минуты 3:40

      Ответить
  8. Артем, смотрел когда-то ваше видео, где отключались эмоджи и тп мусор. в тч REST-API. CF7 c версии 4.8 перешел только на рест-апи насколько я понял. и теперь сабмит не идет. вернул CF7 к старой версии

    Вы както обходили этот момент?

    Ответить
    • Было такое, только я на своих сайтах рест апи не отключаю, ничего в нем страшного нет, а функционала добавляет вагон. Так что насчет обхода не подскажу. Может имеет смысл на Caldera Forms перейти, там с этим проблем вроде нет

      Ответить
  9. значительно усложнил, там делать всего ничего
    $(‘#order-form’).click(function() {
    var service = $(this).closest(‘.service-item’); // берём весь блок
    $(‘.hide-title’).val(service.find(‘service-title’).text()) // засовываем название в скрытое поле
    $(‘.hide-price’).val(service.find(‘service-price’).text()) // // засовываем цену в скрытое поле
    })

    Ответить
  10. Артем, спасибо за видео, очень крутой способ передачи данных в поля!
    Есть вопрос, можно ли как-то передавать таким образом заголовок модуля в теме Divi, например заголовок Blurb?

    Ответить
    • Технически да, проблем никаких, только разобраться надо

      Ответить
    • Ну вот я уже 2 дня голову ломаю как это сделать. Я подумал, что самый лучший вариант это передавать alt изображения блерба, но как заставить жкваери найти конкретный альт и передать его в скрытое поле я пока не догадался.

      Ответить
    • В jquery можно искать и получать атрибуты элемента, а можно просто сам элемент искать по классу например. Заголовок в Блюрбе вроде в отдельном классе сидит, так что простой вариант такой — каждому блюрбу присвоить ID а потом по этому идентификатору искать нужный элемент

      Ответить
    • Спасибо за совет! Но вот как-то хотелось без присвоения вручную лишних параметров, я присваивал вручную атрибут data-*, но в этом методе слишком много участия человека получается. Долго мучился и наконец таки нашел решение. У меня кнопка на том же уровне в дереве что и заголовок в блюрбе, то есть у них есть общий предок. При нажатии на кнопку заказа, происходит поиск ближайшего родителя кнопки «.et_pb_blurb_container» и в родителе я нахожу заголовок h4 и уже его вывожу хоть в скрытое поле, хоть виде html в тег. Вот так это выглядит:
      fltest = $(this).closest(«.et_pb_blurb_container»).find(«h4»); — создаю эту переменную при клике на кнопку, а дальше все как в видео.
      Данный метод подойдет для тех, у кого товары не являются отдельными постами и находятся на одной странице в виде дивов.

      Ответить
  11. День добрый! Спасибо за обзор! Подскажите . Есть таблица, я от туда со строки и столбца вытягиваю данные. о И получилось что на каждую строку нужна своя форма и модальное окно. А как сделать чтобы вытягивались с текущей строки и применять всего одну форму. Подскажите если возможно?

    Ответить
    • Добрый! Возможно, код из видео должен помочь, там вроде универсальный давал, должен и в таком режиме работать

      Ответить
    • Добрый! Только в видео, пока на сайт ничего не выкладывал

      Ответить
  12. Артем, все круто. как всегда. Только в Contact Form 7 в письме приходят названия самих шорткодов а не содержимое их. Что не так делаю?

    Ответить
    • Скорее всего надо включить поддержку шорткодов. Есть даже отдельный плагин под это в репозитории

      Ответить
    • Артем, все отлично. Блин это я деятель, два одинаковых класса висели на кнопке и туда же загнал обработчик ну и сабмит самой Contact Form7 что и вызывало undefined

      Ответить
  13. здравствуйте, у меня появился очень значимый на данный момент вопрос связанный с темой вашего видеоролика. Тема такая, у меня есть слайдерный калькулятор в котором выводится форма CF7 снизу, но по ТЗ необходимо чтобы окно было модальным, но тут появилась проблема. необходимо в самой контактной форме вывести общую сумму заказа в виде динамического числа, и вывод всех чисел с калькулятора в форму . Как это сделать , не имею понятия. Надеюсь на ваш скорый ответ.

    Ответить
    • Доброго! Ну принцип тот же. Только сумму можно в переменную записать и передавать ее в форму. CF7 для такой задачи не очень подходит. Проще GravtyForm использовать

      Ответить
  14. Wow…
    Надеюсь я тоже до этого доросту, и буду как шумахер с файла на файл бегать и штамповать…
    Супер! 😀

    Ответить
  15. А еще, у меня такой вопрос, может поможете, не могу найти тематику.
    У меня в форме, динамические дивы с инпутами, при отправке отправляються данные только с страницы, с динамических форм не отправляються. Как можно написать код с помощью jQuery, или еще чего-то, чтоб считывать данные с динамических дивов и добавлять в форму на странице, и одним файлом отправлять на почту? Если подскажите буду благодарна.
    Я только учусь, выучила html,css, немного php, javascript, jQuery.

    Ответить
    • Даже динамические дивы имеют атрибут name вот чрезе него по аналогии как в видео и можно брать данные. Правда тут смотреть надо, можно там такие инпуты что из в DOM нет например… В общем от ситуации зависит

      Ответить
  16. Подскажите, что делать если value в скрытый input передается и все хорошо, но оно не приходит на почту! Я уже весь интернет перешерстил и ничего не нашел. Все делал по аналогии с видео

    Ответить
    • А письмо приходит? Или данные их этого инпута не приходят? Что в консоли пишется?

      Ответить
    • ​@Финты WordPress разобрался. Письмо приходило, не приходил конкретно этот инпут. Поменял submit input на button и все заработало

      Ответить
  17. Отличное видео, очень помогло. Есть вопрос: как можно передать цену вариации товара таким способом?

    Ответить
    • Ну если по аналогии то забирать со страницы товара, после того как выбор произошел. Хотя тут от темы, когда плагин писал https://wpruse.ru/my-plugins/order-one-click/ у меня не получилось подстроиться пот все темы, пришлось аяксом загружать. Но теоретически для конкретной темы просто забирать по аналогии с нужного дива, там Вукомерс формирует их всегда одинаковыми

      Ответить
  18. Уважаемый Артём!! Помогите! Есть такая проблема: реализован статический коллтрекинг через подмену текстового поля (то есть номера телефона). Как можно передать в ContacrForm-7 какой именно номер телефона был у посетителя (то есть либо текст-1 либо текст-2) во время отправки данной формы

    Ответить
    • @mr. goodman Ну тогда ловит GET и по нем уже определять, какие данные куда надо пихать. Ну и если телефон подменяется до отправки формы, значит пользователь его уже видит и он есть на странице. Достаточно найти значение этого телефона на странице и через скрытое поле передать в форму

      Ответить
    • @Финты WordPress вот как раз и был вопрос как найти это значение и это поле и как передать)))

      Ответить
    • @mr. goodman По аналогии, как в видео. Смотрим какой класс, через find ищем его на странице, и если не пустой, то записываем его через val в нужное поле. Все через jQuery

      Ответить
    • @mr. goodman Ну готового кода у меня нет) К сожалению, тут не смогу помочь, но подобное может любой начинающий фротендер сделать

      Ответить
  19. Уважаемые! Подскажите, а куда собственно надо вставлять js код?!!

    Ответить
    • @Финты WordPress Ой, а можно еще чуток злоупотребить вашим доверием?))) У меня такая ситуация — страница генерируется двумя плагинами, сначала вызывается один, потом второй. Я правильно понимаю, что если цену на страницу выводит второй, то в коде первого я эту цену никак не вытащу? И грубо говоря надо будет в первом плагине вызывать код для вытаскивания этой цены аналогично тому, как делает второй плагин?

      Ответить
    • Это как это? Не очень представляю как такое может работать. Что за плагины?

      Ответить
    • @Финты WordPress The event calendar и event tickets plus, последний организует вывод билета, который является товаром из woocommers

      Ответить
  20. как же бесит желтая херная около курсора…. не используй эту парашу, я тебя прошу

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

    Ответить
    • Так не бывает, проверьте названия классов, может ошибка где

      Ответить
    • @Финты WordPress бывает, в моем случае надо было верхнюю строку с кликом написать в виде [ $(document).on(‘click’,’.emailDealerBTN’,function(){ ]. Хоть скрипт и написан внутри ready функции, но увы, методом написаным как у вас вызывался он все равно до того, как у меня формировалась кнопка (динамично).
      Все равно видео полезное, спасибо, просто много нюансов как всегда)

      Ответить
    • А ну да, такое может быть, раннее срабатывание. Главное что разобрались и все работает

      Ответить
  22. Добрый день! Стоит задача в контактной форме вывести динамическую таблицу с добавлением полей при нажатии на кнопку. А точнее как все эти заполненные поля отправить на почту.

    Ответить
  23. подскажите пожалуйста в чем может быть проблема…
    все сделал все работает, НО часто в теле письма которое приходит уже на почту не показываются данные с этого скрытого поля 🙁
    на кнопке data атрибут заполняется, в форме в скрытом поле value заполняется, НО вот в письме пустое поле.
    куда копать не знаю 🙁

    Ответить
    • Так не бывает, если данные добавляются они должны отправляться и приходить, если не приходят, значит что-то с добавлением данные не так

      Ответить
    • Скорее всего была проблема с плагином динамик hide text, плагин отключил и все приходит, видимо конфликт

      Ответить
  24. На этом сайте интересно сделали функционал корзины.

    https://mc.ru/region/nnovgorod/metalloprokat/armatura_riflenaya_a3

    Подскажите можно ли повторить такое на WordPress с помощью плагинов?

    Какие плагины посоветуете использовать для реализации такого функционала?

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

    Я планирую использовать Ninja Form — что бы отобразить таблицу, но только не понимаю как брать значения, и передавать их в Contact Form 7. Есть ещё вариант передавать всё в Formidable. — немного покруче чем Contact Form 7.

    Нужно брать значение например ( Арматура а3 12мм, Цена 450,000 ) добавить это в PopUp окно, где будет работать калькуляция. и уже потом после расчета это добавить в корзину типа как строку в контактную форму которая должна ещё быть на ajax, что бы перемещаться по страницам с сохранением позиций которые добавили в корзину ( они же простые текстовые поля/строки в контактную форму.)
    Создавать отдельные страницы для каждого товара и потом выводить всё в таблицы — такой вариант не подходит, сразу говорю!

    Ответить
  25. День добрый! Подскажите, как цену продукта woocommerce вывести в поле формы Contagt7

    Ответить
    • @@wpruse Добрый вечер! Спасибо за ответ. Но подскажите, как передать данные товара в поле contact form 7. Название и цена реализовано через get запрос.

      [dynamictext dynamictext-54 «CF7_get_post_var key=’title'»]
      [dynamictext dynamictext-101 «CF7_get_post_var key=’_price'» ]
      Но цена выводится для простого товара. А как вывести для вариативного товара . И как вывести количество товара, которое выбирается на странице товара. Какие key= ?

      Ответить
    • Это не подскажу. Цена для вариаций через jquery подставляется, так что в вариативных товарах придется через js выкруживать

      Ответить
  26. Подскажите пожалуйста, как данные с ползунка(type range) можно передать в input cs7?

    Ответить
    • Так же как и любые другие данные с атрибутов собираются, если в jq то так примерно
      let minValue = $(range).attr(‘min’);
      let maxValue = $(range).attr(‘min’);

      В переменные запишуться данные, а дальше передавать куда нужно

      Ответить
    • @@wpruse проблема не столько собрать, сколько передать значение этой переменной в Contact form. Как конкретно это сделать?

      Ответить

Добавить комментарий

%d такие блоггеры, как: