在5分鐘內構建自己的WordPress聯繫表插件

鑰匙要點

• >開發自己的WordPress聯繫表插件可以幫助您更好地了解WordPress的工作方式，提高網絡開發技能並創建一個在沒有不必要功能的情況下根據您的特定需求量身定制的表單。
>本文提供了有關如何為WordPress創建簡單的，非斑點的聯繫表插件的分步指南，包括如何編寫PHP代碼，向表單添加基本驗證，並將表單數據發送到網站管理員的電子郵件地址。
• 通過在WordPress儀表板的“插件”部分中啟動它，可以輕鬆地集成到任何WordPress網站中，並將提供的短代碼添加到帖子或頁面。
>
• >本文還討論了WordPress插件目錄中可用的一些流行的免費聯繫表插件，例如聯繫表7，聯繫電子郵件的聯繫表，formget Contact表單和BestWebSoft Contact表格。
• >大多數網站通常設計為符合標準的Web實踐，其中包括一個專用頁面所在的專用頁面。這為訪問者提供了一種與網站所有者聯繫的簡便方法。
>

>簡單地說，聯繫表具有一組問題和字段，這些問題和字段由訪客填寫。該信息通常會通過電子郵件自動發送到網站管理員或其他提名的電子郵件帳戶。值得注意的是，此電子郵件地址沒有向訪問者展示，因此使用聯繫表通常會減少從互聯網上收穫裸露電子郵件地址的機器人中的電子郵件垃圾郵件。聯繫表在網站上扮演著非常重要的角色，它們用於收集用戶的反饋，查詢和其他數據。

>

如果您的網站由WordPress提供動力，則有許多插件無縫地集成了您的網站上的聯繫表。

在本文中，我將提供一些免費的WordPress聯繫表插件的列表。我還將討論為什麼您應該考慮滾動自己的聯繫表。然後，我將為您提供一個簡短的教程，向您展示如何構建自己的WordPress聯繫表格插件。

WordPress聯繫表插件

>在開始之前，我們將介紹WordPress插件目錄中提供的一些流行的免費觸點插件。這些非常適合使用，但是當您開始構建自己的插件時，甚至可以從中學習。

>

>下面是WordPress的一些最高評級的免費觸點表插件：>

>

聯繫表7 - 這是第二個最受歡迎的插件，下載超過1800萬個插件，幾乎可以被視為WordPress網站的事實上的聯繫表格插件。聯繫表7可以管理多個聯繫表格，您可以使用簡單的標記自定義表格和電子郵件內容。表單功能包括Ajax驅動的提交，CAPTCHA，AKISMET垃圾郵件過濾等等。

>

>

>電子郵件表格- 此插件不僅創建聯繫表格並將數據發送到指定的電子郵件地址，還將聯繫表格數據保存到數據庫中，提供可打印的報告，並將所選數據導出到csv/excel文件。

>

> Formget聯繫表格 - 簡單的在線拖放聯繫人表單構建器工具。您需要做的就是單擊您所需的字段，並在幾秒鐘內您的聯繫表格準備就緒。

BestWebsoft聯繫表格 - 允許您輕鬆地將反饋表實現到網頁或帖子。這非常容易，即使有一些可以玩的方法。

為什麼要滾動您自己的聯繫表插件？

>

成為更好的開發人員

>開發自己的WordPress插件可以幫助您更好地了解WordPress的“引擎蓋下”的工作方式，從而可以幫助您成為一個經驗豐富的Web開發人員。雖然WordPress插件目錄中有成千上萬的插件要使用，但能夠修改和擴展其他插件是一項非常有用的技能。

構建更好的形式

許多WordPress觸點表插件被腫了。它們包含許多您可能永遠不會使用的功能。 JavaScript和CSS文件的大量使用在某些標準觸點表插件中也很常見。這增加了對WordPress性能的不利影響的HTTP請求的數量。

>

根據雅虎的績效規則：

最終用戶響應時間的80％用於前端。大部分時間都捆綁在頁面中的所有組件中：圖像，樣式表，腳本，閃存等。減少組件的數量又減少了呈現頁面所需的HTTP請求數量。這是更快頁面的關鍵。

>

如果您像我一樣，並且想要一個簡單的觸點表格插件，該插件剛剛起作用，請繼續閱讀。我將指導您開發自己的插件的簡單過程，以便您可以親吻Goodbye Bloated插件。在此示例中，不需要額外的CSS和JavaScript文件，使用HTML5進行驗證。

聯繫表格插件開發

>在五分鐘內，您將學習如何開發簡單的WordPress聯繫表格，這是一個承諾！

>

準備了嗎？放？走！

>所有WordPress pluigns都是PHP文件，位於/wp-content/plugins/Directory中。在我們的示例中，該文件將稱為SP-form-example.php。我認為您喜歡使用FTP/SFTP/SCP或SSH連接到服務器。

>

如果您想關注，只需創建一個稱為SP-Form-example.php的文件（最終的完整示例將在文章的末尾可用）：

>

接下來，我們添加包含聯繫人表格html的函數html_form_code（）

通過模式輸入屬性添加了基本驗證。

>

觸點表中的正則表達式進行以下字段驗證：>

• [A-ZA-Z0-9]：名稱字段中僅允許的字母，空格和數字；特殊符號被視為無效。

• [A-ZA-Z]：主題字段中只允許字母和空格。

  >

  電子郵件表單控件驗證了電子郵件字段，因此不需要模式屬性。

• 有關此操作方式的更多信息，請閱讀我有關使用HTML5的客戶端形式驗證的文章，以了解模式屬性如何通過表單驗證進行有助於。
快點！

好吧，我們剩下幾分鐘？四分鐘！我們仍然有時間解決這個問題。

