• 主頁
  • 文章
  • 插件
  • 如何免費使用快樂表單小部件在 Elementor 中個性化您的表單設計！

如何免費使用快樂表單小部件在 Elementor 中個性化您的表單設計！

已發表: 2021-03-04

想在您的 Elementor 網站上添加一個外觀優雅的表單並需要一個完美的解決方案嗎？ 你的搜索時間終於結束了！

您最喜歡的 Happy Elementor Addons 最近推出了免費的表單小部件，可讓您毫不費力地在網站的不同頁面或部分添加表單。 它與 7 個流行的表單構建器集成意味著您可以從其中任何一個中添加表單並使用 Happy Addons 進行風格化。 這僅表明一件事，而且僅表明一件事。

使用 Happy Addons 表單小部件，您將獲得“大量樣式和自定義範圍”。

在本教程中，我們向您展示瞭如何在 Elementor 設計的網頁中使用 Happy Addons Form Widgets，您還將學習如何以您想要的方式自定義它們的設計。

但在此之前，讓我們了解為什麼您的網站需要表單小部件。

快樂插件表單小部件一覽

Happy Addons 是最好的 Elementor 插件之一，它幫助超過 1,00,000 多名 WordPress 用戶建立了他們的網站。 它帶有大量基本功能和小部件，可用於自定義您的網站帖子、頁面、WooCommerce 產品、表單等。

您可能已經知道，Elementor 提供了一個默認表單小部件來在網站上顯示表單。 但它沒有足夠的功能來自定義具有您廣泛的設計和風格的表單。

這就是 Happy Addons 的用武之地。Happy Addons 表單小部件可讓您集成 WordPress 上 7 個最流行的表單構建器的表單。 每個小部件都帶有各種佈局，這將有助於使您的表單更加用戶友好和精心設計。

Happy Addons Form Widget 支持的 7 個表單插件是——

  1. 聯繫表格 7
  2. 忍者形態
  3. 微表格
  4. 火山口形式
  5. 工作表
  6. 重力形式
  7. 流利的形式

如何在 Elementor 網站中使用快樂插件表單小部件

使用 Happy Addons 表單小部件，您可以在幾分鐘內輕鬆地在 Elementor 網站上自定義和顯示表單。

至少，您需要三個插件才能做到這一點。 他們是 -

  • 元素（免費）
  • 快樂 Elementor 插件（免費）
  • WPForms（免費）

在這裡，我們使用一種流行的表單插件 WPForms。

讓我們配置一個聯繫表單。

首先，安裝並激活我們在上面列表中提到的必要插件。

第 1 步：創建示例表單

安裝 WPForms 插件後，您必須創建您的第一個表單。

為此，請轉到 WPForms–> 添加新

Add new form

在下一頁中，您將獲得創建表單的選項。

Create form

然後您可以根據您的要求編輯您的表單並添加許多字段。 這裡我們添加三個字段 Name、Email 和 Message。

完成表單編輯後，您必須單擊“保存”按鈕。

Create a sample form

然後，您需要創建一個頁面來配置您的表單。 您還可以在聯繫頁面上設置表單。

Step2：創建表單集成頁面

首先單擊Pages–>Add New 。

Add new page Elementor

在下一個屏幕中，您將看到添加頁面標題的選項。

Add your page title

第 3 步：添加 WPForms

為了設計聯繫頁面，我們使用了 WPForm 的預製聯繫頁面設計。 我們使用 Happy Addons Pro 的“ Live Copy ”功能複制了設計。

預設計在兩行中用於設計聯繫頁面。

在左側部分，我們將添加 WPForm 小部件。 在右側部分，我們已經插入了一個圖像並添加了該部分的背景顏色。

Add widgets in the row

現在，在搜索欄中找到 WPForms 小部件，然後從左側菜單中選擇小部件。 然後將其拖放到所選區域。

Add WPForm widgets

然後我們從之前創建的下拉列表中選擇表單名稱。

SElect the created form

第 4 步：使用快樂插件設置表單樣式

現在，您可以根據需要輕鬆重新設計聯繫表格。

在這裡，我們向您展示。

設計標題

首先，我們從左側邊欄菜單添加快樂漸變標題。

Add Happy Gradient Heading

然後，您可以按照自己的風格自定義快樂漸變標題。 您可以選擇Presets–>Design並編輯Title 。

Edit Heading

設計標題後，我們將更改表單樣式。

設計表格

要重新設計表單，您必須使用Style 。 在這裡，您將獲得表單樣式選項，如表單字段、表單字段標籤和提交按鈕。

Style the form

表單字段：在表單字段設置中，您將更改字段間距、填充、邊框半徑、版式。 字段文本顏色、字段佔位符顏色、邊框類型等。

字段標籤：字段標籤還允許您編輯邊距、填充、標籤版式、子標籤版式、描述版式和顏色。

提交按鈕：如果需要，您還可以通過更改按鈕的按鈕全寬、按鈕寬度、邊距、填充、排版、邊框、顏色、邊框半徑、框陰影、文本顏色和背景顏色來自定義提交按鈕。

讓我們稍微自定義一下表單。

Customize the form

最終預覽

這是我們聯繫頁面的最終預覽。

Final preview

您還可以看到這個方便的視頻教程。

查看完整的 WPForm 文檔。

表單小部件：它們是什麼以及為什麼需要它們？

在網頁上有一個表單的目的是什麼？

Why Form Widget Is So Important

表單用於網站上的各種目的。 您可以使用表單接收消息並與用戶交流。 它還有助於與客戶建立信任。 因此，它可以增加網站的可信度，讓您的網站用戶更好地與您溝通。 那麼表單小部件有什麼作用呢？

表單小部件可讓您輕鬆地在 Elementor 網站上顯示表單。

以下是一些關鍵要點，清楚地表明了在網站上使用表格的重要性——

  • 減少垃圾郵件
  • 在適合您的時候接收消息
  • 跟踪查詢
  • 產生更多潛在客戶
  • 製作您的電子郵件營銷列表
  • 提供客戶支持
  • 獲取用戶發送的消息

Happy Addons 表單小部件可以通過直觀的表單小部件集成過程幫助您完成所有這些工作。 讓我們進一步了解 Happy Addons 表單小部件。

結論

在此博客中，我們涵蓋了您需要了解的有關 Happy Addons 表單小部件的所有信息。 我們還向您展示瞭如何使用 Happy Addons WPForm 小部件設置表單。 您可以以相同的方式對其他 6 個表單插件執行相同的操作。

同樣，這是創建 Elementor 聯繫表單的方法。

創建 Elementor 聯繫表的終極指南

如果您對如何在 Elementor 網站上添加和自定義表單仍有任何疑問，可以發表評論。 並在您的社交渠道上分享帖子並幫助您的朋友學習。