如何自定义修改Contact form 7表单外观样式

contact form 7虽然创建表单很容易,但如果要构建比较复杂的表单,就需要一些技巧了。

有经验的WordPress用户,能熟练使用HTML和CSS,能够根据自己的特殊要求构建和设计他们的CF7表单,但对于无代码经验的新手来说,想要修改CF7的外观皮肤样式简直比登天还难。

其实你再安装一个叫contact form 7 skins的WP插件就能解决这个问题,此插件扩展了CF7的功能,为CF7提供了一个完整的解决方案,大大增强了CF7的功能和用户友好性,让新手也能很容易的更换CF7皮肤和样式,做出不同风格的表单吸引访客。

 

contact form 7 skins插件分为免费版和付费版,一般大家使用免费版就够了,我先介绍它的安装方法,再介绍使用方法。OK,Let’s go!

 

怎么安装contact form 7 skins插件

 

首先登陆你的WP后台,在左边菜单栏找到Plugins(插件),选择Add New(安装新插件),在右上角的搜索框里输入contact form 7 skins,你会看到下图,点击Avtivate就开始安装了,安装完当你使用CF7时,在编辑表单的页面的底部会显示CF7 skins的相关设置。

 

如果您购买了CF7 Skins Pro版本,则需要重新安装CF7 Skins Pro。CF7 Skins Pro插件的安装需要先去cf7skins.com上的帐户信息中心下载Czip文件,然后通过WP后台在线上传安装,安装完之后需要输入许可证密钥才能激活使用。

相比免费版,Pro版提供更多的外观样式选项,关于WP插件在线上传安装的方法,不会的朋友可以去看我写的WordPress插件安装及使用方法,我在这里就不重复介绍了。

 

如何使用contact form 7 skins插件

 

contact form 7 skins插件是和contact form 7配套使用的,所以使用它的前提是你已经安装了CF7。

具体使用方法如下,WP后台左边菜单栏Contact —> Contact Forms,选择你要编辑的那个表单,点击去,拖到最底部,你会看到下图。

你可以选择表单的外观样式,插件内置了很多不同的样式,点击Details可以查看表单具体是什么样子,点击Select就是使用这个表单,只要点击Select,表单的代码就会变成你所选择的那个,如下图所示。

contact form 7 skins不仅可以选择表单外观样式,还可以选择表单外观皮肤,设置皮肤的话,切换到Style,免费版有18个皮肤可以选择,如下图所示,按照自己的喜好选择即可。

设置完CF7表单样式和皮肤之后,把Shortcode(短代码)添加到你要使用表单的页面,放入短代码时请切换到Text模式(只要是添加代码到页面里都是选择Text模式,否则有些代码会不生效)。

 

 

至此,就算你是零基础,无代码经验,不会使用HTML和CSS,你也可以轻松搞定CF7的外观样式和皮肤,是不是很简单,不得不佩服WP的强大,需要某个功能时安装插件就能解决。

 

总结

 

CF7自定义外观样式的设置方法就介绍完了,主要是靠CF7的配套插件contact form 7 skins来完成,现在让我们一起来看看通过contact form 7 skins修改的表单是什么样子。

如果你想做一个这样的表单,快去安装contact form 7 skins吧,你也可以做到。

未经允许不得转载:技术啦 - 关注IT,建站和运维,分享最新教程,资源 » 如何自定义修改Contact form 7表单外观样式

赞 (0) 打赏

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. Aly ChimanHello there, My name is Aly and I would like to know if you would have any interest to guest post on our blog alychidesigns.com to promote your website here at huur.cn ? I am looking for people or businesses that would like to contribute to our sites blog and if you are willing to post on our site, we would add an author link and one promotional link in the body of the article. If you are interested please let me know. Thank you Aly回复
  2. 寇毅aaaaa内容aaaaa回复
  3. Judi Hanley医药仙丹力量回复
  4. WANGAAAA內容AAAA回复