wordpress表单调用

tech2023-01-14  116

wordpress表单调用

In this second article in our series on multi-page form design, we’re going to create the database tables required to store the custom form data. We’ll also delve into the process of storing the first page of form data and displaying the second page to the user. We employ some very basic PHP and SQL to achieve our design goals. (If you’re interested in learning more about PHP, our partner site, PHPMaster.com, has a wide variety of guides ranging from beginner to expert.)

在多页表单设计系列的第二篇文章中,我们将创建存储自定义表单数据所需的数据库表。 我们还将深入研究存储表单数据的第一页并将第二页显示给用户的过程。 我们使用一些非常基本PHP和SQL来实现我们的设计目标。 (如果您想了解有关PHP的更多信息,我们的合作伙伴网站PHPMaster.com提供了从初学者到专家的各种指南。)

步骤1:使用phpMyAdmin创建数据库表 (Step 1: Using phpMyAdmin to Create a Database Table)

If you’ve never worked with phpMyAdmin, this is a big step for you. I realize that it can be daunting, but custom form development usually means you’re going to want custom database tables. While you could use existing, built-in WordPress data tables and store this information as user meta, you’re going to have to jump through many more hoops to make that work. In the end, avoiding phpMyAdmin is a lot harder than learning it.

如果您从未使用过phpMyAdmin,这对您来说是一大进步。 我意识到这可能令人生畏,但是自定义表单开发通常意味着您将需要自定义数据库表。 尽管您可以使用现有的内置WordPress数据表并将此信息存储为用户元数据,但您将不得不跳很多圈来实现该功能。 最后,避免phpMyAdmin比学习它难得多。

So, go to your domain hosting provider, log in, and go to your hosting control panel. You should see a button or link for phpMyAdmin or some other database management tool. Since the vast majority of domain hosting providers use phpMyAdmin, I’ll use that as my example.

因此,请转到您的域名托管服务提供商,登录并转到托管控制面板。 您应该看到phpMyAdmin或其他数据库管理工具的按钮或链接。 由于绝大多数的域名托管服务提供商都使用phpMyAdmin,因此我将以它为例。

Once logged into phpMyAdmin, go to the SQL tab for your WordPress installation and paste in the following code:

登录到phpMyAdmin后,转到WordPress安装的“ SQL”标签,然后粘贴以下代码:

[sourcecode language=”sql”] CREATE TABLE `shopping_preferences` ( `id` INT( 7 ) NOT NULL AUTO_INCREMENT, `first_name` VARCHAR( 50 ) NOT NULL, `last_name` VARCHAR( 50 ) NOT NULL, `email` VARCHAR( 50 ) NOT NULL, `phone` VARCHAR( 12 ) NOT NULL, `zip_code` VARCHAR( 5 ) NOT NULL, `gender` INT( 1 ) NOT NULL, `age` INT( 3 ) NOT NULL, `education` VARCHAR( 50 ) NOT NULL, `income` VARCHAR( 50 ) NOT NULL, `location` VARCHAR( 50 ) NOT NULL, `categories` VARCHAR( 400 ) NOT NULL, `page` INT( 1 ) NOT NULL, `timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY ( `id` ) ) [/sourcecode]

[源代码语言=“ sql”]创建表`shopping_preferences`(`id` INT(7)NOT NULL AUTO_INCREMENT,`first_name` VARCHAR(50)NOT NULL,`last_name` VARCHAR(50)NOT NULL,`email` VARCHAR( 50)NOT NULL,`phone` VARCHAR(12)NOT NULL,`zip_code` VARCHAR(5)NOT NULL,`gender` INT(1)NOT NULL,`age` INT(3)NOT NULL,`education` VARCHAR( 50)NOT NULL,`income` VARCHAR(50)NOT NULL,`location` VARCHAR(50)NOT NULL,`categoories` VARCHAR(400)NOT NULL,`page` INT(1)NOT NULL,`timestamp` TIMESTAMP不NULL DEFAULT CURRENT_TIMESTAMP,主键(`id`))[/源代码]

You can modify this code as needed, of course, but this will get a new data table in place and allow you to start adding content from the inputs of our multi-page form.

当然,您可以根据需要修改此代码,但这将获得一个新的数据表,并允许您开始从多页表单的输入中添加内容。

步骤2:添加第一页数据 (Step 2: Adding Page One Data)

For this step, we’ll accomplish two things:

对于此步骤,我们将完成两件事:

Send the page one form inputs into the database table that we created in Step 1

将页面的一种形式输入发送到我们在步骤1中创建的数据库表中 Retrieve the ID of the form data so we can keep adding more information as the user fills out the forms.

检索表单数据的ID,以便我们可以在用户填写表单时继续添加更多信息。

To add data into our database table, we’ll be using the built-in WordPress $wpdb. While you can create a MySQL INSERT script, it’s good practice when working with WordPress databases to use their carefully-designed functionality.

要将数据添加到数据库表中,我们将使用内置的WordPress $ wpdb。 虽然您可以创建MySQL INSERT脚本,但是在使用WordPress数据库以使用其精心设计的功能时,这是一个好习惯。

It’s a simple process that is also the least intuitive ever… at first. Once you get the hang of working with $wpdb, you’ll be just fine.

这是一个简单的过程,也是最直观的不断 ......在第一。 一旦掌握了使用$ wpdb的技巧,就可以了。

First, we need to grab the POST data from page one of our form. If you’ve ever worked with forms, this is a familiar process.

首先,我们需要从表单的第一页获取POST数据。 如果您曾经使用过表单,这是一个熟悉的过程。

The insert process starts by defining the columns using an array format assigned to a variable. Then the insert function takes it from there.

插入过程首先使用分配给变量的数组格式定义列。 然后插入函数从那里获取它。

[sourcecode language=”php”] // Start Page 2 of Form elseif ( $page == 1 ) { // Grab the POST data that the user provided $first_name = $_POST[‘first_name’]; $last_name = $_POST[‘last_name’]; $email = $_POST[’email’]; $phone = $_POST[‘phone’]; $zip_code = $_POST[‘zip_code’]; // Assign the table and inputs for our upcoming INSERT function $page_one_table = ‘shopping_preferences’; $page_one_inputs = array( ‘first_name’ => $first_name, ‘last_name’ => $last_name, ’email’ => $email, ‘phone’ => $phone, ‘zip_code’ => $zip_code, ‘page’ => $page ); // Insert the data into a new row $insert_page_one = $wpdb->insert($page_one_table, $page_one_inputs); // Grab the ID of the row we inserted for later use $form_id = $wpdd->insert_id; echo ‘<h3>You made it to the 2nd page!</h3> Here are your form inputs: First Name: ‘ . $first_name . ‘ Last Name: ‘ . $last_name . ‘ Email: ‘ . $email . ‘ Phone: ‘ . $phone . ‘ Zip Code: ‘ . $zip_code . ‘ Form ID: ‘ . $form_id . ”; }//End Page 2 of Form [/sourcecode]

[sourcecode language =” php”] //表单的第二页elseif($ page == 1){//获取用户提供的POST数据$ first_name = $ _POST ['first_name']; $ last_name = $ _POST ['last_name']; $ email = $ _POST ['email']; $ phone = $ _POST ['phone']; $ zip_code = $ _POST ['zip_code']; //为即将到来的INSERT函数分配表和输入$ page_one_table ='shopping_preferences'; $ page_one_inputs = array('first_name'=> $ first_name,'last_name'=> $ last_name,'e​​mail'=> $ email,'phone'=> $ phone,'zip_code'=> $ zip_code,'page'=> $ page); //将数据插入新行$ insert_page_one = $ wpdb-> insert($ page_one_table,$ page_one_inputs); //获取我们插入的行的ID,以供以后使用$ form_id = $ wpdd-> insert_id; echo'<h3>您已进入第二页!</ h3>这是您的表单输入:名字:'。 $ first_name。 ' 姓: ' 。 $ last_name。 “电子邮件:”。 $ email。 ' 电话: ' 。 $ phone。 ' 邮政编码: ' 。 $ zip_code。 表格ID:。 $ form_id。 ”; } //表格[/ sourcecode]的第2页结束

In the last part of the code, we are doing a bit of initial checking of our data, we display our message about making it to page two of the form, and then we show the stored input values to the user who provided them. If we have a Form ID value, we have successfully inserted a row!

在代码的最后部分,我们将对数据进行一些初始检查,在表单的第二页上显示有关使其信息的信息,然后向提供数据的用户显示存储的输入值。 如果我们有一个Form ID值,那么我们已经成功插入了一行!

步骤3:添加第二页窗体 (Step 3: Adding the Page Two Form)

So, we inserted a row of data from our first page of the form, and now we’re ready to collect some more information. This time, we want to get some socioeconomic data. Even if the user bails on us at this point, we’ve still got some useful information that we can use to get in touch with them later.

因此,我们从表单的第一页插入了一行数据,现在我们准备收集更多信息。 这次,我们希望获得一些社会经济数据。 即使此时用户对我们不满意,我们仍然可以获得一些有用的信息,以后可以与他们联系。

After the $form_id code above, we’re going to replace the rest and add the second page of our fancy form:

在上面的$ form_id代码之后,我们将替换其余部分,并添加花式表单的第二页:

[sourcecode language=”php”] echo ‘<form method="post" action="’ . $this_page .’"> <label for="gender" id="gender">Gender: </label> <select name="gender" /> <option value="nothing" selected>Select Gender</option> <option value="0">Female</option> <option value="1">Male</option> </select> <label for="age" id="age">Age: </label> <input type="text" name="age" id="age" /> <label for="education" id="education">Education: </label> <select name="education" /> <option value="nothing" selected>Select Level of Education</option> <option value="some_high_school">Some High School</option> <option value="all_high_school">High School Diploma/GED</option> <option value="some_college">Some College</option> <option value="all_colleg">College Degree</option> <option value="some_grad">Some Graduate School</option> <option value="all_grad">Graduate</option> <option value="some_doc">Some Post Graduate</option> <option value="all_doc">Doctorate</option> </select> <label for="income" id="income">Income: </label> <select name="income" /> <option value="nothing" selected>Select Income Range</option> <option value="10000" selected>Less than $10,000</option> <option value="25000" selected>$10,000 – $25,000</option> <option value="50000" selected>$25,000 – $50,000</option> <option value="75000" selected>$50,000 – $75,000</option> <option value="max" selected>More than $75,000</option> </select> <input type="hidden" value="2" name="page" /> <input type="hidden" value="’ . $form_id . ‘" name="form_id" /> <input type="submit" /> </form>’; } //End Page 2 of Form [/sourcecode]

[源代码语言=“ php”]回显'<form method =“ post” action =“'。$ this_page。'”> <label for =“ gender” id =“ gender”>性别:</ label> <选择名称=“ gender” /> <option value =“ nothing” selected>选择性别</ option> <option value =“ 0”>女性</ option> <option value =“ 1”>男性</ option> </ select > <label for =“ age” id =“ age”>年龄:</ label> <input type =“ text” name =“ age” id =“ age” /> <label for =“ education” id =“ education “>教育:</ label> <select name =” education“ /> <select value =” nothing“ selected>选择教育程度</ option> <option value =” some_high_school“>一些高中</ option> < option value =“ all_high_school”>高中文凭/ GED </ option> <option value =“ some_college”>一些大学</ option> <option value =“ all_colleg”>大学学位</ option> <option value =“ some_grad “>某些研究生院</ option> <option value =” all_grad“>研究生</ option> <option value =” some_doc“>某些研究生学位</ option> <option value =” all_doc“>博士</ option> </ select> <label for =“ income” id =“ income”>收入:</ lab el> <选择名称=“收入” /> <选择价值=“未选择”>选择收入范围</ option> <选择价值=“ 10000”已选择>少于$ 10,000 </ option> <选择价值=“ 25000”选择> $ 10,000 – $ 25,000 </ option> <选择值=“ 50000”选择> $ 25,000 – $ 50,000 </ option> <选择值=“ 75000”选择> $ 50,000 – $ 75,000 </ option> <选择值=“ max”选择>超过$ 75,000 </ option> </ select> <input type =“ hidden” value =“ 2” name =“ page” /> <input type =“ hidden” value =“'。 $ form_id。 '“ name =” form_id“ /> <input type =” submit“ /> </ form>';} //结束表单[/ sourcecode]的第2页

For the sake of brevity, I left the “Age” option as a fill in the blank so we don’t have a long form with overwhelming options. The final version will have a drop-down menu.

为了简洁起见,我将“年龄”选项留为空白,因此我们没有冗长的选项。 最终版本将具有一个下拉菜单。

步骤4:构建Page 3处理程序 (Step 4: Building the Page 3 Handler)

Now, let’s grab the information from page two and make sure we’ve captured what we need. We’ll display it on the page for testing purposes.

现在,让我们从第二页中获取信息,并确保我们已经捕获了所需的信息。 我们将其显示在页面上以进行测试。

Another ELSEIF statement is required to test for the page number. Just place this immediately after the “End Page 2″ comment from the previous code sample:

需要另一个ELSEIF语句来测试页码。 只需将其放在上一个代码示例的“ End Page 2”注释之后:

[sourcecode language=”php”] elseif( $page == 2 ) { $gender = $_POST[‘gender’]; $age = $_POST[‘age’]; $education = $_POST[‘education’]; $income = $_POST[‘income’]; $page = $_POST[‘page’]; $form_id = $_POST[‘form_id’]; echo ‘$gender: ‘ . $gender . ”; echo ‘$age: ‘ . $age . ”; echo ‘$education: ‘ . $education . ”; echo ‘$income: ‘ . $income . ”; echo ‘$page: ‘ . $page . ”; echo ‘$form_id: ‘ . $form_id . ”; } [/sourcecode]

[源代码语言=“ php”] elseif($ page == 2){$ gender = $ _POST ['gender']; $ age = $ _POST ['age']; $ education = $ _POST ['education']; $ income = $ _POST ['income']; $ page = $ _POST ['page']; $ form_id = $ _POST ['form_id']; 回声'$ gender:'。 $ gender。 ”; 回声'$ age:'。 $ age。 ”; 回声“ $教育:”。 $ education。 ”; 回声'$收入:'。 $ income。 ”; 回声'$ page:'。 $ page。 ”; 回声'$ form_id:'。 $ form_id。 ”; } [/源代码]

Make sure your function still has the closing “};” brace — it’s easy to copy and paste over the top of it. Missing one of these opening or closing braces or brackets can break your entire form, so work carefully.

确保您的函数仍然以“};”结尾 大括号-可以很容易地在其顶部复制和粘贴。 缺少这些打开或关闭括号或支架之一可能会破坏您的整个外形,因此请小心操作。

结论 (Conclusion)

Refresh your form and behold! We’re getting close! You’ve already got a two-page form that successfully collects data and stores it from page one to page two. That’s a huge first step.

刷新您的表格, 看看吧! 我们越来越近了! 您已经有两页的表单,可以成功收集数据并将其存储在第一页到第二页之间。 这是一个巨大的第一步。

In the next article, I’ll show you how to update the database with page two inputs and how to display an optional version of the form — one for males and one for females.

在下一篇文章中,我将向您展示如何使用第二页输入来更新数据库,以及如何显示该表格的可选版本-一个用于男性,一个用于女性。

For the sake of completeness, here’s the code we have so far:

为了完整起见,以下是我们到目前为止的代码:

[sourcecode language=”php”] add_shortcode(‘multipage_form_sc’,’multipage_form’); function multipage_form(){ global $wpdb; $this_page = $_SERVER[‘REQUEST_URI’]; $page = $_POST[‘page’]; if ( $page == NULL ) { echo ‘

[源代码语言=“ php”] add_shortcode('multipage_form_sc','multipage_form'); 函数multipage_form(){全局$ wpdb; $ this_page = $ _SERVER ['REQUEST_URI']; $ page = $ _POST ['page']; 如果($ page == NULL){echo'

<form action="’ . $this_page .’" method="post"><label id="first_name" for="first_name">First Name: </label> <input id="first_name" type="text" name="first_name" /> <label id="last_name" for="last_name">Last Name: </label> <input id="last_name" type="text" name="last_name" /> <label id="email" for="email">Email: </label> <input id="email" type="text" name="email" /> <label id="phone" for="phone">Phone: </label> <input id="phone" type="text" name="phone" /> <label id="first_name" for="first_name">Zip Code: </label> <input id="zip_code" type="text" name="zip_code" /> <input type="hidden" name="page" value="1" /> <input type="submit" /></form>’; }//End Page 1 of Form // Start Page 2 of Form elseif ( $page == 1 ) { $first_name = $_POST[‘first_name’]; $last_name = $_POST[‘last_name’]; $email = $_POST[’email’]; $phone = $_POST[‘phone’]; $zip_code = $_POST[‘zip_code’]; $page_one_table = ‘shopping_preferences’; $page_one_inputs = array( ‘first_name’ => $first_name, ‘last_name’ => $last_name, ’email’ => $email, ‘phone’ => $phone, ‘zip_code’ => $zip_code, ‘page’ => $page ); $insert_page_one = $wpdb->insert($page_one_table, $page_one_inputs); $form_id = $wpdb->insert_id; echo ‘

<form action =“'。$ this_page。'” method =“ post”> <label id =“ first_name” for =“ first_name”>名字:</ label> <input id =“ first_name” type =“ text” name =“ first_name” /> <label id =“ last_name” for =“ last_name”>姓氏:</ label> <input id =“ last_name” type =“ text” name =“ last_name” /> <label id = “ email” for =“ email”>电子邮件:</ label> <input id =“ email” type =“ text” name =“ email” /> <label id =“ phone” for =“ phone”>电话:< / label> <input id =“ phone” type =“ text” name =“ phone” /> <label id =“ first_name” for =“ first_name”>邮政编码:</ label> <input id =“ zip_code”类型=“ text” name =“ zip_code” /> <input type =“ hidden” name =“ page” value =“ 1” /> <input type =“ submit” /> </ form>'; } //结束表格的第1页//表格的开始第2页elseif($ page == 1){$ first_name = $ _POST ['first_name']; $ last_name = $ _POST ['last_name']; $ email = $ _POST ['email']; $ phone = $ _POST ['phone']; $ zip_code = $ _POST ['zip_code']; $ page_one_table ='shopping_preferences'; $ page_one_inputs = array('first_name'=> $ first_name,'last_name'=> $ last_name,'e​​mail'=> $ email,'phone'=> $ phone,'zip_code'=> $ zip_code,'page'=> $ page); $ insert_page_one = $ wpdb-> insert($ page_one_table,$ page_one_inputs); $ form_id = $ wpdb-> insert_id; 回声

<form action="’ . $this_page .’" method="post"><label id="gender" for="gender">Gender: </label></form><select name="gender"></select>Select GenderFemaleMale

<form action =“'。$ this_page。'” method =“ post”> <label id =“ gender” for =“ gender”>性别:</ label> </ form> <select name =“ gender”> < / select>选择性别女男性

<label id="age" for="age">Age: </label> <input id="age" type="text" name="age" /> <label id="education" for="education">Education: </label>

<label id =“ age” for =“ age”>年龄:</ label> <input id =“ age” type =“ text” name =“ age” /> <label id =“ education” for =“ education” >教育:</ label>

<select name="education"></select>Select Level of EducationSome High SchoolHigh School Diploma/GEDSome CollegeCollege DegreeSome Graduate SchoolGraduateSome Post GraduateDoctorate

<select name =“ education”> </ select>选择教育水平一些高中高中文凭/ GEDS一些大学学院学位一些研究生院研究生一些研究生研究生博士学位

<label id="income" for="income">Income: </label>

<label id =“ income” for =“ income”>收入:</ label>

<select name="income"></select>Select Income RangeLess than $10,000$10,000 – $25,000$25,000 – $50,000$50,000 – $75,000More than $75,000

<select name =“ income”> </ select>选择收入范围少于$ 10,000 $ 10,000 – $ 25,000 $ 25,000 – $ 50,000 $ 50,000 – $ 75,000超过$ 75,000

<input type="hidden" name="page" value="2" /> <input type="hidden" name="form_id" value="’ . $form_id . ‘" /> <input type="submit" />

<input type =“ hidden” name =“ page” value =“ 2” /> <input type =“ hidden” name =“ form_id” value =“'。$ form_id。'” /> <input type =“ submit” />

‘; }// End Page 2 of Form // Start Page 3 of Form elseif( $page == 2 ) { $gender = $_POST[‘gender’]; $age = $_POST[‘age’]; $education = $_POST[‘education’]; $income = $_POST[‘income’]; $page = $_POST[‘page’]; $form_id = $_POST[‘form_id’]; echo ‘$gender: ‘ . $gender . ”; echo ‘$age: ‘ . $age . ”; echo ‘$education: ‘ . $education . ”; echo ‘$income: ‘ . $income . ”; echo ‘$page: ‘ . $page . ”; echo ‘$form_id: ‘ . $form_id . ”; };// End Page 3 of Form }// End multipage_form() function [/sourcecode]

'; } //表格的第2页//表格的第3页elseif($ page == 2){$ gender = $ _POST ['gender']; $ age = $ _POST ['age']; $ education = $ _POST ['education']; $ income = $ _POST ['income']; $ page = $ _POST ['page']; $ form_id = $ _POST ['form_id']; 回声'$ gender:'。 $ gender。 ”; 回声'$ age:'。 $ age。 ”; 回声“ $教育:”。 $ education。 ”; 回声'$收入:'。 $ income。 ”; 回声'$ page:'。 $ page。 ”; 回声'$ form_id:'。 $ form_id。 ”; }; //结束表单的第3页} //结束multipage_form()函数[/ sourcecode]

翻译自: https://www.sitepoint.com/design-a-multi-page-form-in-wordpress-data-storage/

wordpress表单调用

最新回复(0)