如何在WordPress中制作聯(lián)系表單（3種方法）

時(shí)間：2023-07-26 15:45:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-26 15:45:01 來源：網(wǎng)站運(yùn)營

如何在WordPress中制作聯(lián)系表單（3種方法）：本篇教程提供3個(gè)在WordPress中創(chuàng)建聯(lián)系表單并記錄詢盤的方法：

1. 插件Contact Form 7 + Flamingo，兩者都免費(fèi)
   
   
2. 插件Elementor Pro+Elementor Contact Form DB，前者付費(fèi)，是網(wǎng)頁可視化編輯器，后者免費(fèi)。
   
   
3. 插件Ninja Forms，免費(fèi)，這是我目前新發(fā)現(xiàn)且推薦的方式，相關(guān)教程請(qǐng)查看：Ninja Forms：免費(fèi)的聯(lián)系表單插件，卻提供了付費(fèi)表單才有的功能【視頻+圖文】
   
   

本文原文首發(fā)于：https://loyseo.com/how-to-create-a-contact-form-in-wordpress/

制作聯(lián)系表單的教程概述

方法一、使用Contact Form 7 插件制作聯(lián)系表單，使用Flamingo插件記錄收到的詢盤

1. 所有wordpress網(wǎng)站都能使用，不限主題，不限頁面編輯器
   
   
2. 優(yōu)點(diǎn)：能夠提供自定義問題驗(yàn)證功能，可以實(shí)現(xiàn)簡單數(shù)學(xué)題驗(yàn)證
   
   

• 譬如2+2=?，這個(gè)功能能夠阻止大部分的廣告郵件
  
  
• 不少廣告郵件都出自一個(gè)工具：GSA Website Contact，GSA能夠根據(jù)產(chǎn)品詞搜索目標(biāo)企業(yè)網(wǎng)站，按既定規(guī)則找到聯(lián)系頁面，自動(dòng)根據(jù)自定義的廣告內(nèi)容提交表單，這也是一種常見的拓客方式（感興趣的也可以試試喲~），
  
  
• GSA還能破解谷歌驗(yàn)證碼，我也不推薦用谷歌驗(yàn)證碼，因?yàn)樗鼤?huì)讓網(wǎng)站速度變慢不少
  
  
• 別用復(fù)雜的數(shù)字計(jì)算問題，它會(huì)降低客戶提交詢盤的意愿
  
  

1. 缺點(diǎn)：相比Elementor，Contact form7不能可視化編輯，操作起來有點(diǎn)不方便，參見下圖

contact form 7制作聯(lián)系表單的操作界面







contact form 7制作的表單



方法二、使用Elementor Pro編輯器插件的form元素制作聯(lián)系表單，并用Elementor DB插件記錄收到的詢盤

1. 適合使用Elementor Pro編輯器的wordpress網(wǎng)站
   
   
2. 優(yōu)點(diǎn)：能夠可視化編輯表單，操作起來方便
   
   
3. 缺點(diǎn)：不提供自定義數(shù)字計(jì)算問題驗(yàn)證功能
   
   

elementor可視化制作聯(lián)系表單的操作界面，所見即所得







elementor制作的聯(lián)系表單



創(chuàng)建完表單后，需要配置SMTP，以便收到詢盤后能發(fā)通知到你的郵箱。



了解了兩種制作聯(lián)系表單的方法的優(yōu)缺點(diǎn)后，我們逐一講解制作表單的細(xì)節(jié)教程。

Contact Form 7 + Flamingo制作聯(lián)系表單教程

安裝并啟用插件Contact Form 7、Flamingo，相關(guān)教程：如何安裝wordpress插件（3種方法）



如果你要制作英文的詢盤表單，需要確保用戶的語言也是英文（修改方法見下圖），因?yàn)閏ontact form7會(huì)根據(jù)你的后臺(tái)語言為你創(chuàng)建表單的文案、提示信息。







修改用戶語言與詢盤表單語言一致

1. 見下圖，我們開始制作表單，進(jìn)入contact》add new，你將看到默認(rèn)表單的內(nèi)容
   
   
2. 輸入表單的標(biāo)題，譬如contact us
   
   
3. 在form頁面中制作表單內(nèi)容，下文會(huì)詳細(xì)介紹
   
   
4. 在mail頁面中制作詢盤通知郵件的模板，下文也會(huì)詳細(xì)介紹
   
   

