现在位置: 首页 > CMS知识 > 正文

wordpress Contact Form 7插件表单自定义css的实现方法

发布时间:2022 年 10 月 14 日

本文作者:帮建站

点击次数:334

北京网站建设在搭建网站的时候经常遇到客户要求在线留言表单的需求,那么用wordpress如何实现呢,这类的插件很多,今天就给大家介绍一个Contact Form 7插件的用法以及自定义css的如何实现方法!

一、下载Contact Form 7插件

Contact Form 7

下载>安装>启用后在左侧菜单中出现个联系的菜单

二、配置表单

点击联系菜单进入,设置页面。默认有一个表单,后面是插入的短代码,

点击编辑进行设置,首先可以修改表单名称,下面是编辑表单的模板,

可以根据自身网站需求来设置。今天就参考我最近搭建的一个新站!下面是静态样子,接下来咱们给他实现留言表单的功能!

找打静态文件的代码,复制到表单编辑框里面,然后套用css样式,这样就实现样式效果!

<div class=”Online-designer”>
<h3>001</h3>
<div class=”form”>
<form id=’whir_3′>
<dl class=”pr”>
<input id=”Online-title” type=”text” class=”text” maxlength=”10″ value=”” placeholder=”请输入您的称呼” />
<span class=”validate-error”>请输入您的称呼</span>
</dl>
<dl class=”pr”>
<input id=”Online-lxdh” type=”text” class=”text” placeholder=”请输入您的手机号码” maxlength=”250″ value=”” />
<span class=”validate-error”>请输入您的手机号码</span><span class=”validate-error”>请正确输入您的手机号码</span>
</dl>
<dl class=”pr”>
<input id=”Online-lxmj” type=”text” class=”text” maxlength=”30″ value=”” placeholder=”请输入” />
<span class=”validate-error”>请输入装修面积</span>
</dl>
<dl class=”btns”>
<input type=”button” value=”立即免费预约” class=”btn”>
</dl>
</form>
</div>
</div>

以上原站html代码,经过合并套用,看下面的代码

<div class=”form”>
<dl class=”pr”>
<input type=”text” class=”text” name=”your-name” value=”” placeholder=”请输入您的称呼” />
</dl>

<dl class=”pr”>
<input type=”text” class=”text” name=”your-phone” placeholder=”请输入您的手机号码” value=”” />

</dl>
<dl class=”pr”>
<input type=”text” class=”text” name=”your-email” placeholder=”请输入您邮箱” maxlength=”250″ value=”” />

</dl>
<dl class=”pr”>
<input id=”Online-lxmj” type=”text” class=”text” maxlength=”30″ value=”” placeholder=”您的需求” />

</dl>
<dl class=”btns”>
<input type=”submit” value=”立即免费预约” class=”btn”>
</dl>
</div>

三、调用段代码

在模板页面插入<?php echo do_shortcode( ‘ [contact-form-7 id=”1764″ title=”联系我们”] ‘ ); ?> 代码可以调用以上的css样式和功能

四、Easy WP SMTP安装插件

经过上面的三个步骤,提交以下试下效果!提示消息发送成功,但是到处你以为就成功了,接下来要安装一个插件,那就是Easy WP SMTP安装插件,可以将发送的小心发送到邮箱之中!

1、Easy WP SMTP安装插件

安装插件,然后启用,下面是qq邮箱的设置方法,如果用163或者企业邮箱,可以网上查询一下,设置完毕保存!试一下效果,SMTP qq邮箱授权码如何获取?

 

 

 

问题本身还是很简单的,只是对于不熟悉的网友来说不知道什么原因,如果英语不太好的话,就以为自己买了个假主题了。问题本身还是很简单的,只是对于不熟悉的网友来说不知道什么原因,如果英语不太好的话,就以为自己买了个假主题了。


首页 在线 手机