表單一直是互聯網不可或缺的一部分。作為 wordpress 網站所有者,如果您希望用戶與您交流,您別無選擇,只能使用它們。然而,創建遵循最佳實踐并符合網站外觀的現代表單可能是一項艱巨的任務,尤其是在您不擅長編寫代碼的情況下。
幸運的是,現在 CodeCanyon 上提供了幾個功能強大的 WordPress 表單生成器,提供直觀的所見即所得界面和拖放支持。由 CodeCanyon 精英作者 nCrafts 開發的 FormCraft 就是這樣一種表單生成器。
FormCraft 是一款符合 GDPR 標準的高級 WordPress 插件,您可以使用它在幾分鐘內為您的網站創建漂亮的表單。它內置了大量高級功能,包括對 ajax 請求、觸發器、彈出消息甚至條件邏輯的支持。通過附加組件,它提供了額外的功能,例如與 mailChimp 和 reCAPTCHA 的集成。
在本教程中,我將向您展示如何安裝該插件并使用其一些最重要的功能。
1. 安裝 FormCraft
登錄您的 Envato 帳戶并前往 CodeCanyon,以便您可以購買使用 FormCraft 的許可證。它的銷量超過 16,000 件,是那里最受歡迎的商品之一。
成功購買后,您將可以訪問可用于安裝插件的 ZIP 文件。
登錄 WordPress 實例的管理面板并導航至插件 > 添加新插件。然后按上傳插件按鈕。在下一個屏幕上,首先按瀏覽…按鈕選擇 ZIP 文件,然后按立即安裝按鈕開始安裝。
請注意,插件的大小為 2.3MB。如果您的 WordPress 實例抱怨插件的大小超出了上傳文件允許的最大大小,則您必須增加 php.ini中的 upload_max_filesize 變量的值>?文件。
安裝插件后,按激活插件按鈕開始使用它。
2.使用模板創建表單
您的 WordPress 管理面板現在應該有一個名為 FormCraft 的新部分。打開它并按新建表單按鈕,以便您可以開始創建第一個表單。
在彈出的對話框中,選擇模板選項。由于 FormCraft 附帶了近十幾個針對常見表單類型精心設計的模板,因此使用模板是創建表單最簡單、最快捷的方法。
現在,讓我們創建一個聯系表單。因此,選擇任何聯系模板,為表單命名,然后按創建表單按鈕。我將使用聯系人 (2) 模板。
表單準備好后,您將自動重定向到可以編輯表單的界面。
使用 FormCraft 編輯表單非常簡單。通常,您所要做的就是單擊要更改的表單字段并更新其屬性。例如,如果您想更改名稱字段的標簽,請點擊它,然后在彈出的對話框中更新標簽屬性的值。
要關閉對話框,請單擊對話框外部的任意位置。
最后,當您對所有更改感到滿意時,可以按保存按鈕將其永久化。
3.顯示表單
您可以采用兩種不同的方法來顯示使用 FormCraft 創建的表單。第一種方法涉及使用專用的表單頁面,該頁面有自己唯一的 URL,除了表單之外不顯示任何內容。這種方法只需最少的努力,并且還可以讓您輕松共享表單。
默認情況下,FormCraft 會自動為每個表單創建專用的表單頁面。要確定您在上一步中創建的表單的網址,請點擊設置按鈕并切換到常規標簽。
第二種方法是將表單嵌入帖子或頁面中。這種方法更加靈活,因為它允許您隨表單一起顯示附加文本或圖像。
要嵌入 FormCraft 表單,您需要其簡碼。要了解它是什么,請轉至設置 > 嵌入 > 簡碼。
您使用 FormCraft 創建的每個表單都將有其獨特且易于記憶的短代碼。
此時,您可以創建一個新帖子并輸入短代碼以嵌入表單。以下是包含 FormCraft 表單的示例帖子:
4.處理表單提交
用戶填寫完您的表單后,他或她當然會提交該表單。您可以通過兩種不同的方式接收填寫的表格。第一種方法是從 WordPress 服務器接收電子郵件。它不需要編程,非常適合處理少量表單提交。
要以電子郵件形式接收提交的表單,請轉至設置 > 電子郵件 > 電子郵件設置。
FormCraft 可以使用默認 WordPress 郵件設置或使用自定義 SMTP 配置發送電子郵件。通常,默認設置就足夠了。因此,請切換到 WP Mail 標簽,然后根據您的偏好填寫發件人姓名和發件人電子郵件字段。您可能已經猜到,您在此處提供的電子郵件地址將是您接收所有表單提交的電子郵件地址。
接下來,展開電子郵件通知部分。在這里,您必須提供所有填寫的表格必須發送到的電子郵件地址。請隨意使用您之前輸入的同一電子郵件地址。
保留其余配置不變,然后按保存按鈕。
您的第一個表單提交處理程序已準備就緒。從現在起,每當用戶提交您的表單時,您都會收到一封電子郵件。
但是,如果您認為自己將收到數千份表單提交,那么采用更具編程性的方法會更好。 FormCraft 可以將提交的表單數據發送到您指定的任何自定義 URL。如果您想采用此方法,請轉到設置 > 常規并輸入您的自定義網址。此外,如果您希望接收 json 文檔形式的提交表單,請啟用 POST (JSON) 選項。
使用什么邏輯來處理自定義 URL 上的表單提交取決于您。以下示例代碼向您展示如何將每個提交保存為服務器文件系統上具有唯一名稱的文件:
<?php $file_name = 'wp-content/submissions/' . md5(uniqid(rand(), true)); file_put_contents($file_name, file_get_contents('php://input'));
使用上面的代碼,每個表單提交都將保存在一個文件中,其內容如下所示:
{ "": "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. 創建自定義表單
如果您認為沒有一個內置模板符合您的要求,您可以繼續從頭開始創建一個新表單。為了舉一個實際的例子,我們現在創建一個允許用戶提交電影評論的表單。
首先轉到 FormCraft 儀表板并再次按新建表單按鈕。
這一次,選擇空白選項,為表單命名,然后按創建表單按鈕。
您現在將看到一個沒有表單字段的空白畫布。默認情況下,其寬度設置為 420 px 。如果您不希望它具有固定寬度,您可以隨意將其更改為百分比值。
接下來,按添加字段按鈕添加您的第一個表單字段。
如您所見,FormCraft 提供了超過 15 種不同類型的表單字段供您選擇。
要向表單添加標題,請點擊標題字段。添加標題后,單擊它可以修改其屬性。
在彈出的對話框中,您可以更改字段顯示的文本、調整其填充、更改其字體,甚至為其指定背景顏色。
接下來,要接受電影名稱,請點擊添加字段按鈕并選擇單行輸入選項。
單擊新添加的字段以打開其屬性對話框。在這里,為該字段提供適當的標簽和子標簽。如果需要,您可以點擊圖標屬性以在字段旁邊顯示一個圖標。
為確保您的用戶不會將該字段留空,請檢查必填字段屬性。此外,由于電影名稱可以包含空格,因此請選中允許空格字段。
使用最小字符數和最大字符數屬性,您還可以控制用戶輸入文本的長度。
單擊屬性對話框外部的任意位置將其關閉。然后選擇添加字段 > 調查 > 星級。顧名思義,此字段將允許您的用戶為電影評分。
同樣,要允許用戶輸入他們對電影的看法,請添加一個文本區域表格。
最后,選擇添加字段 > 提交以向表單添加提交按鈕。如果您希望按鈕變寬,請選中寬按鈕選項。
此時,您的自定義表單已準備就緒。點擊保存按鈕進行保存。
要查看它,您可以直接訪問其專用表單頁面,您可以通過設置 > 常規來確定其 URL。
表單如下所示:
結論
在本教程中,您學習了如何使用 FormCraft WordPress 插件為您的 WordPress 網站創建基于模板的表單和自定義表單。只需發揮一點創造力,您現在就可以快速創建表單來執行基本任務,例如收集電子郵件地址、進行調查或測驗以及接受預訂。
FormCraft 附帶其作者六個月的免費支持。如果您在使用時遇到任何問題,請使用 CodeCanyon 上的評論頁面來獲取幫助。
如果您想了解有關表單插件的更多信息,請查看 Envato Tuts+ 上有關 WordPress 表單插件的其他一些帖子。