在form頁面中，將默認(rèn)表單中的subject字段去掉，只保留Your name、Your email、Your message三個(gè)字段，因?yàn)楹唵蔚谋韱伪阌诳蛻籼峤唬灰銖?fù)雜的表單增加客戶填寫難度







接下來我們添加一個(gè)簡單的數(shù)字計(jì)算驗(yàn)證問題，以便阻擋部分廣告郵件；數(shù)字計(jì)算簡單好算即可，別搞10以上的加減法，它會(huì)增加客戶提交詢盤的難度



操作步驟如下，在form頁面中，點(diǎn)擊下圖中的quiz按鈕







填寫questions and answers，問題和答案之間用|符號(hào)隔開，譬如2+2=?|4，然后點(diǎn)擊insert tag即可將問題插入到表單中







如下圖所示，問題插入到了提交按鈕[submit “send”]上方。







如下圖所示，在字段下方增加空白行能為字段下方增加一點(diǎn)空白，通過回車增加1個(gè)空白行即可，多個(gè)空行不會(huì)累積。（實(shí)際是這個(gè)操作將label變?yōu)榱藀，而p一般都會(huì)有行下的間距，從而增加了字段間的空隙）。







至此，可以保存一下表單，你將在表單的標(biāo)題下方看到下圖中的藍(lán)色區(qū)域，復(fù)制其中的短代碼，將它黏貼到聯(lián)系我們頁面中，以便預(yù)覽表單的效果。







接下來，請(qǐng)創(chuàng)建一個(gè)聯(lián)系我們頁面，即便不使用頁面編輯器，使用wordpress默認(rèn)的編輯模式也可以使用聯(lián)系表單的短代碼，只需將上面復(fù)制的端代碼黏貼到頁面中，并保存即可。



如果你使用Elementor編輯器，可以在創(chuàng)建頁面時(shí)，在左側(cè)元素欄中，找到名為shortcode的元素，將其拖拽到右側(cè)頁面中，



然后在左側(cè)內(nèi)容框內(nèi)輸入表單代碼，你將會(huì)看到右側(cè)直接顯示了contact form7的表單，







呃…不大好看是吧，不懂css代碼就很難去調(diào)整它的外觀，當(dāng)然，可以借助其他插件來為表單定義樣式，或者直接就用這個(gè)樸素版的，



我們稍微對(duì)它做一些簡單的樣式調(diào)整，譬如將表格寬度改為全寬（我懂的css也只是入門級(jí)別的?，無法提供復(fù)雜花樣的代碼



下面是我做的“樸素的”修改，將字段寬度改為了100%全寬。（你想用的話，就拿去用吧



<label style="width:100%"> Your Name * /[text* your-name/] </label><label style="width:100%"> Your Email * /[email* your-email/] </label><label style="width:100%"> Your Message * /[textarea* your-message/] </label>/[quiz quiz-57 "2+2=? | 4"/]/[submit "Send"/]對(duì)應(yīng)的表單效果如下圖所示







下面對(duì)字段的構(gòu)成的要點(diǎn)做一下說明，譬如[text* your-name]

• text是字段的輸入類型，譬如這里表示文本輸入類型，email表示輸入郵箱類型，如果不是郵箱，將無法提交表單
  
  
• *代表這個(gè)字段是必填的
  
  
• your-name是字段的名稱，如果改了這個(gè)名稱，在mail頁面內(nèi)的郵件模板也要配套修改，我曾經(jīng)在改過字段名稱后，忘了在mail里修改，結(jié)果導(dǎo)致收到的郵件通知里缺少內(nèi)容
  
  

接下來我們?nèi)ail頁面配置郵件通知模板，在下圖中，每個(gè)序號(hào)對(duì)應(yīng)的內(nèi)容分別是

