WPForms 確實(shí)是 WordPress 建站系統(tǒng)上非常好用的一款表單信息提交工具，無論是安裝設(shè)置的簡易程度還是表單的業(yè)務(wù)場(chǎng)景范圍，都秒殺一眾同行。而且在去年我還寫過一篇文章專門介紹了 WPForms 怎么安裝使用，詳細(xì)內(nèi)容可以看看《WPForms 表單插件使用》這篇文章。

今天到搗鼓一個(gè)頁面上的某個(gè)表單時(shí)，出現(xiàn)了下面這種情況（見圖片所示）。

當(dāng)時(shí)想在頁面頁腳安裝一個(gè)表單，主要是用來收集用戶的電子郵件。但是頁腳區(qū)域又拆分成了 4 個(gè) Section，這就導(dǎo)致每個(gè) Section 的面積就很小。當(dāng)把 WPForms 表單設(shè)置進(jìn)去后，整個(gè)表單就顯得很擁擠，而且還分成了上下兩行。

這明顯與我想要的設(shè)計(jì)效果不相符啊，我的目標(biāo)是 “Email Address” 這個(gè)表單與“Subscribe”這個(gè)提交按鈕在同一行顯示，也就是單行顯示，不要占用我頁腳區(qū)域太多的空間，要不然這么丑陋的設(shè)計(jì)，還不如不用。

既然問題發(fā)生了，就去找解決方案唄。我首先想到的是去調(diào)整整個(gè)表單區(qū)域的 CSS 代碼，直接在代碼層面實(shí)現(xiàn)我想要的功能。但是不得不說 WPForms 的前端代碼是真的復(fù)雜，我這個(gè)“前端二把刀”是真的看不懂。

就當(dāng)我準(zhǔn)備放棄 WPForms 表單方案，轉(zhuǎn)而打算去使用 Convert Pro 技術(shù)方案時(shí)（關(guān)于 Convert Pro 如何使用可以看《Convert Pro 從 0 到 0.1》這篇文章），靈光閃現(xiàn)去搜搜官方文檔啊。

第一條結(jié)果就是解決方案，害得我花了十多分鐘在分析前端代碼上。解決方法很簡單，直接在表單設(shè)置的通用里面，打開“高級(jí)選項(xiàng)”，在里面填寫特定的前端控制代碼“inline-fields”，就是這么簡單。

為了方便，貼下解決方案的地址：How to Display Your Form in a Single Line - WPForms 。

表單在同一行顯示的問題解決了，緊接著就又發(fā)現(xiàn)了新問題。那就是信息填寫表單與信息提交按鈕不一樣高，而且在手機(jī)端顯示時(shí)，簡直真的是一波剛平一波又起。

這次學(xué)聰明了，直接去官方文檔里面找解決方案，按照官方文檔的指導(dǎo)，直接去調(diào)整提交表單的高度即可。方法很簡單，就是粘貼提交按鈕的 CSS 代碼，在各個(gè)平臺(tái)測(cè)試沒有問題即可。

現(xiàn)在回過頭想，可能是 WPForms 表單插件與我今天用到的這款主題不兼容導(dǎo)致的。沒辦法，只能按照步驟一點(diǎn)一點(diǎn)微調(diào)。