无插件(手动)添加弹出联系表单

在另一文中讲到使用Sticky Popup做侧边停靠联系表单,所谓众口难调,有人喜欢用WUFOO,也有人喜欢用内页弹出层(看起来像个窗口),那么今天就手工添加一个。

涉及到四步操作:

1,上传图片feedback-btn.png,获取其地址;

2,添加CSS代码,将刚刚获取的图片地址修改其中;

3,添加内容代码到header.php里,并完成表单代码的添加;

演示效果:下载此文件,打开index.html查看效果。

20150606105346744_easyicon_net_32图片/代码下载

使用Sticky Popup做侧边停靠联系表单

效果演示:http://www.yobots.org/goodspace/

jdfw

第一步,安装插件 sticky popup

第二步,基本设置,

注意:A,图标的尺寸是40*40像素,有必要时要用PS进行旋转处理。

B,Popup Top Margin项仅对“左”或“右”位置起作用。

第三步,完成内容填写

注意:如果需要放置表单,需要提前安装Contact Form 7

第四步,自定义CSS使其外观完整。

以下代码是http://www.yobots.org/goodspace/站的,其它网站需要作适当修改。

/*Sticky Popup 插件*/
.sticky-popup-left .popup-image { margin: -8px -135px 0 0 !important;}
/*Sticky Popup 内表单*/
input.mn-kalated, input.me-kalated { width:240px !important; height:20px !important; padding:6px 4px !important; margin: 10px 5px 10px !important;}
textarea.mg-kalated {width:240px !important; height:60px !important; padding:6px 4px !important; margin: 10px 5px 10px !important;}