Вам когда-нибудь приходилось создавать собственную многостраничную форму в WordPress? Я делаю все время! Хотя вы можете использовать различные плагины для выполнения работы, они редко бывают идеальными для ваших целей. Я обнаружил, что самый простой способ сделать все правильно — от форм до данных и отчетов — это просто создать их с нуля.
В этой серии статей я проведу вас через процесс создания нескольких форм страниц с нуля. Хотите верьте, хотите нет, но это довольно просто, если вы понимаете базовый PHP и знаете основы HTML-форм. (Если вы ветеран PHP или хотите стать таковым , посетите наш партнерский сайт PHP, PHPMaster.com )
Мы будем использовать метод POST для передачи информации из формы обратно в себя и операторы IF в PHP для отображения следующей части формы. Когда пользователи отправляют данные формы, страница обновляется следующей страницей формы, сохраняя отправленную информацию по мере ее поступления.
В результате пользователи остаются на одной странице, и вы можете условно — даже динамически — создать следующую страницу формы на основе их ответов. Или, вы можете просто сохранить поля формы статичными для простоты.
Почему многостраничная форма?
Существует множество причин, по которым вам может понадобиться многостраничная форма. В некоторых случаях вам может потребоваться не более 3-5 вопросов на страницу. В других случаях вы можете собирать дополнительную информацию только на основе их первоначальных ответов. Например, если пользователь указывает, что ему меньше 18 лет, вы, возможно, не захотите задавать определенные вопросы или вам может потребоваться отобразить другую форму, основанную на ответах мужчин или женщин.
Кроме того, многостраничная форма позволяет собирать информацию поэтапно. Если пользователи по какой-либо причине откажутся от анкеты, вы собрали хотя бы некоторую информацию, которая может оказаться полезной. Распространение форм — это обычное явление, и многостраничный сбор форм дает вам важные данные, например, о том, где чаще всего отказываются от форм, основные контактные данные пользователя для последующего наблюдения и т. Д.
Тематическое исследование
В целях планирования я буду собирать основную информацию о пользователях и их предпочтениях в отношении покупок. Итак, вот как наша форма будет развиваться:
- Страница 1 — Основная контактная информация
- Имя (имя и фамилия),
- Эл. адрес,
- Телефон,
- Почтовый индекс
- Стр.2 — Социально-экономические данные
- Пол
- Возраст
- образование
- доход
- Страница 3 — Торговые настройки
- Расположение (онлайн, магазин)
- Любимые категории
- Страница 4 — Целевая страница «Спасибо!»
Я настрою это в нашем файле functions.php, который подходит для тестирования, но когда вы будете готовы запустить его на своем сайте, вам следует подумать о том, чтобы сделать это плагином или как минимум отделить этот код от вашего. файл functions.php и использование оператора include_once для связи файлов в вашем файле functions.php.
Часть моего обоснования этого метода состоит в том, чтобы избежать необходимости углубляться в FTP и другие менее подходящие методы создания пользовательских функций в WordPress. Итак, для вас, ветеранов, просто терпите мои менее чем идеальные методы.
Шаг 1: Установите шорткод
Это необязательно, но, конечно, мне легче использовать короткие коды для отображения этих многостраничных форм. Так что я буду учить этому методу, и вы можете реализовать свой собственный, если хотите.
В вашем файле functions.php добавьте следующее:
[sourcecode language = ”php”]
add_shortcode ( ‘multipage_form_sc’, ‘multipage_form’);
function multipage_form () {
echo ‘<h3> Новая форма </ h3>’;
};
[/исходный код]
Это позволяет WordPress знать, что вы можете поместить шорткод multipage_form_sc в сообщение или страницу, и что WordPress должен выполнить функцию multipage_form, когда найдет шорткод. Поскольку у меня часто есть несколько многостраничных форм, которые я буду использовать для данного сайта, я даю этим формам уникальные имена, например, multipage_form_userinfo_sc и соответствующую ему функцию multipage_form_userinfo.
Шаг 2: Настройте сообщение или страницу
Создайте новый пост или страницу, на которой вы хотите, чтобы существовала многостраничная форма. Вставьте шорткод в форму, опубликуйте его и просмотрите страницу. Вы должны увидеть сообщение «Новая форма», которое мы создали в нашей функции multipage_form ().
Вот как должен выглядеть ваш шорткод в редакторе постов / страниц:
[Multipage_form_sc]
Шаг 3: Первые элементы формы
Давайте начнем создавать первые элементы формы. Я буду держать это невероятно простым ради того, чтобы сосредоточиться на концепциях многостраничных форм, а не на CSS или других приятных вещах, которые мы можем вникнуть позже.
Итак, вот наша основная информация, которую вы можете вставить в функцию multipage_form ():
[sourcecode language = ”php”]
add_shortcode ( ‘multipage_form_sc’, ‘multipage_form’);
function multipage_form () {
глобальный $ wpdb;
$ this_page = $ _SERVER [‘REQUEST_URI’];
$ page = $ _POST [‘page’];
if ($ page == NULL) {
echo ‘<form method = «post» action = «‘. $ this_page. ‘»>
<label for = «first_name» id = «first_name»> Имя: </ label>
<input type = «text» name = «first_name» id = «first_name» />
<label for = «last_name» id = «last_name»> Фамилия: </ label>
<input type = «text» name = «last_name» id = «last_name» />
<label for = «email» id = «email»> Электронная почта: </ label>
<input type = «text» name = «email» id = «email» />
<label for = «phone» id = «phone»> Телефон: </ label>
<input type = «text» name = «phone» id = «phone» />
<label for = «first_name» id = «first_name»> Почтовый индекс: </ label>
<input type = «text» name = «zip_code» id = «zip_code» />
<input type = «hidden» value = «1» name = «page» />
<input type = «submit» />
</ Форма> ‘;
} // Конечная страница 1 формы
elseif ($ page == 1) {
$ first_name = $ _POST [‘first_name’];
$ last_name = $ _POST [‘last_name’];
$ email = $ _POST [’email’];
$ phone = $ _POST [‘phone’];
$ zip_code = $ _POST [‘zip_code’];
echo ‘<h3> Вы попали на 2-ю страницу! </ h3>
<p> Вот ваши входные данные формы: </ p>
<p> Имя: ‘. $ first_name. </ P>
<p> Фамилия: ‘. $ last_name. </ P>
<p> Электронная почта: ‘. $ email. </ P>
<p> Телефон: ‘. $ телефон. </ P>
<p> Почтовый индекс: ‘. $ zip_code. ‘</ Р>’;
} // Конечная страница 2 формы
};
[/исходный код]
Это много кода, поэтому давайте поразим основные моменты.
Во-первых, у нас есть наши начальные операторы POST, которые мы ищем — $ this_page — это страница, на которой мы сейчас работаем с нашей формой, а $ page — номер страницы. Я использую «1» для первой страницы, «2» для второй страницы и т. Д. Как только мы сохраним эту информацию, у нас будет завершена запись номера страницы. Мы также будем использовать номер страницы, чтобы проверить, на какой странице формы мы находимся, и соответственно отобразить информацию.
Далее у нас есть первый оператор IF, который проверяет, на каком номере страницы мы находимся. Если оно пустое (NULL), мы отображаем первую страницу формы. Вот где у нас есть основные элементы формы — метки и входные данные. Я добавил значение скрытой формы для номера страницы, но вы также можете добавить все виды дополнительных скрытых полей формы для сбора имени пользователя (если оно вошло в систему), а также другую информацию, которая вам может понадобиться.
После этого у нас есть информация на второй странице, начинающаяся с оператора ELSEIF. Мы продолжим этот путь операторов ELSEIF для обработки и отображения данных формы. Вы можете использовать оператор SWITCH, если у вас много-много страниц, но формат IF в этом сценарии нам подходит.
На второй странице мы берем входные данные формы и отображаем их в целях тестирования. В следующей статье мы фактически сохраним эту информацию в таблице базы данных и отобразим следующую страницу формы.
Попробуй это
Сохраните файл functions.php с указанным выше кодом (ничего не пропустите; одна неуместная точка с запятой или фигурная скобка приведет к сбою вашего сайта!) Перейдите к сообщению или странице, созданной на шаге 2, заполните первую страницу формы и нажмите кнопку «Отправить». Вуаля!
Далее!
В следующей части этой серии мы перейдем к phpMyAdmin и создадим таблицу в базе данных, чтобы начать хранить всю эту замечательную информацию, которую мы собираем. Не волнуйтесь, я сделаю это очень простым и даже напишу для вас сценарии MySQL, если вы новичок в этой области.
Знаете ли вы, что у нас есть целый сайт, посвященный мастерству PHP ? Посетите наш партнерский сайт на PHPMaster.com .