表單一直是網(wǎng)路不可或缺的一部分。作為 WordPress 網(wǎng)站所有者，如果您希望用戶與您交流，您別無選擇，只能使用它們。然而，創(chuàng)建遵循最佳實(shí)踐並符合網(wǎng)站外觀的現(xiàn)代表單可能是一項(xiàng)艱鉅的任務(wù)，尤其是在您不擅長編寫程式碼的情況下。

幸運(yùn)的是，現(xiàn)在 CodeCanyon 上提供了幾個(gè)功能強(qiáng)大的 WordPress 表單產(chǎn)生器，提供直覺的所見即所得介面和拖放支援。由 CodeCanyon 精英作者 nCrafts 開發(fā)的 FormCraft 就是這樣一種表單產(chǎn)生器。

#FormCraft 是一款符合 GDPR 標(biāo)準(zhǔn)的高級 WordPress 插件，您可以使用它在幾分鐘內(nèi)為您的網(wǎng)站建立漂亮的表單。它內(nèi)建了大量高級功能，包括對 AJAX 請求、觸發(fā)器、彈出訊息甚至條件邏輯的支援。透過附加元件，它提供了額外的功能，例如與 MailChimp 和 reCAPTCHA 的整合。

#在本教程中，我將向您展示如何安裝該插件並使用其一些最重要的功能。

#1. 安裝 FormCraft

#登入您的 Envato 帳戶並前往 CodeCanyon，以便您可以購買使用 FormCraft 的授權(quán)。它的銷量超過 16,000 件，是那裡最受歡迎的商品之一。

成功購買後，您將可以存取可用於安裝外掛程式的 ZIP 檔案。

登入 WordPress 實(shí)例的管理面板並導(dǎo)覽至外掛程式 > 新增外掛程式。然後按下上傳外掛程式按鈕。在下一個(gè)畫面上，首先按瀏覽...按鈕選擇 ZIP 文件，然後按立即安裝按鈕開始安裝。

請注意，外掛程式的大小為 2.3MB。如果您的 WordPress 實(shí)例抱怨外掛程式的大小超出了上傳檔案允許的最大大小，則您必須增加 php.ini中的 upload_max_filesize 變數(shù)的值>?檔案。

#安裝外掛後，按下啟動(dòng)外掛程式按鈕開始使用它。

#2.使用範(fàn)本建立表單

您的 WordPress 管理面板現(xiàn)在應(yīng)該有一個(gè)名為 FormCraft 的新部分。打開它並按下新表單按鈕，以便您可以開始建立第一個(gè)表單。

在彈出的對話方塊中，選擇範(fàn)本選項(xiàng)。由於 FormCraft 附帶了近十幾個(gè)針對常見表單類型精心設(shè)計(jì)的模板，因此使用模板是建立表單最簡單、最快捷的方法。

現(xiàn)在，讓我們建立一個(gè)聯(lián)絡(luò)表單。因此，選擇任何聯(lián)繫模板，為表單命名，然後按建立表單按鈕。我將使用聯(lián)絡(luò)人 (2) 範(fàn)本。

表單準(zhǔn)備好後，您將自動(dòng)重定向到可以編輯表單的介面。

使用 FormCraft 編輯表單非常簡單。通常，您所要做的就是按一下要變更的表單欄位並更新其屬性。例如，如果您想要變更名稱欄位的標(biāo)籤，請點(diǎn)擊它，然後在彈出的對話方塊中更新標(biāo)籤屬性的值。

要關(guān)閉對話框，請點(diǎn)選對話框外部的任何位置。

最後，當(dāng)您對所有變更感到滿意時(shí)，可以按儲(chǔ)存按鈕將其永久化。

3.顯示表單

您可以採用兩種不同的方法來顯示使用 FormCraft 建立的表單。第一種方法涉及使用專用的表單頁面，該頁面有自己唯一的 URL，除了表單之外不顯示任何內(nèi)容。這種方法只需最少的努力，並且還可以讓您輕鬆共享表單。

預(yù)設(shè)情況下，F(xiàn)ormCraft 會(huì)自動(dòng)為每個(gè)表單建立專用的表單頁面。若要確定您在上一個(gè)步驟中建立的表單的網(wǎng)址，請點(diǎn)選設(shè)定按鈕並切換到常規(guī)標(biāo)籤。

第二種方法是將表單嵌入文章或頁面中。這種方法更加靈活，因?yàn)樗试S您隨表單一起顯示附加文字或圖像。

要嵌入 FormCraft 表單，您需要其簡碼。要了解它是什麼，請前往設(shè)定 > 嵌入 > 簡碼。

您使用 FormCraft 建立的每個(gè)表單都將有其獨(dú)特且易於記憶的短程式碼。

此時(shí)，您可以建立一個(gè)新貼文並輸入短代碼以嵌入表單。以下是包含 FormCraft 表單的範(fàn)例貼文：

4.處理表單提交

使用者填寫完您的表單後，他或她當(dāng)然會(huì)提交該表單。您可以透過兩種不同的方式接收填寫的表格。第一種方法是從 WordPress 伺服器接收電子郵件。它不需要編程，非常適合處理少量表單提交。

要以電子郵件形式接收提交的表單，請前往設(shè)定 > 電子郵件 > 電子郵件設(shè)定。

