/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
Arclab Web Form Builder(可視化網頁表單製作器)是一款功能強大易用的可視化網頁表單製作工具,程序可以幫助你很容易地創建HTML、PHP、電子郵件、登記。反饋表單等,提供了可視化的操作界麵,你隻需要用鼠標拖放即可輕鬆操作,無需具備專業的PHP或者HTML編程知識!程序內置了表單元素的所有類型的樣式,允許無縫集成到您的網站和企業形象設計網頁中。
設計表單
有許多不同的方法可以執行我們將在本教程中解釋的功能。例如,要保存表單 - 您應該經常這樣做。
您可以:
轉到文件>保存
單擊工具欄上的“ 保存”按鈕
按Ctrl + S.
此外,通過選擇“ 文件”>“從模板中新建”,您可以獲得特定類型表單的跳轉。
您可以從大量常用表單類型中進行選擇,並根據您的需要進行調整。好的,讓我們開始吧!
第1步:添加標題
讓我們從提供描述性標題開始。單擊“ 元素”窗格中的“ 標題/標題”按鈕。
請注意,標題已添加到表單的頂部,但它隻是文本讀取“ 標題 ”。要更改此選項,請選擇標題,然後單擊“ 屬性”窗格。讓我們將文字改為“ 聯係我們!“字體大小為18。您也可以簡單地雙擊title元素以訪問“ 屬性”窗格。
嘿看,標題!讓我們添加一些東西!
第2步:添加文本字段
由於這是一個聯係表單,讓我們創建一個文本字段,我們的用戶可以在其中鍵入其名稱。單擊“ 元素”窗格下的“ 文本字段”按鈕。
這會在我們的工作區中添加一個新的文本字段,其上方帶有“標簽”字樣。要更改此設置,請雙擊該元素或選擇該元素並切換到“ 屬性”窗格。對於我們的示例,我們在“ 標簽”字段中添加“您的姓名”字樣。請注意,表單會在您鍵入時實時更新。
仍在“ 屬性”窗格中時,請在名為“ 名稱”的字段下方查看“ 標簽 ” 。雖然標簽是表格上顯示的,但名稱僅用於內部目的; 表單提交者永遠不會看到這個值。
Web窗體生成器提供默認的名稱值,例如“text2”,如果您不更改它,您的表單結果將以“text2”旁邊顯示的人名來到達。將其更改為更有意義的內容(例如“Name_of_User”)是一個好主意。
大!現在我們需要添加另一個輸入框來收集用戶的電子郵件地址。有一個特定的按鈕用於此目的,與標準輸入框略有不同。
第3步:添加電子郵件地址輸入框
要包含專門收集電子郵件地址的字段,請單擊“ 元素”窗格的“ 魔法”部分中標記為“ 電子郵件地址”的按鈕。讓我們看看它的外觀。
這個按鈕的工作方式與標準輸入框略有不同:它包含默認占位符文本“you@domain.com”,可幫助指導用戶。它在輸入框中放置了一個電子郵件地址的示例,當用戶單擊它時它會消失。像之前一樣輸入相應的Label和Name值,並根據需要輸入新的占位符文本。
還有一件事:在“ 屬性”窗格中看到標記為“ 驗證”的複選框?選中此框包括第二個電子郵件地址輸入,要求用戶將他們輸入的內容與第一個輸入相匹配。如果您的用戶需要格外小心地提供正確的電子郵件地址,此選項可能很有用。
第4步:添加單選按鈕
接下來,讓我們在表單中添加一些單選按鈕。為此,請單擊“ 元素”窗格下的“ 單選按鈕 ” 。
默認情況下,這將為表單顯示三個單選按鈕,標簽為“選擇一個選項”。讓我們繼續並在“ 屬性”窗格下將此值更改為“您為什麼要聯係我們?”。
要更改單選按鈕的標簽,請雙擊“ 選項”框中的每個項目以輸入新文本。要添加,刪除或重新排列單選按鈕的順序,請使用此框下方的加號,減號和向上/向下箭頭。讓我們使用+按鈕添加第四個單選按鈕。使用標記為“ 布局”的下拉菜單選擇按鈕在表單中的排列方式。
接下來,讓我們為用戶提供一些選擇。選擇一個單選按鈕並將標簽更改為“我有一個問題”,其他人更改為“我有一個評論”,“我有一個問題”和“我有一個建議”。由於這些標簽有點長,因此將“布局”值更改為“ 兩列”。
第5步:添加文本區域
讓我們為用戶提供一個空間來撰寫更多評論。在此步驟中,我們將添加一個文本區域,用戶可以在其中輸入大塊文本。首先,單擊“ 元素”窗格下的“ 文本區域”按鈕。
讓我們使用“ 屬性”窗格下的一些文本區域設置。首先,我們將此名稱添加到文本區域:“說出你的想法!”。您可以通過調整“ 寬度”和“ 高度”框中的值來更改文本區域的大小。
大!但是這些單選按鈕可能不是這種形式的最佳選擇。讓我們看一下下拉菜單的樣子。
第6步:添加下拉菜單
要向表單添加下拉菜單,請單擊“ 元素”窗格下的“ 下拉”按鈕。
選擇下拉菜單並切換到“ 屬性”窗格,為我們的下拉菜單指定名稱 - “聯係原因”?接下來,讓我們使用+按鈕添加一個選項,然後將選項更改為“我有一個問題”,“我有一個評論”,“我有一個問題”和“我有一個建議”。由於我們現在有這個下拉菜單,我們不再需要那些單選按鈕了。選擇表單的單選按鈕部分,然後單擊“ 元素”或“ 屬性”窗格右側下方的“ 刪除”按鈕。現在將您的下拉菜單拖到“電子郵件地址”和“說出你的想法!”之間的空間中。
這看起來很不錯,我們釋放了很多空間。現在讓我們做一些最後的修飾!
第7步:設置表單選項
現在讓我們切換到名為Form Options的選項卡,我們將設置調整為整個表單。
在這裏,您可以選擇要在表單主文本中使用的字體,以及字體的顏色和文本大小。您還可以使用“ 標簽位置”下拉菜單選擇標簽與其對應元素相比的方向。使用“ 表單寬度”字段設置表單的寬度。
如果您想確保您的表單由人工使用而不是編程填寫表格的機器人,請從Captcha下拉菜單中選擇一個選項。Captcha要求用戶識別兩個設計為機器人難以識別的單詞,阻止他們自動填寫表單。
第8步:應用主題
隻需點擊兩下,我們就可以對表單進行徹底改造!首先,單擊“ 主題”工具欄按鈕。
此按鈕可打開主題瀏覽器。
計算機上的所有表單生成器主題都顯示在主題瀏覽器中。請注意,當您單擊這些選項時,會立即應用主題。這使您可以快速嚐試大量設計,找到效果最好的設計。對於我們的例子,我們將選擇“學術”主題。
我們的表格完成了!準備好在瀏覽器中看到它的樣子了嗎?
第9步:預覽表單
您可以使用預覽工具查看表單在Web上的外觀!為此,請單擊“ 預覽”工具欄按鈕。由於預覽表單完全顯示,我們可以測試下拉菜單。
從列表中選擇計算機上安裝的瀏覽器之一,以打開表單的預覽。您現在可以預覽所有表單元素。以下是我們表單的外觀:
太好了!請注意,我們一直使用表單寬度370(在“ 表單選項”窗格中可調整),並且我們已將左側對齊“ 提交”按鈕。您可以選擇“提交”按鈕並像調整其他元素一樣調整其屬性。好的,讓我們上傳我們的表格!
第10步:將其置於在線狀態
使表單聯機的最簡單方法是在“設置”菜單的“ 表單發布”選項卡中輸入CoffeeCup帳戶信息。相信我們,設置和發布一鍵式流程需要幾秒鍾。真的!
如果您還沒有CoffeeCup帳戶,請點擊“ 獲取帳戶 ”。它不需要任何費用,它會自動設置您的免費測試S-Drive帳戶。
點擊Go後!您隻需要選擇要發布到的地址:
現在您的發布目的地已設置,您的表單可以在Internet上加入其HTML好友。您可以隨時單擊“ 發布”工具欄圖標。
您可能會被提示首先保存表單,這總是一個好主意。根據需要多次單擊“ 發布” ; Web窗體生成器將覆蓋所有必需的文件,因此您最終不會有數百個冗餘文件。
發布過程的最後一部分是表格成功發布!窗口:
您可以點擊此處顯示的鏈接,在網絡上測試現實世界中的表單!這不僅僅是一個很好的預覽; 這是真正的交易。
就是這樣!您已成功設計並上傳了基本聯係表單。如果不設置其他任何內容,表單結果將開始在您的S-Drive儀表板中收集。您將能夠在光滑的界麵中閱讀和管理這些結果。
當然,這隻是您使用Web Form Builder可以做的事情的開始。對於表單如何處理可在“設置”菜單中配置的結果和提交,還有更多選項。您可以在“設置表單結果,通知和確認選項”一章中閱讀有關這些選項的更多信息。
一、表單設計變得簡單
在使用HTML的任何設備上完美呈現,包括iPhone和ipad。
即時交換您的表單主題 - 嚐試一對完美契合。
附帶15個專業級主題,並在表格主題商店中提供更多主題。
響應式主題確保您的表單在每個設備上都看起來很完美 - 無論大小。
添加友好的提示和占位符,使您的表單更容易,更友好地填寫。
表單符合Section 508可訪問性。(相信我們,這是件好事。)
為某些字段設置默認值。如果訪問者沒有更改它們,它們將被提交。
拖放表單元素以重新排列它們。
利用自動對焦字段。(為訪客提供一個起點。)
W3C有效的HTML5,CSS3,甚至優雅的降級 - 比聽起來更棒!
在表單中設置字段標簽的位置。
定義表單的字體係列,大小和顏色,然後(可選)為每個標簽自定義它們。
使用多個列和甜美的“Spacer”Magic元素在一個頁麵上放置很多字段(哦,可能性......)
自定義截麵和場顏色。
完全控製表單頁眉和頁腳:添加背景,控製高度,插入您的徽標,是的,更多!
為超時髦的設計添加圖像和圖標。
自定義樣式表以獲得最大程度的控製。(您將能夠導入更改。)
用於事件注冊,聯係表單,客戶調查,預訂,RSVP等的模板。
控製所有最重要的形式元素的定位:提交按鈕。
利用多頁表單(因為超級表單有時需要拆分成塊)。
二、是的,你也可以建立那個
複雜的形式是創造和設計的基礎。
超級付款選項(從您的表格中賺錢)。
使用顯示規則根據填寫表單的人員的操作和選擇來顯示和隱藏表單元素。
將字段標記為“必需”,並在必要時顯示相應的警告消息。
按字段類型自動驗證用戶輸入(並獲得更可靠的數據)。
自動驗證電子郵件和密碼字段的用戶輸入。(鍵入兩次以消除錯誤。)
定義數字字段的值範圍和間隔步驟。
使用時尚的日曆來選擇日期,並從各種日曆日期格式中進行選擇。
使用隱藏的字段(僅限您的眼睛)。
使用魔法領域:您喜愛的預先配置的領域組合!
HTML元素允許您包含HTML代碼塊(或JavaScript,如果您是專家)。
可以一次上傳多個文件。
完整的UTF-8支持:幾乎可以使用表單中的任何語言。
使用reCAPTCHA v1和v2一鍵式驗證碼支持,以保護您的表單免受垃圾郵件的侵害。
多個reCAPTCHA主題選項。
使用正則表達式編寫您自己的字段驗證規則(包含10多個示例-bam!)
控製每個單獨字段元素的寬度和填充。
控製提交按鈕位置並使用自定義按鈕圖像。
添加徽標和表單圖像的鏈接。
使用聯係人列表,以便將結果發送到表單中選擇的部門。
使用左,右,居中或對齊的文本對齊方式。
三、出版和分享
一鍵式表單發布到S-Drive。
使用唯一的網址輕鬆共享/鏈接整頁表單。
輕鬆將您的表單嵌入您的網站,博客,商店 - 您想要的任何地方!
完整的代碼控製:根據需要導出和編輯HTML,CSS甚至php文件。
寶貝得到了後端
使用S-Drive全麵了解所有表單。
使用自動表單處理。無需觸摸friggin'數據庫即可獲得結果。
使用您自己的PHP服務器,但讓您的托管服務提供商將其升級到PHP 5.3,好嗎?
支持PHP SMTP身份驗證。(如果您使用自己的SMTP郵件服務器,請使用自己的SMTP郵件服務器。)
在提交表單時向您的客戶發送完全可定製的電子郵件。您也可以包含他們在郵件中輸入的數據。
為自動響應消息提供自定義“發件人”地址。
表單提交後,將訪問者重定向到特定URL。
提交後向訪問者或客戶顯示自定義消息。
每次提交表單時都會收到電子郵件通知。
將表單結果記錄到MySQL數據庫,csv文件(逗號分隔值)或兩者中!
輕鬆下載表單結果作為文本文件。
用於將表單提交路由到適當地址的聯係人列表選項。
自動將提交的文本和附件發布到網頁和相冊。
使用S-Drive托管自動表單統計信息。
即時了解表單統計信息,包括轉化率。
自動存儲和報告表單結果 - 甜蜜!
看看有多少人查看了您的表單。
跟蹤有多少人開始填寫表單。
在一個視圖中查看每個表單的提交數量!
IP地址和提交時間戳會自動添加到表單結果中。
四、第三方集成
使用內置的MailChimp集成來增長和管理電子郵件郵件列表。
與PayPal,2Checkout和Authorize.net等支付提供商集成。
1、選擇你的元素
您夢寐以求的形式可以在幾秒鍾內完成。將輸入字段和其他表單元素拖放到位 - 瞧,一個新的Web表單已經誕生!
對於注冊表單,訂單,調查,邀請,應用程序,聯係請求,訂閱以及您可以想象的任何其他內容,您可以根據需要隨時處理無限的可能性。
2、自定義字段
填寫空白,將每個表格元素塑造成您所需要的。調整文本,標簽,顏色和許多其他選項。通過完全控製設計和功能,您可以確保獲得正在尋找的確切Web表單。
放輕鬆,隻調整基礎知識。或者花幾分鍾時間配置所有幕後的東西,這些東西可以構建一個非常強大的Web表單。您甚至可以根據填寫表單的人的操作和選擇使元素顯示或消失。
3、使用響應式設計
隻需單擊一下,您就可以將智能響應主題應用於表單(或隻使用標準主題)。每個主題都是使用HTML5和CSS3 Web標準構建的,因此您可以稍後通過編輯代碼來進行任何自定義。
4、決定數據的去向
如果您願意,表單生成器將在您填寫表單時通過電子郵件發送給您。您還可以告訴它將表單結果保存到S-Drive儀表板,數據庫和/或文本文件。
想給你的提交者一個愉快的經曆嗎?設置確認消息,以便他們在點擊提交時知道一切順利。或者將它們重定向到另一個網頁。表單生成器甚至可以發送確認電子郵件,以便他們確信您獲得了他們的信息。
6、用你的表格賺錢
隻需花一點時間設置一個支付服務提供商,用你想要收費的東西裝點你的表格,並觀看資金滾動。創建一個T恤訂單,讓買家選擇自己的顏色,尺寸和字樣。接受捐款並讓訪客選擇自己的價格。可能性是無窮無盡的:有這麼多付款方式,你就走上了成功的道路。
Form Builder與許多最受歡迎的支付提供商集成,包括PayPal,Authorize.Net和2Checkout。您甚至可以選擇通過電子郵件發送發票,讓買家負責付款。
7、一鍵發布
使用我們的免費S-Drive Forms服務來托管您的Web表單,或將文件上傳到您自己的服務器。由於這些表單與兩個目標完全兼容,因此您可以隨時從一個目錄切換到另一個目標。
您隻需單擊一下即可使用Web Form Builder Lite免費發布到S-Drive。隻需輸入您的CoffeeCup帳戶信息,選擇一個發布目的地,然後根據需要隨時單擊“發布”。 S-Drive也為您提供了大量其他獨特的特權。