如何在 WordPress 中創建 Divi 聯繫表

已發表: 2022-01-20
how to create a divi contact form

尋找一種為您的 WordPress 網站創建 Divi 聯繫表格的簡單方法?

Divi 是市場上最受歡迎的 WordPress 主題之一。 它帶有一個用戶友好的構建器,可讓您從前端自定義您的網站。 您可以添加頁面模塊,例如號召性用語按鈕、聯繫表單等。

使用 Divi 聯繫表模塊,您無需任何第三方服務即可創建和插入聯繫表。 如果您想要一種簡單的方法在您的網站上添加基本聯繫表單,這非常棒。

但是,您需要一個強大的表單構建器插件,如 WPForms,以實現用戶提交、電子郵件營銷等高級功能。

這就是 Divi Builder 還帶有 WPForms 模塊的原因,因此您只需單擊幾下即可輕鬆添加專業的聯繫表格。

在這篇文章中,我們將向您展示在 WordPress 中創建 Divi 聯繫表單的這兩種方法:

  • 使用 Divi Builder 創建聯繫表
  • 使用 WPForms 創建 Divi 聯繫人

使用 Divi Builder 創建聯繫表

如果您還沒有 Divi,首先,您需要註冊一個 Divi 帳戶。 然後,您將能夠訪問儀表板並下載您的主題文件。

Divi

在 WordPress 儀表板上安裝並激活 Divi 主題後,打開要添加 Divi 聯繫表的任何頁面或帖子。

在帖子編輯器中,您將看到使用 Divi Builder按鈕。 單擊按鈕以在您的網站前端啟動構建器。

divi builder post editor

在下一個屏幕上,您將看到從頭開始構建頁面、選擇預製佈局或克隆現有頁面的選項。

對於本教程,我們將從新頁面開始並添加聯繫表單。

build from scratch divi

然後您將看到 Divi 構建器,您可以在其中選擇符合您需求的行模板。

add row divi builder

添加行後,您可以看到“插入模塊”面板,該面板可讓您添加不同類型的內容模塊。

如果向下滾動,您會找到聯繫表格模塊。 只需單擊它即可在您的網站上插入 Divi 聯繫表格。

divi contact form module

默認情況下,聯繫表單由三個表單字段組成:姓名、電子郵件和消息。 您可以單擊“添加新字段”按鈕根據需要添加其他表單字段。

divi contact form editor

此外,您還可以在文本設置中找到編輯標題、提交成功消息和提交按鈕文本的選項。

divi form name and settings

Divi 還允許您發送電子郵件,以便您收到有關新表單提交的通知。

此外,您還會發現其他有用的選項,例如重定向鏈接、垃圾郵件防護、後台設置等。

divi contact form settings

使用 Divi 聯繫表格模塊,您可以輕鬆地將簡單的聯繫表格添加到您的 WordPress 網站。 有很多自定義選項,因此您可以匹配您的品牌風格。

如果您想為 Divi 聯繫表單添加更多高級功能,那麼您需要使用一個好的表單構建器插件。

這正是我們在下一個方法中要做的。 我們將向您展示如何使用最強大的 WordPress 表單生成器 WPForms 創建 Divi 聯繫人。

使用 WPForms 創建 Divi 聯繫表

WPForms

WPForms 是 WordPress 最好的拖放表單構建器插件。 它使您只需單擊幾下即可創建任何類型的表單,例如聯繫表單、註冊表單、下載表單等。

WPForms 帶有 100 多個預構建的表單模板,因此您無需從頭開始創建聯繫表單。 您可以添加或刪除任何表單字段並根據需要自定義它們。 你甚至不需要任何編碼知識。

您使用 WPForms 創建的所有聯繫表單都將 100% 響應,因此它們將在任何屏幕尺寸上精美顯示。 甚至還有一個內置的垃圾郵件保護選項,因此您可以防止在您的網站上提交垃圾郵件和欺詐表單。

WPForms 的活躍安裝量超過 500 萬,深受全球各類企業的喜愛。 如果您是 Divi 用戶並想在您的網站上添加驚人的聯繫表格,那麼您也可以繼續使用 WPForms。

以下是您應該使用 WPForms 構建 Divi 聯繫表格的一些原因:

  • 易於使用和設置
  • 高級表單通知和確認
  • 文件上傳和內容提交功能
  • 內置表單提交管理系統
  • 電子郵件營銷集成以增加您的電子郵件列表
  • 表單放棄選項以捕獲部分錶單條目
  • 電子商務和支付選項的表單字段

好消息是,Divi Builder 中有一個 WPForms 模塊。 因此,您可以輕鬆地在您的網站上添加您使用 WPForms 構建的聯繫表單。

此外,您可以在任何 WordPress 網站上使用 WPForms,無論是否有 Divi。 如果您決定停止為 Divi 付款,您使用 WPForms 創建的表格將在您的網站上保持不變。

話雖如此,讓我們學習如何使用 WPForms + Divi 創建聯繫表格。

第 1 步:安裝並激活 WPFroms 插件

首先,您需要註冊一個 WPForms 帳戶。

WPForms 提供靈活的定價計劃,旨在滿足所有類型企業的需求。 您可以選擇適合您業務的計劃。 還有一個免費的精簡版。

註冊後,您將能夠訪問您的 WPForms 儀表板。 您將在“下載”選項卡上找到插件文件以及您的許可證。

WPForms license key

