wordpress表单调用_在WordPress中设计多页表单：简介

wordpress表单调用

Have you ever found yourself needing to create a custom, multiple-page form in WordPress? I do… all the time! While you can use a variety of plugins to get the job done, they’re rarely perfect for your purposes. I’ve found that the easiest way for me to get everything right — from the forms to the data to the reporting — is to simply create these from scratch myself.

您是否曾经发现自己需要在WordPress中创建自定义的多页表单？ 我一直在…… 虽然您可以使用各种插件来完成工作，但它们很少能完美满足您的目的。 我发现对我来说，使所有事情都正确无误的最简单方法(从表单到数据再到报表)是简单地自己创建这些。

In this series of articles, I will walk you through the process of creating multiple page forms from scratch. Believe it or not, it’s fairly straightforward if you understand some basic PHP and know your HTML form basics. (If you’re a PHP veteran or interested in becoming one, you should head over to our PHP partner site, PHPMaster.com)

在本系列文章中，我将引导您完成从头开始创建多个页面表单的过程。 信不信由你，如果您了解一些基本PHP并且了解您HTML表单基础知识，这将是相当简单的。 (如果您是PHP的资深人士或有兴趣成为一名PHP资深人士，则应转到我们PHP合作伙伴网站PHPMaster.com )

We’ll be using the POST method to pass information from the form back to itself and IF statements in PHP to display the next part of the form. As the users submit form data, the page will update with the next page of the form, storing the submitted information as it goes.

我们将使用POST方法将信息从表单传递回自身和PHP中的IF语句，以显示表单的下一部分。 当用户提交表单数据时，页面将更新为表单的下一页，并保存提交的信息。

The result is that users stay on the same page, and you can conditionally — even dynamically — generate the next page of the form based upon their answers. Or, you could just keep the form fields static for simplicity’s sake.

结果是用户停留在同一页面上，并且您可以有条件地甚至动态地根据其答案生成表单的下一页。 或者，为简单起见，您可以仅将表单字段保持为静态。

为什么要使用多页表单？ (Why a Multi-Page Form?)

There are lots of reasons why you might need a multi-page form. In some cases, you might not want more than 3-5 questions per page. In other cases, you might want to only collect additional information based upon their initial responses. For example, if the user indicates that they’re under 18, you may not want to ask certain questions, or you might want to display a different form based upon male or female respondents.

有很多原因可能导致您需要多页表单。 在某些情况下，您可能希望每页不超过3-5个问题。 在其他情况下，您可能只想根据其最初的响应收集其他信息。 例如，如果用户指示他们未满18岁，则您可能不想问某些问题，或者您可能想根据男性或女性受访者显示其他表格。

Further, a multiple-page form allows you to collect information in stages. If users abandon the questionnaire for whatever reason, you’ve collected at least some information that might be useful. Form abandonment is common, and multi-page form collection gives you critical data, such as where forms get abandoned most often, basic contact info from the user for follow-up, etc.

此外，多页表单使您可以分阶段收集信息。 如果用户出于任何原因放弃问卷，则您至少已收集了一些有用的信息。 表单遗弃很常见，多页表单收集为您提供关键数据，例如最常丢弃表单的位置，用户的基本联系信息等。

案例分析 (Case Study)

For planning purposes, I’ll be collecting basic information on users and their shopping preferences. So, here’s how our form will progress:

出于计划目的，我将收集有关用户及其购物偏好的基本信息。 因此，这是我们表格的进展方式：

• Page 1 – Basic contact info

  第1页–基本联系信息

  • Name (first and last),
    名称(名字和姓氏)，
  • Email,
    电子邮件，
  • Phone,
    电话，
  • Zip code
    邮政编码

• Page 2 – Socioeconomic data

  第2页–社会经济数据

  • Gender
    性别
  • Age
    年龄
  • Education
    教育
  • Income
    收入

• Page 3 – Shopping Preferences

  第3页–购物偏好

  • Location (online, store)
    位置(在线，商店)
  • Favorite Categories
    最喜欢的类别
• Page 4 – “Thank You!” landing page
  第4页–“谢谢！” 登陆页面

I’ll be setting this up in our functions.php file, which is fine for testing, but when you’re ready to make this live on your site, you should consider making this a plugin or at a minumum separating this code from your functions.php file and using an include_once statement to link the files in your functions.php doc.

