Elementor表單:電話欄位新增國家區號和國旗選擇器教學

Elementor表單:電話欄位新增國家區號和國旗選擇器教學
Elementor表單:電話欄位新增國家區號和國旗選擇器教學課程,使用免費外掛程式即可實現為Form新增下拉手機國際區號選擇功能。
文章目錄

本篇文章共 829 字,预计阅读时间 4 分钟

為表單新增電話國家區號很重要?

在表單中為手機號欄位新增國家區號選擇器可以顯著提升使用者體驗,也能大幅確保網站收到的表單資料準確性。

試想一下,當客戶填寫表單的手機號欄位時,如果沒有國家區號選擇,客戶可能會忘記填寫區號,導致即使收到精確客戶的詢盤,也沒辦法有效聯繫。

這一個小小的功能,直接關係到B2B網站的轉換率,所以表單的國家區號選擇功能很重要。

為Elementor表單電話欄位新增國家區號和國旗選擇器

首先,需要在WordPress後台外掛程式介面搜尋Elementor 表單電話欄位的國家/地區代碼外掛

WordPress安裝Country Code For Elementor Form Telephone Field插件

安裝並啟用該插件。

然後打開你的Elementor Form表單頁面:(如果還未建立表單,可以參考Elementor Form使用教學課程)。

Elementor Form Tel欄位開啟WordPress安裝Country Code(電話國家區號)

在表單小元件的設定裡,開啟Tel的Country Code選項。

也可以在Default Country中設定預設顯示的區號,用國家簡稱代表,如us(美國)、in(印度)等。

但是,我們看到Tel字段的國家代碼部分距離字段左側有很大的邊距,需要用CSS代碼進行調整:

設定國旗和國家區號的樣式

開啟Form組件的進階設置,點選Custom CSS,將下方程式碼填入:

(這段程式碼的意思是將國家區號選擇器按鈕的內距調整為10px)

.cfefp-intl-container button.iti__selected-country{
    padding: 10px;
}

然後儲存頁面,來到該頁面的前端:

測試表單的電話國家區號功能

可以看到,國家區號和國旗選擇器功能可以正常是用,我們來填寫表單內容,進行測試。

表單測試成功,成功接收到電話的國家區號

測試結果沒問題,可以正常收到表單,電話號碼附帶了我們選擇的區號。

以上就是本篇教程全部內容。

推薦你關注本站的外貿建站教程WP進階教程

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
Clouvider 標誌
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章
繁體中文