如何在 WordPress 中創建在線 T 卹訂單表 [簡單易行]

已發表: 2022-07-06

您是否打算開設在線 T 卹業務? 或者嘗試為您的親密夥伴或您的組織製作定制的 T 卹。 單獨獲取每個人的設計或顏色偏好是很煩人的。 此外,詢問每個人的 T 卹尺碼也沒有效率。

那麼,你需要什麼? 您需要製作一個在線 T 卹表格,任何人都可以在其中選擇設計、選擇 T 恤的顏色和尺寸、選擇您希望運送 T 恤的地址、付款方式等等。

Fluent Forms 是最適合初學者的表單構建器。 立即下載並開始免費製作精美的表格!!!

您可能會在網上找到一些 T 卹訂單表格模板,但所有這些都不會讓您完全滿意。 模板很棒,但也有一個很大的挫折,你可能一開始就找不到你想要的所有必要字段。 此外,您必鬚根據需要對其進行設計和集成。

那麼,為什麼不創建一個沒有任何模板的 T 卹訂單表格,自定義和排列字段,設計佈局,添加功能,並使其成為您自己的 T 卹表格模板。 最好的事情是你可以在沒有任何手工編碼的情況下做到這一點。

用於製作在線 T 卹訂單的表單生成器

如果您需要製作有創意且漂亮的 T 卹訂單表格,您肯定需要一個強大的表單生成器插件。 在不編碼的情況下創建在線表單時,沒有什麼比 Fluent Forms 更好的了。 在進入表單構建之前,選擇 Fluent Forms 來製作您可能會問的所需在線 T 卹訂單表格有什麼好處?

幹得好 -

處理批量提交:市場上對T卹訂單的要求很高。 因為每個人都想為他們的幫派定制一件 T 卹。 服裝公司還使用這些表單構建器從客戶那裡獲得訂單。 因此,他們需要一個可以處理批量提交、具有所有必要字段和功能、發票 pdf 生成器等的工具。

大量輸入字段:創建在線 T 卹訂購表的必填字段-

  1. 名稱字段
  2. 地址字段(自動完成和谷歌地圖集成)
  3. 電子郵件字段
  4. 複選框和多項選擇
  5. 付款字段
  6. 上傳文件
  7. 用於選擇顏色、設計、尺寸等的下拉字段。
  8. 中繼器字段

此外,您將獲得40 多個輸入字段,不包括這些字段,以製作您想要的任何類型的在線表格。 查看如何使用 Fluent Forms 製作支票申請表。

輸入字段流利形式
輸入字段流利形式

重要功能和集成:您可能需要在表單中包含條件邏輯,或者可能需要一些計算器來幫助您的客戶跟踪他們的預算,或者可能需要一些 T 恤的視覺效果,所有這些都可以使用 Fluent Forms 完成。

此外,下載提交條目的 PDF 版本是任何在線訂單的一個重要功能。 用戶可能需要發票,您可以將發票與他們訂購的 T 卹一起發貨。

如果您想將您的潛在客戶或一次性客戶培養成永久忠誠的客戶,您可能需要某種客戶關係管理或 CRM 工具來為您的表單構建器,是的,Fluent Forms 有一堆本地集成來培養潛在客戶。

此外,您將獲得 45 多種集成,從自動化到文件共享工具,從會員資格到通知工具等等。

廢話不多說,讓我們開始製作表格。

如何創建在線 T 卹訂單表(從頭開始)

這些是創建簡單而完整的 T 卹訂單表格的步驟。 只需跟隨,讓您的在線 T 卹業務順利啟動並運行!

第 1 步:創建在線 T 卹訂單表格

要製作無需任何編碼的在線 T 卹訂單,您需要做的第一件事就是在您的 WordPress 網站上安裝表單生成器。 安裝 Fluent Forms 非常簡單。

安裝並激活插件後,將鼠標懸停在左側的 Fluent Forms 上,然後選擇 Add New 以創建您的表單。 現在將出現一個彈出窗口,選擇新建空白表單選項來初始化您的新表單。

