wordpress有许多表单制作插件来完成这个工作,我们同样可以选择使用这些插件来制作漂亮的表单,但使用插件过多可能会导致您的网站速度变慢,我将为大家详细介绍如何使用常用的ACF插件来制作一个简单的询盘表单。
在此之前,我也尝试用过表单插件,比如非常知名的CF7插件,比如wpforms插件,并制作了详细的教程:
但有时候除了考虑网站速度,还要考虑客户能不能接收使用插件,况且并不是所有的询盘表单都很复杂,也许使用代码来完成可以更轻松和简单,这是我制作的表单效果:
可以通过仪表盘简单的管理询盘表单:
可以通过编辑修改是否已经联系过表单客户了:
最后提醒一下,此教程是ACF插件高级教程,可能需要有一定的代码基础,如果您毫无代码基础,那么使用插件可能是最好的选择。
首先,确保您已经成功安装了ACF插件PRO版本,你可以将ACF插件集成到主题,这样方便开发而且速度会更快一些:
我们新建一个自定义文章类型,可以叫他表单,或者表格都可以:
新建的自定义文章类型,用存储客户提交表单后的信息,那么他肯定是不需要“标题”,“描述”等等之类的内容的,我们仅仅需要收集客户的姓名,联系方式即可。所以这个新建的类型就不需要这些基础的字段了:
直接提交后,就开始给它新建自定义字段,同样我们打开自定义字段组选项,新建一个自定义字段组,且这个字段组只为上边新建的这个自定义文章类型为表单的服务:
保存后,我们发现仪表盘菜单里边已经有了询单(或者表单)这个文章类型,打开它看一下,发现需要的属性都在:
那么后端结构已经完成了,现在的问题是,这些表单数据肯定不是我们从后端来填写的,而是通过前边的表格来收取客户数据,那该怎么办呢?
其实ACF插件提供了非常强大的函数来解决问题,非别需要acf_form()、和acf_form_head() 两个函数。
找到我们需要添加询单表单的页面,然后添加一下代码:
<?php acf_form([ 'field_groups' => [ 23457 ], 'post_id' => 'new_post', 'new_post' => array( 'post_type' => 'formkey', 'return' => home_url ( ' ' ), 'post_status' => 'publish' ), 'submit_value' => __ ( '提交' , 'txtdomain' ), 'updated_message' => false ]); ?>
代码解释:
field_groups 对象的值,就是你要输出的字段组的id,我们可以通过后台仪表盘来获取:
post_id的值为new_post时,表示新建一个文章类型,这个表单是客户提交的信息,那肯定不属于任何文章,而是新建一个文章类型为“表单”的帖子,因此post_type的值,就是我们在仪表盘自定义的表单的文章类型,我这里定义的formkey,命名不规范,大家知道原理即可。下边的return是返回值,可以填写返回的地址。post_status就是帖子发布的状态了。这个因为是我们自己后台仪表盘看,所以没有实际意义。
保存以后,发现是不是表单已经出来了,就是不太美观,我们只需要自己定义下css美化一下即可。
完了吗?显然没有,后台仪表盘的询单列表页,并不是我们想要的,需要自定义下列表页,自定义列表页不是一个简单的工作,我们可以使用manage_{your_page}_posts_columns过滤器和manage_{your_page}_posts_custom_column钩子来完成,具体使用方法我将在下边的文章详细解释,你也可以查询官方文档或者搜索一下,有不少教程,我将具体代码贴出来给大家参考:
add_filter( 'manage_formkey_posts_columns', 'formkey_filter_posts_columns' ); function formkey_filter_posts_columns( $columns ) { $columns['ty_name'] = __( '姓名' ); $columns['ty_tel'] = __( '电话', ); $columns['Processing'] = __( '处理结果', ); return $columns; } add_filter( 'manage_formkey_posts_columns', 'smashing_formkey_columns' ); function smashing_formkey_columns( $columns ) { $columns = array( 'cb' => $columns['cb'], 'ty_name' => __( '姓名' ), 'ty_tel' => __( '电话' ), 'Processing' => __( '处理结果' ), 'date' => _( '日期' ) ); return $columns; } add_action( 'manage_formkey_posts_custom_column' , 'custom_formkey_column', 10, 2 ); function custom_formkey_column( $column, $post_id ) { switch ( $column ) { case 'ty_name' : echo get_post_meta( $post_id , 'ty_name' , true ); break; case 'ty_tel' : echo get_post_meta( $post_id , 'ty_tel' , true ); break; case 'Processing' : $a = get_post_meta( $post_id , 'Processing' , true ); if($a==NULL){ echo "未处理"; }else{ echo $a; } break; } }
不必搞定意思,大家可以把对应的字段换为自己定义的字段就可以直接使用了,我这里做了一个判断,因为客户提交过来的表单,我们并不知道哪个处理了哪个没处理,所以就添加了一个单选字段“Processing”,但这个字段又不能与之前新建的字段组放一款,原因是这个字段并不需要前端输出,是我们自己再仪表盘用的,所以要单独放一个字段组:
而这个字段,默认是未联系,但我发现默认值并没有输出任何值出来,而是输出的NULL,因此加了个判断,如果输出的是NULL,就是这个表单还没有查看。
评论0