FormCraft 可以使用預(yù)設(shè) WordPress 郵件設(shè)定或使用自訂 SMTP 設(shè)定發(fā)送電子郵件。通常，預(yù)設(shè)設(shè)定就足夠了。因此，請切換到 WP Mail 標(biāo)籤，然後根據(jù)您的偏好填寫寄件者姓名和寄件者電子郵件欄位。您可能已經(jīng)猜到，您在此處提供的電子郵件地址將是您接收所有表單提交的電子郵件地址。

接下來，展開電子郵件通知部分。在這裡，您必須提供所有填寫的表格必須發(fā)送到的電子郵件地址。請隨意使用您之前輸入的相同電子郵件地址。

保留其餘配置不變，然後按儲(chǔ)存按鈕。

您的第一個(gè)表單提交處理程序已準(zhǔn)備就緒。從現(xiàn)在起，每當(dāng)使用者提交您的表單時(shí)，您都會(huì)收到一封電子郵件。

但是，如果您認(rèn)為自己將收到數(shù)千份表單提交，那麼採用更具程式設(shè)計(jì)的方法會(huì)更好。 FormCraft 可以將提交的表單資料傳送到您指定的任何自訂 URL。如果您想採用此方法，請前往設(shè)定 > 常規(guī)並輸入您的自訂網(wǎng)址。此外，如果您希望接收 JSON 文件形式的提交表單，請啟用 POST (JSON) 選項(xiàng)。

使用什麼邏輯來處理自訂 URL 上的表單提交取決於您。以下範(fàn)例程式碼向您展示如何將每個(gè)提交儲(chǔ)存為伺服器檔案系統(tǒng)上具有唯一名稱的檔案：

<?php
$file_name = 'wp-content/submissions/' . md5(uniqid(rand(), true));
file_put_contents($file_name, file_get_contents('php://input'));

使用上面的程式碼，每個(gè)表單提交都會(huì)保存在一個(gè)檔案中，其內(nèi)容如下所示：

{
    "": "1",
    "Describe the Issue": "This is awesome!",
    "Email": "alice@example.com",
    "Entry ID": 4,
    "Full Name": "Alice K.",
    "Reason for Contact": "Feedback",
    "Text Field": ""
}

5. 建立自訂表單

如果您認(rèn)為沒有一個(gè)內(nèi)建範(fàn)本符合您的要求，您可以繼續(xù)從頭開始建立一個(gè)新表單。為了舉一個(gè)實(shí)際的例子，我們現(xiàn)在創(chuàng)建一個(gè)允許用戶提交電影評論的表單。

先到 FormCraft 儀表板並再次按下新表單按鈕。

這次，選擇空白選項(xiàng)，為表單命名，然後按建立表單按鈕。

您現(xiàn)在將看到一個(gè)沒有表單欄位的空白畫布。預(yù)設(shè)情況下，其寬度設(shè)定為 420 px 。如果您不希望它具有固定寬度，您可以隨意將其變更為百分比值。

接下來，按新增欄位按鈕新增您的第一個(gè)表單欄位。

如您所見，F(xiàn)ormCraft 提供了超過 15 種不同類型的表單欄位供您選擇。

要為表單新增標(biāo)題，請點(diǎn)選標(biāo)題欄位。新增標(biāo)題後，按一下它可以修改其屬性。

在彈出的對話方塊中，您可以變更欄位顯示的文字、調(diào)整其填充、變更其字體，甚至為其指定背景顏色。

接下來，要接受電影名稱，請點(diǎn)擊新增欄位按鈕並選擇單行輸入選項(xiàng)。

按一下新新增的欄位以開啟其屬性對話方塊。在這裡，為該欄位提供適當(dāng)?shù)臉?biāo)籤和子標(biāo)籤。如果需要，您可以點(diǎn)擊圖示屬性以在欄位旁邊顯示圖示。

為確保您的使用者不會(huì)將該欄位留空，請檢查必填欄位屬性。此外，由於電影名稱可以包含空格，因此請選取允許空格欄位。

使用最小字元數(shù)和最大字元數(shù)屬性，您也可以控制使用者輸入文字的長度。

點(diǎn)選屬性對話方塊外部的任意位置將其關(guān)閉。然後選擇新增欄位 > 調(diào)查 > 星級。顧名思義，此欄位將允許您的用戶為電影評分。

同樣，要允許使用者輸入他們對電影的看法，請新增一個(gè)文字區(qū)域表格。

最後，選擇新增欄位 > 提交以向表單新增提交按鈕。如果您希望按鈕變寬，請選取寬按鈕選項(xiàng)。

此時(shí)，您的自訂表單已準(zhǔn)備就緒。點(diǎn)選儲(chǔ)存按鈕進(jìn)行儲(chǔ)存。

要查看它，您可以直接訪問其專用表單頁面，您可以透過設(shè)定 > 常規(guī)來確定其 URL。

表單如下圖所示：

結(jié)論

#在本教學(xué)中，您學(xué)習(xí)如何使用 FormCraft WordPress 外掛程式為您的 WordPress 網(wǎng)站建立基於範(fàn)本的表單和自訂表單。只需發(fā)揮一點(diǎn)創(chuàng)造力，您現(xiàn)在就可以快速建立表單來執(zhí)行基本任務(wù)，例如收集電子郵件地址、進(jìn)行調(diào)查或測驗(yàn)以及接受預(yù)訂。

FormCraft 附帶其作者六個(gè)月的免費(fèi)支援。如果您在使用時(shí)遇到任何問題，請使用 CodeCanyon 上的評論頁面來取得協(xié)助。

如果您想了解有關(guān)表單外掛程式的更多信息，請查看 Envato Tuts 上有關(guān) WordPress 表單外掛程式的其他一些帖子。