您將看到一個祝賀彈出窗口,並將被重定向到表單編輯器頁面。 在此頁面上,您可以根據需要添加、刪除和自定義表單字段。

這是您必須決定表單結構的地方。 有的喜歡直接跳轉到T卹設計版塊,有的喜歡先獲取用戶的基本信息。

與後者一起,我們將一一添加姓名、地址、電子郵件和電話號碼字段。 這是非常基本的東西,只需從編輯器頁面的右側搜索該字段,然後單擊以將其添加到您的表單中。 您還可以拖動字段以隨機播放它們。

至於名稱,我們將只添加名字和姓氏,您可以從輸入自定義中啟用中間名選項。 你還能定制什麼? 對於地址字段,您可以添加或刪除輔助地址,排除不必要的信息歸檔,或者根據需要添加 Google 地圖自動填充功能。

T 卹訂購單

第 2 步:製作 T 卹款式定製版塊

現在,對於您的定制 T 卹,您需要選擇所需襯衫的尺寸、顏色和數量。 因此,我們將添加一個三列容器並添加一個啟用單選選項的付款字段、與付款字段映射的項目數量字段,以及一個名為選擇顏色的下拉字段(我們在其中創建了選項不同的顏色)。

在線T卹訂單設計

現在,如果有人想訂購另一件不同尺寸和顏色的 T 卹怎麼辦? 是的,我們也可以這樣做。 使用條件邏輯的一個簡單技巧,您可以添加另一個具有相同字段的容器。

您的在線 T 卹訂購表的 T 卹定制部分

添加一個複選框並將其命名為 Add T-shirt,然後復制早期的容器並將其重命名為 T-shirt 2。根據屏幕截圖設置條件邏輯。 現在,每當用戶檢查此字段時,都會出現一個新容器,他/她可以在他/她的訂單中添加另一個 T 卹需求。

第 3 步:為您的 T 卹訂單定制付款部分

在 Fluent Forms 中設置 T 卹訂單的付款選項非常簡單。 為您的訂單添加付款方式和付款摘要字段。 就是這樣,它將動態獲取數量和金額,並在付款摘要中顯示小計和其他信息。

為了增加趣味性,我們將添加一個自定義字段以作為確認消息顯示到 T 卹訂單表單。 首先,添加一個自定義字段並添加您的確認消息。 然後獲取動態數據非常簡單。 鍵入 {dynamic.Name_Attribute} 以獲取該特定字段的數據。

將自定義 HTML 添加到您的 T 卹訂單表單

對於支付方式,Fluent Forms 為您提供最流行的支付集成。 您可以使用 Stripe、PayPal、Mollie、RazorPay 等進行 T 卹訂單付款。 設置您的付款方式就像任何其他付款設置一樣。 您需要通過 API 密鑰集成它。

第 4 步:如果需要,可以將其設為多步驟表單

現在如果用戶在一頁上看到這麼多字段可能會讓人不知所措,您可以將表單分成多步表單,並為用戶的聯繫信息和帳單地址、基本信息、付款部分和確認部分製作多個部分。形式。

從 Input Fields 中搜索 Form Step,然後在頁首和頁尾添加,在賬單信息後添加一個,在 T 卹選擇後添加一個。

第 5 步:T 卹訂單表格的通知和電子郵件設置

現在,下訂單後會發生什麼? 如果您想在提交 T 卹訂單後向您的用戶發送電子郵件通知並為自己收到電子郵件通知,您需要啟用電子郵件通知。 為此,請從“設置和集成”選項卡中打開“電子郵件通知”。 單擊頂部的添加通知並根據需要填充字段。 我們建議您遵循電子郵件通知的最佳做法以避免電子郵件送達率問題。

您可能已經在屏幕左側看到了其他可用選項。 是的,如果您願意,您可以將您的表單與會員、通知、CRM 等軟件等不同工具集成。