我将在我们的functions.php文件中进行设置，该文件可以很好地进行测试，但是当您准备在网站上实现此功能时，您应该考虑将其制作为插件，或者至少将此代码与您的代码分开functions.php文件，并使用include_once语句将这些文件链接到functions.php文档中。

Part of my rationale for this method is to avoid having to delve into FTP and other less pertinent methods of creating custom functionality in WordPress. So, for you veterans, just bear with my less-than-ideal methods.

我使用此方法的部分原因是避免深入研究FTP和其他在WordPress中创建自定义功能的方法。 因此，对于您的退伍军人，请忍受我的不理想方法。

步骤1：设定简码 (Step 1: Set up a Shortcode)

This is optional, but it sure makes it easier for me to use shortcodes to display these multi-page forms. So, that’s the method I’ll teach, and you can implement your own if you prefer.

这是可选的，但可以肯定的是，它使我更容易使用短代码显示这些多页表单。 因此，这就是我要教的方法，您可以根据需要实现自己的方法。

In your functions.php file, add the following:

在您的functions.php文件中，添加以下内容：

[sourcecode language=”php”] add_shortcode(‘multipage_form_sc’,’multipage_form’); function multipage_form(){ echo ‘<h3>New Form</h3>’; }; [/sourcecode]

[源代码语言=“ php”] add_shortcode('multipage_form_sc'，'multipage_form'); 函数multipage_form(){echo'<h3> New Form </ h3>'; }; [/源代码]

This lets WordPress know that you can put the shortcode multipage_form_sc into a post or page, and that WordPress should execute the function multipage_form when it finds the shortcode. Because I often have several multi-page forms that I’ll use for a given site, I give these forms unique names, for example, multipage_form_userinfo_sc and its corresponding function multipage_form_userinfo.

这使WordPress知道可以将简码multipage_form_sc放入帖子或页面中，并且WordPress在找到简码时应执行函数multipage_form。 因为我经常在给定站点上使用几种多页表单，所以我给这些表单指定了唯一的名称，例如multipage_form_userinfo_sc及其对应的函数multipage_form_userinfo。

步骤2：建立文章或专页 (Step 2: Set up a Post or Page)

Create the new post or page on which you want your multiple-page form to exist. Insert the shortcode into the form, publish it, and view the page. You should see the “New Form” message we created in our multipage_form() function.

创建您希望多页表单存在的新帖子或页面。 将简码插入表单，进行发布，然后查看页面。 您应该看到我们在multipage_form()函数中创建的“ New Form”消息。

Here’s what your shortcode should look like within your post/page editor:

这是您的帖子/页面编辑器中的简码应如下所示：

[multipage_form_sc]

步骤3：第一个表单元素 (Step 3: First Form Elements)

Let’s jump into creating the first form elements. I will be keeping this incredibly simple for the sake of focusing on the concepts of multi-page forms, not CSS or other eye-candy that we can delve into later.

让我们开始创建第一个表单元素。 为了使重点放在多页表单的概念上，而不是我们稍后可以研究CSS或其他令人眼花乱的内容，我将使其保持极其简单的状态。

So, here’s our basic information you can paste into your multipage_form() function:

因此，这是我们的基本信息，您可以将其粘贴到multipage_form()函数中：

[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 ‘<form method="post" action="’ . $this_page .’"> <label for="first_name" id="first_name">First Name: </label> <input type="text" name="first_name" id="first_name" /> <label for="last_name" id="last_name">Last Name: </label> <input type="text" name="last_name" id="last_name" /> <label for="email" id="email">Email: </label> <input type="text" name="email" id="email" /> <label for="phone" id="phone">Phone: </label> <input type="text" name="phone" id="phone" /> <label for="first_name" id="first_name">Zip Code: </label> <input type="text" name="zip_code" id="zip_code" /> <input type="hidden" value="1" name="page" /> <input type="submit" /> </form>’; }//End Page 1 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’]; echo ‘<h3>You made it to the 2nd page!</h3> <p>Here are your form inputs: </p> <p>First Name: ‘ . $first_name . ‘</p> <p>Last Name: ‘ . $last_name . ‘</p> <p>Email: ‘ . $email . ‘</p> <p>Phone: ‘ . $phone . ‘</p> <p>Zip Code: ‘ . $zip_code . ‘</p>’; }//End Page 2 of Form }; [/sourcecode]

[源代码语言=“ php”] add_shortcode('multipage_form_sc'，'multipage_form'); 函数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> <输入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” /> </ form>'; } //结束其他形式的第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>您已进入第二页！</ h3> <p>以下是您的表单输入：</ p> <p>名字：'。 $ first_name。 '</ p> <p>姓氏：'。 $ last_name。 '</ p> <p>电子邮件：'。 $ email。 </ p> <p>电话：。 $ phone。 '</ p> <p>邮政编码：'。 $ zip_code。 '</ p>'; } //结束表格的第2页}; [/源代码]

That’s a lot of code, so let’s hit the highlights.

这是很多代码，所以让我们重点介绍一下。

First, we have our initial POST statements we’re looking for — $this_page is the page we’re currently on for our form handling, and the $page is the page number. I’m using “1” for page one, “2” for page two, etc. Once we store this information, we’ll have a record of the page number completed. We’ll also use the page number to test which page of the form we’re on and display information accordingly.

首先，我们要查找初始的POST语句-$ this_page是我们当前用于表单处理的页面，而$ page是页面编号。 我在第一页上使用“ 1”，在第二页上使用“ 2”，依此类推。一旦我们存储了此信息，我们将记录下完成的页码。 我们还将使用页码来测试我们所在表单的哪一页，并相应地显示信息。

Next, we have our first IF statement that tests which page number we’re on. If it’s blank (NULL), we display the first page of the form. That’s where we have our basic form elements — labels and inputs. I included the hidden form value for the page number, but you can also add all kinds of extra hidden form fields to collect the username (if they’re logged in), as well as other information you may want.

接下来，我们有第一个IF语句，用于测试我们所在的页码。 如果为空白(NULL)，则显示表单的第一页。 那就是我们拥有基本表单元素的地方-标签和输入。 我包括了页码的隐藏表单值，但是您还可以添加各种其他隐藏表单字段以收集用户名(如果已登录)以及您可能需要的其他信息。

After that, we have page two information starting with the ELSEIF statement. We’ll continue down this path of ELSEIF statements for form data handling and display. You can use the SWITCH statement if you have many, many pages, but the IF format works just fine for us in this scenario.

之后，我们从ELSEIF语句开始有了第二页信息。 我们将沿着ELSEIF语句的此路径继续进行表单数据处理和显示。 如果您有很多页面，则可以使用SWITCH语句，但是在这种情况下，IF格式对我们来说很好用。

On page two, we grab the form inputs and display them for testing purposes. In the next article, we will actually store this information within a database table and display the next page of the form.

在第二页上，我们获取表单输入并显示它们以进行测试。 在下一篇文章中，我们实际上会将这些信息存储在数据库表中，并显示表单的下一页。

试试看 (Try it Out)

Save your functions.php file with the above code (don’t miss anything; a single misplaced semi-colon or brace will crash your site!) Go to the post or page you created in Step 2, fill out page one of the form, and click the “Submit” button. Voila!

使用上面的代码保存您的functions.php文件(不要错过任何内容；单个错位的分号或花括号将使您的网站崩溃！)转到您在步骤2中创建的帖子或页面，填写表格之一，然后单击“提交”按钮。 瞧！

接下来的是！ (Coming Up Next!)

In the next installment of this series, we’re going to jump into phpMyAdmin and create a table in the database to start storing all this wonderful information we’re collecting. Don’t worry, I’ll keep it very basic and will even write the MySQL scripts for you if you’re brand new to that side of things.

在本系列的下一部分中，我们将跳入phpMyAdmin并在数据库中创建一个表，以开始存储所有我们收集的精彩信息。 不用担心，如果您是这方面的新手，我会保持非常基础，甚至会为您编写MySQL脚本。

Did you know that we have an entire website dedicated to PHP mastery? Check out our partner site at PHPMaster.com.

您是否知道我们拥有致力于PHP掌握的整个网站 ？ 请访问我们的合作伙伴网站PHPMaster.com 。

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

wordpress表单调用