1. 在form中包含的字段，他們?cè)谙旅娴?、5、6中可調(diào)用并獲取字段的值，如若form中不包含的字段，即便引用也沒用
   
   
2. to：這里填寫郵件通知的收件人郵箱，一般默認(rèn)是后臺(tái)賬戶郵箱
   
   
3. from：這里填寫發(fā)送通知郵件的郵箱，此處要注意填寫你在smtp中配置的發(fā)件郵箱，如果你用的發(fā)件郵箱的域名不等于本網(wǎng)站域名，那么，即便填寫后頁面上出現(xiàn)?感嘆號(hào)警示也不用在意
   
   
4. subject：此處填寫郵件通知的標(biāo)題，按自己喜好填就可以了，也可以在此處加入字段的調(diào)用，譬如：來自[your-name]的詢盤
   
   
5. additional headers：默認(rèn)是reply-to:[your-email]，表示你若是回復(fù)郵件通知，那么回復(fù)郵件的收件人默認(rèn)就是發(fā)詢盤給你的郵箱，等于直接回復(fù)通知郵件就可以直接回復(fù)客戶了
   
   
6. message body：這里填寫郵件正文內(nèi)容，如若你有新增或刪減字段，在此處記得對(duì)應(yīng)把字段也進(jìn)行調(diào)整，譬如前文中，我把[your-subject]字段去掉了，那在此處也需要把它相關(guān)的內(nèi)容都刪除。
   
   

做完表單后，記得測一下郵件通知是否能收到、內(nèi)容是否準(zhǔn)確，在flamingo插件中是否有詢盤記錄（見下圖）,flamingo默認(rèn)有subject字段，如果你刪掉了這個(gè)字段，就會(huì)看到subject列內(nèi)容都是[your-subject]，沒啥關(guān)系哈~

Elementor Pro + Elementor Contact Form DB 制作聯(lián)系表單教程

我將這種方法用在了我的模板站上，并且將詢盤表單做成了全局通用的，譬如點(diǎn)擊按鈕彈出詢盤表單的popup、聯(lián)系我們頁面的表單都共用同一個(gè)

1. 配置發(fā)件郵箱賬號(hào)，在wordpress后臺(tái)安裝SMTP插件并設(shè)置發(fā)件功能
   
   
2. 安裝插件
   
   Elementor、Elementor pro
   
   、Elementor Contact Form DB并啟用
   
   
3. 用Elementor添加新模板，模板類型為popup（彈出窗），我們將在popup里放聯(lián)系表單
   
   
4. 在popup模板庫里不要選擇模板導(dǎo)入，直接點(diǎn)擊右上角關(guān)閉
   
   
5. 將heading和form元素加入到頁面，如下圖所示
   
   

6.設(shè)置需要用戶必須填寫的字段，并顯示*標(biāo)記；你也可以在左側(cè)新增字段，默認(rèn)情況下是name、email、message三個(gè)字段，建議字段不要過多，降低用戶填寫難度







7.將調(diào)整完畢的form元素右鍵存儲(chǔ)為Global元素，以便于在其他地方重復(fù)使用







8.發(fā)布表單，并將條件設(shè)為全站，保存即可，不需要設(shè)置其他（triggers或advanced rules）







9.如果需要在產(chǎn)品頁面點(diǎn)擊詢盤按鈕時(shí)彈出詢盤，請(qǐng)?jiān)趀lementor中編輯對(duì)應(yīng)頁面，并點(diǎn)擊對(duì)應(yīng)按鈕，然后在左側(cè)按鈕設(shè)置中，點(diǎn)擊link 右側(cè)的dynamic 按鈕（圖中的2），在下拉選項(xiàng)中選擇popup，然后繼續(xù)點(diǎn)擊popup，在setting中搜索并選中剛才添加的popup







設(shè)置按鈕的link值為popup







搜索已添加的popup名稱，并選擇



10.此時(shí)，點(diǎn)擊詢盤按鈕，將可見到詢盤彈出窗口







11.我們?cè)谌我划a(chǎn)品頁面提交詢盤進(jìn)行測試，查看是否能收到詢盤郵件通知以及后臺(tái)是否記錄，詢盤郵件將發(fā)送到你的wordpress賬戶郵箱里，如需添加收件郵箱，請(qǐng)?jiān)谠儽P表單中進(jìn)行配置，多個(gè)郵箱之間用英文逗號(hào)間隔即可。同時(shí)，在此處也能設(shè)置通知郵件的標(biāo)題、正文。







在發(fā)完測試詢盤后，我們查看郵箱是否收到郵件（注意檢查垃圾郵箱），同時(shí)在后臺(tái)Elementor DB中查看詢盤記錄，如下圖所示，大功告成。

本文原文由LOYSEO 發(fā)布，LOYSEO專注于WordPress、Elementor、外貿(mào)建站教程。

推薦閱讀

2020年B2B外貿(mào)建站的終極教程
2020年外貿(mào)建站需要注意什么？（4300字經(jīng)驗(yàn)談）