您需要在您的 WordPress 網站上安裝此插件文件。 有關這方面的更多詳細信息,您可以查看我們關於如何安裝 WordPress 插件的指南。

在您的站點上安裝並激活 WPForms 後,導航到管理儀表板上的WPForms » 設置選項卡。

在這裡,您需要輸入許可證密鑰並單擊“驗證密鑰”按鈕。

verify wpforms license

然後,您將看到驗證成功消息。 現在您可以開始使用 WPForms 創建您的聯繫表格。

第 2 步:創建聯繫表

要創建新表單,請轉到 WordPress 儀表板上的“添加新”選項卡。 這將啟動模板庫,您可以在其中搜索適合您網站的聯繫表單模板。

對於本教程,我們將從簡單聯繫表單模板開始。 此模板包括聯繫人表單所需的所有基本表單字段,例如姓名、電子郵件和消息。 您還可以預覽任何其他模板,看看哪個更適合您。

為您的聯繫表格輸入一個名稱,然後單擊您選擇的表格模板上的使用模板按鈕。

create divi contact form in wpforms

在下一個屏幕中,您將看到 WPForm 的拖放表單構建器。 所有表單域都在左側,表單預覽在頁面右側。

您會發現大量有用的表單字段,例如數字、下拉菜單、多項選擇、文件上傳、評級、富文本等等。

wpforms form fields

要插入表單域,您只需從左側將其拖動並放置在表單預覽中即可。

wpforms drag and drop

如果您想自定義這些表單字段中的任何一個,您可以單擊它們,您將看到字段選項。 根據表單字段,可以選擇更改表單標籤、描述、必需和其他附加選項。

add file upload to divi contact form

將所有必填字段添加到 Divi 聯繫表單後,單擊表單構建器頂部的保存按鈕。

接下來,您需要設置表單設置、通知和確認。

步驟 3:配置表單設置

要更改表單設置,請從表單構建器的左側菜單面板中打開設置 » 常規選項卡。 在這裡,您可以更改表單名稱、表單描述、提交按鈕文本等。

您還可以選擇在您的網站上啟用反垃圾郵件保護。 這將為您的聯繫表單設置 Google reCAPTCHA。

general settings wpforms

前往設置»通知選項卡為您的 Divi 聯繫表設置電子郵件通知。 您會看到有一個默認通知發送到管理員電子郵件地址。

您可以添加多個電子郵件地址或單擊添加新通知按鈕以發送多個表單通知。

有了這個,您可以通知您和您的團隊成員有關新表單提交的信息,向客戶發送他們的提交詳細信息等等。

form notificaitons wpforms

如果您想了解更多信息,可以查看我們關於如何設置正確的表單通知和確認的指南。

同樣,WPForms 讓您決定用戶在您的網站上提交他們的聯繫信息後會發生什麼。 轉到設置»確認選項卡,您將看到選擇確認操作的選項。

wpforms-confirmations

因此,您可以在用戶點擊提交按鈕後在前端顯示自定義的“謝謝”消息。 或者,選擇重定向選項將用戶發送到您網站上的不同頁面或外部 URL。

完成表單設置後,請確保單擊“保存”按鈕。

現在您的聯繫表格已準備就緒,您可以使用 Divi Builder 將其插入您的網站。

第 4 步:在 Divi 中添加 WPForms 模塊

要在任何頁面或帖子上添加此聯繫表,請打開 Divi Builder 並選擇一個行佈局,就像我們為 Divi 聯繫表模塊所做的那樣。

這裡唯一的區別是您需要搜索WPForms模塊。

divi wpforms contact form

插入 WPForms 塊後,您將看到用於選擇剛剛創建的聯繫表單的設置。 還有一些選項可以顯示您的聯繫表格的標題和描述。

choose wpforms contact form

您甚至可以使用 Divi Builder 更改聯繫表單的設計和样式。 當您對 Divi 聯繫表的外觀感到滿意時,請單擊右側的勾號按鈕。

第 5 步:發布您的 Divi 聯繫表

最後一步是發布您的聯繫表格。 為此,請單擊 Divi Builder 底部的 3 個點按鈕。

publish divi contact form

然後,您將看到不同的選項,例如縮放、響應式預覽等。 在右側,有兩個按鈕:保存草稿和發布。

單擊發布按鈕以在您的 WordPress 網站上發布您的頁面和聯繫表格。

publish your divi contact form

您已使用 Divi 和 WPForms 成功創建了聯繫表單。 雖然 Divi 確實提供了一個聯繫表單模塊,但它缺乏一些功能,如文件上傳、條目管理和電子郵件列表集成。

使用 WPForms,您可以輕鬆解決這些問題。 它包含許多特性和功能,可幫助您創建從基本到專業的所有類型的聯繫表格。

WPForms 還允許您根據您的要求為任何目的創建 WordPress 表單。 您可以構建訂單表、活動註冊表、註冊表單等等。

今天就是這樣! 我們希望本教程能幫助您學習如何在 WordPress 中輕鬆創建 Divi 聯繫表單。

如果您需要有關 WordPress 表單的更多幫助,可以查看以下資源:

  • 如何在 WordPress 中創建活動註冊表
  • 適用於 WordPress 的 8 個最佳電子郵件捕獲工具和表單構建器
  • 如何輕鬆減少表單遺棄

這些帖子將幫助您在 WordPress 表單上註冊用戶並增加您的電子郵件列表。 最後一個將幫助您降低表單的放棄率並提高轉化率。