Webflow 是一個極其強大的登陸頁面建立器,是我們創建專業、響應式網站的最愛之一。
但使用 Webflow 時,沒有簡單的方法來建立多步驟表單:當然,您可以使用 Webflow 編輯器向表單新增欄位。但是,當您開始使用 JavaScript 根據步驟隱藏/顯示欄位並新增驗證時,它就會變得非常複雜。
Growform 是領先的多步驟表單產生器,可輕鬆建立可嵌入到 Webflow 登入頁面中的進階多步驟表單。
結果呢?一個漂亮且響應靈敏的 Webflow 多階段模組,其外觀和行為與 Webflow 本身的一部分完全相同:
Webflow 多步驟表單是未來!此模組完美地融入了新的 Webflow 環境。
目錄
1 – 在 Growform 上建立表單
2 – 取得Growform共享碼
3 – 將「嵌入」元件新增至您的 Webflow 頁面
4 – 對形狀進行一些美學上的改變
5 – 將您的聯絡人發送到某個地方!
1 –在 Growform 上建立表單
首先,在 Growform 中建立一個新 韩国 电报 表單。您可以獲得 14 天的免費試用,不需要信用卡 - 從這裡開始。
第一步如下圖所示:
如果您的第一個模組需要協助,請按照我們的入門指南進行操作。
2 –取得Growform共享碼
前往 Growform 頂部的「共用表單」選單項目(進入表單後)以取得共用代碼。
然後,點擊第一個選項,標記為「使用 HTML 片段將 Growform 直接嵌入到您的網站中」。按一下+將程式碼複製到剪貼簿。
3 – 將「嵌入」元件新增至您的 Webflow 頁面
現在,在 Webflow 中開啟您的登陸頁面並刪除您已建立的所有表單:我們將用新的多步驟表單取代它們。
然後,找到左側的「嵌入」元件。它看起來像一對帶有反斜線( </> )的程式碼括號。
您需要滾動一點才能找到它:在撰寫本文時,它位於清單的末尾,位於「元件」下方。
找到「嵌入」元件後,將其拖曳到頁面上所需的位置。
將 Growform 共享程式碼貼到此框中。
非常簡單 - 這是整個過程的 gif: