Contact Form 7 做询盘表单，如何在Google Analytics中跟踪到询盘提交成功，从而来判断不同流量来源的询盘提交情况呢？

有以下2个前提条件：

• 使用的是Contact Form 7插件做询盘表单
• 使用的是Google Analytics代码最新版本，登陆Analytics账号设置后里面的那段代码

在 Avada Theme Options -> Advanced -> Code Fields (Tracking etc.) 中的 Space before 中填入JS代码，并保存。

JS代码请打开：https://www.yizhiyong.com/submit-success-code.txt 完全copy里面的内容。

在Google Analytics中设置目标，在“管理” -> “数据视图”下面可以找到“目标”的设置。

点击“新建目标”后：

1. “目标设置”选择“自定义”，然后点“继续”；
2. “目标说明”中，“名称”设置为“submit success”，“类型”选择“事件”，然后点“继续”；
3. “目标详细信息”设置中，类别 等于 “contact form”、操作 等于 “submit success”，如下图所示：

在Google Analytics中的 流量获取 报告中可以查看到不同流量带来的询盘转化情况。如下图所示：

当然，这个询盘统计只是包含了通过表单提交询盘成功的，不包含直接发邮件、也不包括在线添加了Wechat和Whatsapp之类的这类询盘。

当然，这个询盘统计只是包含了通过表单提交询盘成功的，不包含直接发邮件、也不包括在线添加了Wechat和Whatsapp之类的这类询盘。

目前这个项目的询盘情况，大概有一半是直接邮件或加Whatsapp之类，另外一半才是在线提交询盘。

最近处理了几个网站的问题，归纳起来就是：

• 付费主题（the7或者avada都有）的版本太老旧了，avada目前已经5.4.2版本了，还是用的4.0.3版本，导致和个别插件不兼容
• wordpress版本太老了，和部分新的插件不兼容

对于一个外贸网站来说，就算升级Wordpress和主题了，网站外观似乎也并没有任何变化，所以通常大部分的做法是：

• 使用别人免费提供的Avada、Enfold、The7等付费主题
• 建完站后几乎不更新WP、主题及插件，避免产生不兼容的问题
• 就算要更新，要重新折腾一番这些“免费”的付费主题，费时费力
• 不更新自然是留下一些安全隐患，但是为了省钱，忍了

建议大家的做法：

• 官方买一份付费主题，大概50~60美刀，遇上搞活动的时候5折，也就是30美刀左右，我自己就在黑五的时候买了好几份付费主题备用着；
• 以Avada为例，激活主题后，可以在线升级到最新版本，还时不时会有Fusion Patcher，打上一些补丁
• 主题能方便的更新到最新版，也就不担心Wordpress和插件更新导致和主题不兼容的问题了。

使用了一个别人给的免费版本最后带来的实际折腾所耗费的时间成本大概会有：

• 主题和核心插件分离，安装主题不再那么简单了，比如Avada把Fusion Core、Fusion Builder从主题中剥离了，只是给你一个主题包是安装不好了，至少还要把几个核心插件打包另外安装；
• 升级版本，把最初折腾的过程再折腾一遍，还可能出现一些意外的情况导致花费更多时间来处理；

而官方付费的这300RMB左右的花费，把这些麻烦都省却了。

推荐想要自己搭个外贸网站的你们，花点小钱，省却这些麻烦吧~

用Avada Portfolio来制作产品详情页面的时候，为什么产品详情在产品大图(Feature Image)的旁边？该如何设置？

导致这个情况的是因为 Theme Options -> Portfolio -> Portfolio Single Post 中的设置：

• Featured Image / Video on Single Post Page，设置为ON
• Featured Image Column Size，设置为了Half Width

这种情况下，就会出现所属问题。

通常，我们把Featured Image Column Size 设置为Full Width，描述就会在大图(Feature Image)的下面了，但是这个时候很多人还是会有问题，因为不想要产品图那么大啊，除非是那些需要用超高清大图来展示的产品。

所以，我通常的做法是：

• 将Theme Options -> Portfolio -> Portfolio Single Post中的所有设置选项都设置为OFF状态
• 完全的用Fusion Builder中的功能来进行布局和填充内容。

在使用Contact Form作为询盘表单的时候，我们希望收到的邮件能显示以下信息以便快速判断询盘相关信息：

• IP地址
• 国家来源
• 访客从什么流量来源来的
• 访客在什么页面提交的询盘

默认情况下，我们可以在编辑Form的时候，在 Mail -> Message Body 中，输入下面的内容可以获取两个信息，IP及询盘提交页面这两个信息。

From: [your-name] <[your-email]>

Message:
[your-message]


---------------------------------- 
IP: [_remote_ip]
URL: [_url]

但是，默认情况下，没法直接能显示出IP所在的国家，如果不嫌烦的话，每次百度下IP地址也可以知道国家。但是，作为一个“懒人”，我希望能减少这个无畏的操作，毕竟询盘多，每个都去查挺浪费时间不是 -_-|||

安装两个插件：

• Contact Form 7 Lead info with country
• GeoIP Detection

激活，然后在 Dashboard-》Settings-》GeoIP Detection 中 Choose data source 中选择 Automatic download & update of Maxmind GeoIP Lite City 并保存。

最后，把在编辑Contact Form中的Mail -》 Message Body中输入：

From: [your-name] <[your-email]>

Message:
[your-message]


---------------------------------- 
[tracking-info]

然后，收到的邮件大概是像下面这样的：

From: Yi <yi@xxx.com>

Message:
test


---------------------------------- 

-- Tracking Info --
The user filled the form on: https://www.xxx.com/contact-us/
The user came to your website from: not set
Landing page on your website: http://www.xxx.com/
IP: 35.2xx.1xx.1xx
Country: United States (US - NA) - Region: California(CA) - Postal Code + City: 94043 Mountain View
Browser is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Safari/604.1.38

想要的信息基本上都给展示出来了。

对于一个外贸新人而言，一大早如果看到下面这样的邮件，会不会很激动，点开链接就开始输入账号密码了？

且慢！这些大概率都是骗子！为了盗取你的Linkedin用户名密码！看下点开来的链接地址就明白了。注意看那个地址是：http://sshfresh247.com/，反正就不是官方的 linkedin.com ， 官方的登陆地址页面：https://www.linkedin.com/uas/login?trk=hb_signin

可以对比下骗子的。。嗯，做的是挺像。-_-||

其实这种套路挺多的，盗QQ号、盗各种邮箱的账号密码，发个邮件说你的邮件存在风险，需要登陆确认，做了个惟妙惟肖的页面，没经验的就直接输密码进去了，人家盗了也不用改你密码，反正随时登录，用来干点坏事什么的。

互联网上到处都是坑，前行需小心谨慎。

使用Avada主题的时候，上传后的图片没有原图片清晰，怎么办？

图片上传的时候，被自动压缩过了。

在Avada Theme Options -> Advanced -> Theme Features -> WordPress jpeg Quality 中默认是 82% ，如果对图片的要求非常非常高。那么，把这个值设置为 100% 。

此问题应该可以解决。

 

如何设置Contact Form 7 中的字体，以便确保询盘表单的字体和网站的字体保持统一？

比如像下图所示，网页内容中的字体已经做了调整，字体选择的是： Montserrat ，但是询盘表单中的文字的字体是默认字体。

在Theme Options -> Custom CSS 中添加一段CSS代码：

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    color: #217dd0;
    font-family:'Montserrat'; 
}

其中Color设置的是填写表单时输入的文字的颜色，font-family设置的是默认显示出来的及输入的文字的字体。不过如果你的表单字段和案例中的不一样的话，CSS代码可能会有一点点区别。

保存设置。效果如下所示：

WordPress使用Avada主题时，默认的搜索结果页面不是很好，我们该如何调整搜索结果页面的样式？比如：

• 调整搜索出的page、post、portfolio等的布局排列方式
• 修改搜索结果页面的侧边栏
• 隐藏一些不想要的信息，比如author、date、comment、read more等
  

在 Theme Options -> Search Page 中有相关设置：

• Search Results Layout，设置搜索结果页的布局方式，里面有6种布局方式，可以一个一个选择试试看，我个人比较喜欢Grid这种；
• Search Results Content，设置搜索结果包含或者不包含那些内容
• Search Results Excerpt，设置要不要显示摘要
• Number of Search Results Per Page，设置每一页显示的搜索结果数
• Featured Images for Search Results，设置是否要显示Featured Images
• Search Field Position，结果页中的搜索框是在搜索结果上方还是最下面，或者干脆隐藏(Hide)

这个问题拆分成2个问题：

• 如何新建一个专门用于搜索结果页面的Sidebar，参考文章《如何设置Sidebar部分》
• 如何设置Search Page的Sidebar是我们新建的某个Sidebar，具体在 Theme Options -> Sidebars -> Search Page 中的 Search Page Sidebar 1 / 2 中进行选择。关于Sidebar的相关介绍，参考《Theme Options简介-Sidebars部分》

Theme Options -> Blog -> Blog Meta 中第一项设置 Post Meta 设置为Off 即可。

这个设置是关闭了所有的Meta信息，也就是在Post的页面中，也不会显示这些信息了。那比如说我们用Post做了News页面，在里面又不想完全关闭这些Meta信息。比如设置如下：

也就是开启了Post Meta，但是只留了日期(Post Meta Date)。这种设置情况下，搜索结果中也还是会显示有日期的。

这个时候，我们可以在Theme Options -> Custom CSS 中添加下面的CSS代码：

.search-results .fusion-meta-info, .search-results .fusion-single-line-meta{
    display:none;
}

保存即可。

WordPress安装了Contact Form7插件来做询盘表单，我们可能想知道不同的流量来源渠道带来的转化情况，进一步可以对每个渠道进行优化或者有的放矢。

那首先会有一个问题：我们应该如何设置，才能在Google Analytics中统计到询盘的提交情况呢？

首先，确保已经在网站上添加了Google Analytics的Tracking Code。

然后，在 </head> 标签前添加下面这段js代码：

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', 'Contact Form', 'submit', window.location.pathname);
}, false );
</script>

然后，在Google Analytics的 行为 -> 事件 -> 热门事件 的报告中可以查看到数据。

想要做个效果，点击按钮弹出一个询盘表单，该如何实现？

在Avada主题中，我们要实现这个效果，需要用到2个Element：

• Button
• Modal

当然，弹出询盘表单的话，我们还需要先制作好Contact Form。

三个步骤搞定：

1. 准备好Contact Form

建好想要的form之后，复制其Shortcode。

2. 添加并设置Modal

编辑Modal，设置Name、Heading和Contents，如下图：

• Name Of Modal，设置为：popupcontact
• Modal Heading，设置为：Contact Us Now
• Contents中填入已复制的Contact Form Shortcodes

3. 添加并设置Button

编辑Button的时候，至少需要设置2个地方，Button Text和Modal Window Anchor。

其中，Modal Window Anchor务必设置为上一步中设置的 Name of Modal。

Avada 5.0 +