如何在沒有插件的情況下在 WordPress 中創建表單

已發表: 2023-07-25

您想在 WordPress 中創建表單而不使用插件嗎？表單是網站中最重要和最常用的元素之一，在不使用插件的情況下創建表單有幾個優點。

為什麼在沒有插件的情況下在 WordPress 中創建表單

有許多 WordPress 表單插件可用於創建表單。但是，在不使用插件的情況下在 WordPress 中創建表單可能會很有好處，原因如下：

簡單和輕量級：當您創建不帶插件的表單時，您可以避免安裝和維護插件帶來的額外開銷。使用自定義代碼創建的簡單表單比使用插件創建的表單更輕量、更高效。
自定義：從頭開始構建表單使您可以完全控制其設計和功能。您可以定製表單以滿足您網站的特定需求並進行相應的自定義。
學習體驗：對於有興趣提高編碼技能的開發人員或用戶來說，構建不帶插件的表單可以是一次很好的學習體驗。您將了解表單處理和數據處理的基本機制。
減少依賴性：您可以通過不依賴插件來減少網站對外部代碼的依賴。如果您想最大程度地減少因使用多個插件而產生的潛在安全風險或衝突，這可能很有用。
性能：自定義編碼的表單可以為您的網站提供更好的性能和速度，因為它們與插件相比是輕量級的。這些自定義表單僅包含您需要的功能，並且不具有您可能不使用的插件提供的附加功能。
靈活性：自定義表單為與網站的其他部分或自定義帖子類型集成提供了更大的靈活性。您可以根據您的獨特需求擴展表單的功能。
當然，大多數插件都使用短代碼提供類似的選項。但是，使用自定義編碼的表單，您可以根據您想要的顯示方式將它們添加到網站上的特定位置。

如何在沒有插件的情況下在 WordPress 中創建表單

您可以在 WordPress 中創建多種類型的表單，而無需使用插件。但聯繫表格是最重要和最受歡迎的表格之一。因此，我們將在本教程中向您展示如何創建聯繫表單。

在開始之前，我們希望您對編程有基本的了解，因為我們將使用腳本語言和標記語言，例如 HTML 和 PHP。如果您不具備所需的知識，我們建議您尋求程序員的幫助來幫助您創建表單。

要在 WordPress 中創建聯繫表單，您必須首先創建聯繫頁面。那麼讓我們從這個開始吧。

1）創建表單頁面

從 WordPress 儀表板轉到頁面 > 添加新內容。

這將打開頁面編輯器，您可以在其中輸入頁面標題和除實際聯繫表單之外的其他必要描述。但是，如果您在此頁面上只需要表單，我們可以直接創建表單。

2) 在編輯器中為表單添加 HTML 代碼

現在，單擊屏幕左上角的選項（三個垂直點）> 代碼編輯器，轉到代碼編輯器。 然後，在編輯器中為表單添加 HTML 代碼。 您可以根據以下代碼添加您需要的必要表單字段。 
<表單方法=“帖子”>
  <標籤=“名稱”>名稱：</標籤>
<輸入類型=“文本”名稱=“名稱”必需=“”>

<標籤=“電子郵件”>電子郵件：</標籤>
<輸入類型=“電子郵件”名稱=“電子郵件”必需=“”>

<label for="message">消息：</label>
<textarea name="message" required=""></textarea>

<輸入類型=“提交”值=“提交”>
</形式>

此代碼將幫助您在 WordPress 中創建一個簡單的聯繫表單。但您可以輕鬆修改它以在 WordPress 網站上創建您想要的表單。

將所有必要的表單字段添加到代碼後，單擊“發布”或“更新”以保存聯繫頁面上的更改。

html代碼在wordpress中創建一個表單

如果預覽頁面，您可以看到剛剛創建的表單。但為了使表單發揮作用並從中提取數據，您還必須處理表單提交。因此，我們必須在此之後為表單提交創建一個數據庫。

表單預覽頁面在 WordPress 中創建表單

3）創建數據庫表用於表單提交

要創建用於表單提交的數據庫，您可以使用數據庫管理工具，例如 phpMyAdmin。您可以通過登錄 cPanel 來訪問它。如果您沒有必要的憑據，我們建議您聯繫您的託管服務商或網站所有者。

