Как создать пользовательскую форму на веб-сайте или в блоге WordPress

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

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

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

Видеоурок

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

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

1. Дизайн формы:

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

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

• Перейдите на Страницы -> Добавить новую опцию, указанную под вашей панелью управления WordPress.
• Укажите заголовок нужной страницы, например «Информация о клиенте» или «Информация о клиенте».
• Теперь перейдите на вкладку «HTML», чтобы написать HTML-код.
• создайте пользовательскую форму в WordPress, которую вы хотите.
• Добавьте метод «POST», дайте ему имя «customer_details».
• Добавьте функцию «form_validation» в свойство onsubmit, чтобы позже добавить некоторые проверки JavaScript и выполнить действие.
• Действие — это файл PHP, который будет выполняться при отправке формы.
• На этом этапе вы можете добавить в форму некоторые поля, такие как имя, адрес электронной почты, пол, возраст и т. д., и закрыть форму.

Окончательный код должен выглядеть так

Ваше имя: <br />
Ваш адрес электронной почты: <br />
Пол: мужской женский<br />
Ваш возраст: <br />

2. Проверка:

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

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

функция form_validation() {
/* Проверьте имя клиента на пустую отправку */
var имя_клиента = document.forms["детали_клиента"]["имя_клиента"].value;
если (имя_клиента == «» || имя_клиента == ноль) {
Сообщить("Поле имени должно быть заполнено.");
вернуть ложь;
}/* Проверить адрес электронной почты клиента на недопустимый формат */
var customer_email = document.forms["customer_details"]["customer_email"].value;
var at_position = customer_email.indexOf («@»);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
Сообщить("Указанный адрес электронной почты недействителен.");
вернуть ложь;
}
}

Это проверит и подтвердит имя клиента и адрес электронной почты. Добавьте этот код после . Итак, полный код в WordPress будет выглядеть так:

Ваше имя: <br />
Ваш адрес электронной почты: <br />
Пол: мужской женский<br />
Ваш возраст: <br />


функция form_validation() {
/* Проверьте имя клиента на пустую отправку */
var имя_клиента = document.forms["детали_клиента"]["имя_клиента"].value;
если (имя_клиента == «» || имя_клиента == ноль) {
Сообщить("Поле имени должно быть заполнено.");
вернуть ложь;
}
/* Проверьте адрес электронной почты клиента на недопустимый формат */
var customer_email = document.forms["customer_details"]["customer_email"].value;
var at_position = customer_email.indexOf («@»);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position&lt;1 || dot_position=customer_email.length) {
Сообщить("Указанный адрес электронной почты недействителен.");
вернуть ложь;
}
}

Теперь все, что вам осталось сделать, это опубликовать страницу, и это должно эффективно помочь.

3. Скрипты на стороне сервера:

Помните ту часть, где мы упомянули «детали клиента.php»? Что ж, пришло время заняться и этой частью.
Откройте «Блокнот» или ваш любимый текстовый редактор, запишите приведенный ниже код и сохраните файл как customer-details.php на рабочем столе.

Во-первых, объявите некоторые переменные с именами $customer_name, $customer_email, $customer_sex, $customer_age и присвойте значения соответствующим полям, представленным в HTML-форме.

Например, $customer_name = $_POST["customer_name"] будет получать значение из HTML-формы методом POST и присваивать его переменной $customer_name.

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

Загрузите файл wp-config.php из вашей установки WordPress на рабочий стол с помощью вашего любимого FTP-клиента, такого как FileZilla. Откройте файл wp-config.php с помощью вашего любимого текстового редактора, например Блокнота, и вы найдете необходимые настройки базы данных.

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

В этом PHP-коде есть необязательный шаг.

Если вы хотите показать какое-то сообщение пользователю после отправки формы или хотите перенаправить пользователя на другую страницу, вы можете добавить заголовок («Расположение:») в код. Вам нужно будет создать страницу успеха для этого позже.

Таким образом, полный файл customer-details.php будет выглядеть так:

// Получить данные
$customer_name = $_POST[“customer_name”];
$customer_email = $_POST["customer_email"];
$customer_sex = $_POST["customer_sex"];
$customer_age = $_POST[“customer_age”];// Подключение к базе данных
$conn = mysqli_connect («Хост базы данных», «Имя пользователя базы данных», «Пароль базы данных», «Имя базы данных»);
если (! $ conn) {
die('Проблема с подключением к базе данных: ' .mysql_error());
}
// Вставка данных в базу данных
$query = "ВСТАВИТЬ В 'Имя базы данных'.'Имя таблицы' ('имя_клиента', 'электронная_почта_клиента', 'пол_клиента', 'возраст_клиента') ) ЗНАЧЕНИЯ (имя_клиента, адрес электронной почты клиента, пол_клиента, возраст_клиента)";
mysqli_query ($ conn, $ запрос);

// Перенаправление на страницу успеха
заголовок("Местоположение: ");

Загрузите этот файл customer-details.php в папку темы с помощью вашего любимого FTP-клиента.

4. Успех:

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

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

Создайте страницу WordPress, дайте ей название, например «Страница успеха», убедитесь, что слаг страницы соответствует «странице успеха» или тому, что вы указали в заголовке («Местоположение»). Теперь напишите сообщение, например, «спасибо за сотрудничество» или что-то в этом роде, и все готово.

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

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

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

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

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

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

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