Elementor表单:电话字段添加国家区号和国旗选择器教程

Elementor表单:电话字段添加国家区号和国旗选择器教程
Elementor表单:电话字段添加国家区号和国旗选择器教程,使用免费插件即可实现为Form添加下拉手机国际区号选择功能。
文章目录

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

为表单添加电话国家区号很重要?

在表单中为手机号字段添加国家区号选择器可以显著提升用户体验,也能很大程度确保网站收到的表单数据准确性。

试想一下,在客户填写表单的手机号字段时,如果没有国家区号选择,客户可能会忘记填写区号,导致即使收到精准客户的询盘,也没办法有效联系。

这一个小小的功能,直接关系到B2B网站的转化率,所以表单的国家区号选择功能很重要。

为Elementor表单电话字段添加国家区号和国旗选择器

首先,需要在WordPress后台插件界面搜索Country Code For Elementor Form Telephone Field插件

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-logo
一线品牌VPS服务器,稳定、不贵、性能强
Clouvider-logo
二线品牌VPS服务器,稳定、便宜、性能强
文章标签
文章推荐
文章目录
相关文章
简体中文