現在，向下滾動到數據庫部分並單擊phpMyAdmin 。這將打開 phpMyAdmin 儀表板，您可以在其中查看網站的所有數據庫。

展開網站數據庫表並滾動到頁面底部，您可以在其中創建新的數據庫表。在這裡，輸入表名稱“ wp_contact_form_submission ”，然後單擊“ Go”創建新表。

然後，您必須在表的列及其類型上輸入表單字段的數據字段。根據我們剛剛創建的表單，我們將添加以下列名稱和類型：

名稱：文本
電子郵件：文本
消息：文本
提交時間：日期時間

最後，單擊“保存”以保存數據庫表中的更改。

我們根據我們創建的聯繫表單命名了數據庫表。因此，您可以根據最初創建的表單更改表的名稱。同樣，如果您在表單上使用了不同的表單字段，則可以相應地添加列。

4) 添加代碼來處理表單提交

創建數據庫後，您仍然需要在網站的主題功能文件中添加一組代碼來處理表單提交。

但我們建議您在繼續之前備份您的網站，因為我們將編輯網站的一些核心文件。任何意外的更改都可能會導致您的網站出現更多問題。如果您需要任何幫助，可以查看我們有關如何備份 WordPress 網站的詳細指南。

4.1) 訪問主題功能文件

從 WordPress 儀表板轉到外觀 > 主題文件編輯器以訪問主題功能文件。您可以在這裡找到您網站的所有核心主題文件。然後選擇屏幕右側的主題函數( functions.php)文件，我們將在其中添加代碼。

表單提交代碼頁在 WordPress 中創建表單

4.2) 將代碼添加到主題文件編輯器

您可以使用以下方法處理您網站上的表單提交。因此，在編輯器末尾添加以下代碼。

 if ($_SERVER["REQUEST_METHOD"] === "POST") {
  $name = sanitize_text_field($_POST["name"]);
  $email = sanitize_email($_POST["電子郵件"]);
  $message = sanitize_textarea_field($_POST["message"]);

  // 添加代碼將表單數據保存到數據庫
  全局 $wpdb;
  $table_name = $wpdb->前綴 。 'contact_form_submissions';
  $數據=數組（
    '名稱' => $名稱，
    '電子郵件' => $電子郵件,
    '消息' => $消息，
    'submission_time' => current_time('mysql')
  ）；
  $insert_result = $wpdb->insert($table_name, $data);

  如果（$insert_result === false）{
    $響應=數組(
      '成功' => 假，
      'message' => '保存表單數據時出錯。',
    ）；
  } 別的 {
    $響應=數組(
      '成功' => 正確，
      'message' => '表單數據保存成功。'
    ）；
  }

  // 返回 JSON 響應
  header('內容類型：application/json');
  回顯 json_encode($response);
  出口;
}

此代碼會將輸入的表單數據從表單存儲到我們剛剛創建的表單提交數據庫表中。我們還包含了一個 JSON 響應，以確保您在編輯代碼時在表單上添加了正確的數據庫表名稱和字段。當表單數據成功存入數據庫後，您可以將其刪除。

對代碼進行所有必要的更改後，只需單擊“更新文件”即可。

5) 在儀表板上顯示表單提交

將表單數據存儲在數據庫中後，您可以創建儀表板菜單來查看表單提交。因此，我們還將包含一個代碼來顯示它。

您可以將以下代碼添加到主題函數文件( funtions.php) 中，就像上一步一樣。

 函數display_contact_form_submissions_page() {
  全局 $wpdb;
  $table_name = $wpdb->前綴 。 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE name <> '' AND email <> '' AND message <> '' ORDER BY Submit_time DESC", ARRAY_A);

  ?>
  <div class="wrap">
    <h1>聯繫表單提交</h1>
    <table class="wp-list-table Widefat 固定條紋">
      <標題>
        <tr>
          <th>姓名</th>
          <th>電子郵件</th>
          <th>消息</th>
          <th>提交時間</th>
        </tr>
      </標題>
      <正文>
        <?php foreach ($form_data as $data) : ?>
          <tr>
            <td><?php echo esc_html($data['name']); ？></td>
            <td><?php echo esc_html($data['email']); ？></td>
            <td><?php echo esc_html($data['message']); ？></td>
            <td><?php echo esc_html($data['submission_time']); ？></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </表>
  </div>
<?php }

函數register_contact_form_submissions_page() {
  添加菜單頁（
    '聯繫表格提交'，
    “表格提交”，
    '管理選項',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'dashicons-反饋'
  ）；
}
add_action('admin_menu', 'register_contact_form_submissions_page');

根據您創建的表單和數據庫表粘貼並編輯代碼後，再次單擊“更新文件” 。

現在，如果您轉到 WordPress 儀表板，您將能夠看到“聯繫表單提交”菜單。這將顯示您最初創建的表單的所有表單提交。

顯示表單提交頁面在 WordPress 中創建表單

顯示表單提交的調試選項

如果您看不到表單數據，我們建議您在代碼上添加調試輸出和SQL查詢的代碼。您可以添加代碼var_dump($form_data); 和var_dump($wpdb->last_query); 分別在查詢後。

所以代碼可能看起來像這樣：

 函數display_contact_form_submissions_page() {
  全局 $wpdb;
  $table_name = $wpdb->前綴 。 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY Submit_time DESC", ARRAY_A);

  var_dump($form_data); // 調試輸出
  var_dump($wpdb->last_query); // 調試 SQL 查詢

  ?>
  <!-- 其餘代碼... -->
  <?php
}

根據調試報告，您可以進一步編輯代碼以確保表單數據正確顯示。但您也可以仔細閱讀下一節中的要點，以確保您使用的代碼沒有任何錯誤。

創建高效自定義表單的基本注意事項

以下是您在編輯代碼以創建自定義表單時應考慮的一些因素。如果您在此過程中遇到任何錯誤，它們會很有幫助。

檢查數據庫：確保表單數據正確保存在正確的表中。對於本教程，它是“wp_contact_form_submissions”表。
檢查錯誤：檢查您的 PHP 錯誤日誌或啟用錯誤報告，以查看是否存在與表單提交或數據顯示相關的錯誤。錯誤可能會提供有關可能出現問題的線索。
檢查表單提交過程：確保表單數據正確提交，並且保存表單數據的PHP代碼執行沒有錯誤。檢查提交表單時表單數據是否正確傳遞到 PHP 代碼。
驗證表名：仔細檢查“display_contact_form_submissions_page()”函數中使用的表名是否與數據庫中的實際表名匹配。確保它是“wp_contact_form_submissions”或根據您的數據庫表調整表名稱。
清除緩存：如果您正在使用任何緩存插件或服務器端緩存，請清除緩存以確保您查看最新數據。
權限：確保您登錄的用戶角色具有訪問自定義管理頁面的“manage_options”功能。此功能允許管理員默認訪問該頁面。

我們提到了一組代碼，供您在 WordPress 中創建聯繫表單。但是，如果您想製作任何其他表單或具有不同數據字段的替代表單，則必須編輯代碼。因此，上述幾點也可以幫助您在 WordPress 上創建自定義表單。

結論

這是在 WordPress 中創建表單而不使用插件的方法。您也可以使用插件創建表單。但是，如果您對編程有基本的了解，那麼創建自定義編碼表單有很多優勢。

您可以使用本教程中包含的基本代碼集輕鬆創建表單。總而言之，以下是構建有效的基本步驟：

在頁面編輯器上添加表單代碼
創建用於表單提交的數據庫
添加必要的代碼來處理表單提交並顯示它們

我們希望您現在可以使用本教程中提到的代碼自信地在您的網站上創建表單。您可以根據需要編輯它們以包含其他表單字段。如果您遇到任何問題，我們甚至添加了一些調試選項和在 WordPress 上構建自定義代碼時需要考慮的因素。

那麼，您是否嘗試過在沒有插件的情況下在 WordPress 中創建表單？

請在下面的評論中告訴我們。

同時，請隨時查看以下文章，以幫助您改進和自定義您的 WordPress 網站。

如何自定義 WooCommerce 註冊表單
Divi 聯繫表格不起作用？這是修復方法！
如何向 WordPress 添加彈出表單