第 6 步:設計您的 T 卹訂單表格

如果您到目前為止都按照我們告訴您的所有內容進行操作,那麼您將獲得一份功能齊全的 T 卹訂購單。 如果需要,您可以在任何地方使用它,例如在博客或頁面上。 此外,您可以為此表單創建一個登錄頁面,該頁面可以通過直接鏈接或按鈕共享。

但是給這個表格一些風格呢? 是的,您也可以這樣做,通過自定義 HTML 字段將一些特色圖像添加到您的表單是非常基本的。 如果您使用 Elementor 和 Oxygen 等頁面構建器,您將獲得一些用於 Fluent 表單的額外小部件。 讓您的表單看起來如此豐富以至於用戶通常無法滾動而無需再次查看,這可能非常方便。

這是一個基本的 T 卹訂單表格,沒有任何編碼或花哨的頁面構建器的幫助 -

預覽和設計選項中,您將有一些選項來更改背景顏色、字體顏色、容器設計等。 甚至它為您的 T 卹訂單提供了一些表單樣式模板——現代、經典、引導樣式等。

但是,如果您想在表單中添加一些自定義 CSS 和 JS,也可以。 手動編碼表單樣式不是強制性的。 您可以在沒有任何 CSS 或花哨的頁面構建器的情況下製作漂亮的表單。

還記得動態獲取數據到確認頁面以確保安全嗎?
只需鍵入{dynamic.Name_Attribute}即可獲取該特定字段的數據,對於我們的訂單,我們只需放置一個自定義 HTML 字段並放置一些確認文本以及{dynamic.names}{dynamic.phone}標籤。 瞧! 這就是它在您的表單中的樣子。

我們還在廣播字段中添加了一些 T 卹設計,以供視覺選擇。

發布您的 T 卹訂購單

發布您的 T 卹訂購單不是火箭科學。 Fluent Forms 總是為每個表單提供一個唯一的 id。 只需將短代碼複製粘貼到您要發布表單的頁面或博客文章中。

此外,如果您使用著陸頁功能,您可以添加背景顏色、背景圖像、表單徽標、特徵圖像、頁面標題等,以製作外觀優雅的表單。

您還可以選擇查看表單在移動設備或桌面上的外觀。 與登錄頁面共享就像餡餅一樣簡單,它有一些選項,例如您可以通過直接鏈接按鈕在社交媒體上共享

沒有任何編碼的 T 卹訂單的最終外觀

還在迷茫嗎? 不,你沒有錯過任何東西

使用 Typeform,您可以製作交互式表單,使您的表單像對話一樣。

您也可以使用 Fluent Forms 製作交互式會話表單。 它有很多選項,比如全鍵盤訪問,添加不同的圖像/佈局,甚至動畫/視頻到表單,一鍵將您的非交互式表單轉換為會話表單,等等。

如果您想將 T 卹訂單表製作為 Typeform,您可以使用 Fluent Forms Conversational Form 來實現。

現在為您的班級或俱樂部製作一些學校 T 卹訂購單。 如果您需要幫助,請查看此視頻中對話表單的工作原理。

Canva T 卹訂購表

這是在線 T 卹訂購表的另一個示例。

野馬棒球隊在線 T 卹訂購表

看,你沒有錯過任何東西。 事實上,使用 Fluent Forms,您可以獲得比任何其他表單構建器更多的東西來製作一些很棒的 T 卹訂單表單。

獲取 Fluent Forms Pro

包起來

有了它,無需任何編碼知識即可輕鬆創建在線 T 卹訂單表格。 現在,您可以根據需要製作任何類型的訂單,只需添加必填字段並在幾分鐘內使用 Fluent Forms 設計一個以用戶為中心的表單。

如果您對電子郵件通知有任何問題或您的電子郵件變成垃圾郵件,您可以安裝免費插件 FluentSMTP。 此外,如果您對任何訂單表格有任何疑問,請在下方評論。 在社交媒體上關注我們以獲取最新更新和教程。