>函數funderive_mail（）對錶單數據進行了消毒，並將郵件發送到WordPress管理員的電子郵件地址。

表單數據的衛生性是由以下WordPress內部功能完成的：

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

sanitize_text_field（）：從用戶輸入中消毒數據。

>

：刪除電子郵件中不允許的所有字符。

> enc_textarea（）：逃脫

消息

文本區域值。

>

代碼get_option（'admin_email'）從數據庫中編程地檢索WordPress管理員的電子郵件地址，該電子郵件將發送到。 不希望聯繫表將郵件發送到管理員？只需將變量$設置為所需的電子郵件地址即可。

>如果函數WP_Mail（）函數成功處理了電子郵件，則文本

感謝您與我聯繫，希望很快會顯示，否則會出現意外錯誤 1分鐘和30秒左

>函數cf_shortcode（）是當觸點表單快速代碼[sitepoint_contact_form]處於活動狀態時所調用的回調函數。

> >以上函數調用html_form_code（）和evry_mail（）函數以顯示觸點表單HTML表單並分別驗證表單數據。 >最後，將快速代碼[sitepoint_contact_form]註冊到WordPress。因此，簡單地添加：

3、2、1…時間到了！

>

恭喜，我們已經成功地開發了自己的WordPress聯繫表插件，我履行了我較早的諾言。

>

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

現在，要在網站上使用此插件，只需在WordPress儀表板的“插件”部分中激活它，然後創建一個帖子或頁面，然後只需添加您希望表單出現的短代碼[sitepoint_contact_form] 。

如果您然後預覽頁面，則應看到顯示的聯繫表格如下所示。

結論

>進一步了解插件的構建方式以及如何在WordPress站點上實現，請複制下面的代碼，將其粘貼到文件中，然後將其上傳到您的/wp-content/plugins/Directory。

這是整個插件示例：

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

這只是一個簡單的示例。如果您有興趣了解有關插件開發的更多信息，則可以進一步推薦閱讀：>

>簡單的WordPress管理插件（教程）

• > WordPress小部件插件（教程）
• >官方WordPress codex插件開發人員文檔
• sitepoint php頻道
>讓我在評論中知道您的想法和問題。

>關於構建自己的WordPress聯繫表插件的常見問題（常見問題解答）

>創建自己的WordPress聯繫表插件有什麼好處？

>創建自己的WordPress聯繫表插件可讓您完全控製表單的設計，功能和數據處理。您可以自定義表格以匹配您網站的美學，添加滿足您特定需求的獨特字段，並以適合您業務運營的方式管理收集的數據。此外，它消除了對第三方插件的需求，有時可能會減慢您的網站或帶來安全風險。

>

>我是否需要編碼技能來創建WordPress Contact表單插件？ ，需要PHP，HTML和CSS的基本知識才能創建WordPress聯繫表插件。但是，在我們的指南中簡化了該過程，即使對於初學者來說，該過程也可以訪問。如果您對編碼不滿意，則有許多WordPress表單構建器插件可提供更具用戶友好的拖放界面。

>我如何確保我的自定義WordPress聯繫方式的安全性？

為了確保您的自定義WordPress聯繫表的安全性，您應該實施諸如數據驗證和消毒之類的措施，使用Nonces進行表單提交以及使用CAPTCHA或類似垃圾郵件的保護技術。定期更新和監視對於維護表單的安全性也至關重要。

我可以在我的WordPress聯繫表中添加自定義字段嗎？添加自定義字段的能力。這可以從簡單的文本輸入到更複雜的字段，例如文件上傳，日期選擇器，甚至自定義下拉列表。該過程涉及修改表格的HTML並在PHP代碼中適當處理數據。

>

>如何設置我的WordPress聯繫表格以匹配我的網站的設計？您可以在表單元素中添加自定義類，並在主題的CSS文件或自定義CSS插件中定義樣式。這使您可以控製表單的顏色，字體，佈局等。

>

>如何處理通過我的WordPress觸點表單提交的數據？

>通過WordPress Contact Contact表格提交的數據可以根據您的需求，以各種方式處理。您可以將數據發送到電子郵件地址，將其存儲在WordPress數據庫中，甚至可以與CRM Systems或電子郵件營銷平台等第三方服務集成。這需要其他PHP編碼來處理表單提交。

>我可以創建一個多步wordpress觸點表單嗎？

是的，創建一個多步wordpress觸點表單是可能的，但需要更高級編碼。這涉及創建多個表單頁面，並使用會話或隱藏字段在步驟之間管理數據。多步表格可以通過將長表格分解為可管理的部分來改善用戶體驗。

>

>如何在WordPress觸點表單中添加驗證碼？

>在您的WordPress聯繫表中添加驗證碼涉及涉及與Google Recaptcha這樣的驗證碼服務集成。這需要從服務中獲取API鍵，並將必要的HTML和PHP代碼添加到您的表格中。 CAPTCHA有助於保護您的表格免受垃圾郵件和自動提交的影響。

>

>我可以創建響應式WordPress聯繫表格嗎？

是的，創建響應式WordPress聯繫表涉及使用響應式CSS技術來確保表格外觀外觀良好，在所有設備尺寸上都可以正常運行。這包括為表單元素設置適當的寬度，邊距和填充物，並使用媒體查詢來調整不同屏幕尺寸的樣式。

我如何使用WordPress聯繫表格進行故障排除問題？

故障排除問題使用您的WordPress聯繫表涉及確定問題，檢查您的代碼是否錯誤以及在不同條件下測試表格。常見問題包括表格不發送電子郵件，表格未正確顯示或未保存的表單提交。如果您無法解決問題，請考慮向WordPress社區或專業開發人員尋求幫助。

以上是在5分鐘內構建自己的WordPress聯繫表插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！