AVADA中用CONTACT FORM 7 设置NEWSLETTER表单

今天继续为大家带来一个用contact form 7制作的newsletter表单，具体效果如下：

[attach]6470[/attach]

这个样式的表单的主要原理是在一张背景图片上添加了一个表单。那么就需要一张背景图片。

环境： WORDPRESS AVADA 3.8.4
插件： CONTACT FORM 7

1）新建一个contact form 7 的表单，具体方法请见 [Contact Form 7 基础表单新建教程](http://ask.imiker.com/question/5227)

在这个新建过程中，我们需要为表单的选项添加一个可以自定义CSS的ID. 方便对表单的样式进行控制。

[attach]6471[/attach]
这个ID的名字随便你设置，只要不与其它的CSS ID名字相同就可以了。之后再添加一个提交按钮就可以了。

[attach]6472[/attach]

保存。

2）新建PAGE, 添加如下元素
[attach]6473[/attach]
我们主要是把这个表单放在2/5这个栏中，所以在里面添加了一个TEXT的文本元素。把刚才做好的CONTACT FORM 7的short code 添加到TEXT的元素中。然后preview一下看看效果如下

[attach]6474[/attach]

3）现在需要对各个元素进行相应的设置。
首先设置fullcontainer 的背景，上传大家需要的背景图片。宽度最好与你的页面宽度一致，高度根据你要实现的内容来定。比较我们现在设置的背景图片大小为： 1100px * 87px .
添加背景

[attach]6475[/attach]

选择design, 去除上下的padding. 改为0

[attach]6476[/attach]

此时preview看一下：

[attach]6477[/attach]

4）定义contact form 7的样式。 F12审查元素, 可以找到我们刚才新建contact form 7时定义的ID 名字。

[attach]6478[/attach]

然后点击图中的 “＋　”　号对ＣＳＳ　进行调试．
主要是对email这个输入框的width 和 height进行控制。大家根据自己的实际情况设置相应的数值。后面加上important提高这个的优先级。

[attach]6479[/attach]

效果如下：

[attach]6480[/attach]

现在已经在同一行里面了，高度也与submit一致。
注意：如果需要对submit的样式也进行自定义，就需要在新建表单的时候对submit也添加CSS ID.

4) 由于AVADA的主题样式主要是在style.css里面，所以我们需要把刚才的width height的设置添加到CSS文件中去，才能生效。找到style.css, 添加如下的css 代码，保存。

[attach]6481[/attach]

此时再preview一下，css 已经生效（如果发现没有生效，可以清除一下cookie再试试）

[attach]6482[/attach]

5）此时表单的置顶的，我们需要对2/5这个元素进行设置。

设置padding的值为： 20px 0px 0px 0px
margin: 0px

注意：这个值需要一点一点的去调试。

preview一下，效果如下：

[attach]6484[/attach]