微信小程序的表单有DEMO源码（参考 http://www.wxapp-union.com/article-834-1.html），将源码文件夹命名为form，文件夹下应该有四个文件：

form/form.js
form/form.json
form/form.wxml
form/form.wxss

然后在小程序里选择一个页面，比如 detail/detail.wxml 添加跳转按钮，引入这个form。

具体方法：

<!--detail.wxml-->
    <view>
      <button type="primary" bindtap="biaodan"> 我是表单按钮 </button>
    </view>

  //detail.js
  //跳转到在线预约界面
  biaodan: function () {
    wx.navigateTo({
      url: '../form/form',
    })
  },

本过程的难点在于，form提交之后，如何将数据传递到后端。

我们可以将form数据作为一个评论，提交到一个固定的文章评论里。实现方法如下：

在 form.js的data部分加入

    title: '文章内容',
    detail: {},
    commentsList:{},
    commentCount:'',
    detailDate:'',
   
    wxParseData:[],
    display:'none',
    page: 1,
    isLastPage:false,

    postID:null,
    scrollHeight: 0,

    isGetUserInfo:false,

    

    dialog: {
      title: '',
      content: '',
      hidden: true
    },
    content:'',
    userInfo:[]

再将以下代码添加进 form.js

   //获取用户信息
    app.getUserInfo(function (userInfo) {
      //更新数据
      self.setData({
        userInfo: userInfo,
        isGetUserInfo:true
      })
    });



  },


  //获取文章内容
  fetchDetailData: function (id) {
    var self = this;
   
    wx.request({
      url: Api.getPostByID(id, { mdrender: false }),
      success: function (response) {
        //console.log(response);
        self.setData({
          detail: response.data,
          postID: id,
          detailDate: util.cutstr(response.data.date, 10, 1),
          //wxParseData: WxParse('md',response.data.content.rendered)
          wxParseData: WxParse.wxParse('article', 'html', response.data.content.rendered, self, 5),
          display: 'block'

        });

        self.fetchCommentData(self.data);       
      }
    });
  },


  //获取评论
  fetchCommentData: function (data) {
    var self = this;

    if (!data) data = {};
    if (!data.page) data.page = 1;

    if (data.page === 1) {
      self.setData({
        commentsList: []
      });
    };
    wx.request({
      url: Api.getComments(data),
      success: function (response) {
        if (response.data.length < 6) {
          self.setData({
            isLastPage: true
          });
        }
        self.data.commentsList;
        self.setData({
          //commentsList: response.data,
         
          commentsList: self.data.commentsList.concat(response.data.map(function (item) {
            var strSummary = util.removeHTML(item.content.rendered);
            var strdate = item.date
            item.summary = strSummary;
            item.date = util.formatDateTime(strdate);
            if (item.author_url.indexOf('wx.qlogo.cn') >0)
            {
              item.author_url = item.author_url.replace("http", "https");
            }
            else
            {
              item.author_url ="../../images/gravatar.png";
            }
            
            return item;
           
          })),
          commentCount: "有" + response.data.length + "条评论",
          
        });


        wx.showToast({
          title: '加载中',
          icon: 'loading',
          mask: false,
          duration: 1000         

        })
        
      }
    });
  },
  //底部刷新
  loadMore: function (e) {

    var self = this;
    if (!self.data.isLastPage) {
      self.setData({
        page: self.data.page + 1
      });
      console.log('当前页' + self.data.page);
      this.fetchCommentData(self.data);
    }
    else {
      wx.showToast({
        title: '没有更多内容',
        mask: false,
        duration: 1000
      });
    }
  },


  //提交评论
  formSubmit: function (e) { 
    var self = this;   
    var name = self.data.userInfo.nickName;
    var email = "you@domain.com";
    var comment = "表单数据1：" + e.detail.value.data1 + " - 表单数据2：" + e.detail.value.data2;
    var author_url =  self.data.userInfo.avatarUrl;
    
    var postID = 0;
    if (e.detail.value.data1==0 || e.detail.value.data2==0) //容错
    {
      self.setData({
        'dialog.hidden': false,
        'dialog.title': '提示',
        'dialog.content': '没有填写表单内容'

      });

    }
    else
    {
      //检测授权
      self.checkSettingStatu();
      
      if (self.data.isGetUserInfo)
      {


        wx.request({
          url: Api.postComment(),
          method: 'post',
          data: {
            post: postID,
            author_name: name,
            author_email: email,
            content: comment,
            author_url: author_url
          },
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            //console.log(res.data)
            if (res.statusCode == 201) {
              self.setData({
                'dialog.hidden': false,
                'dialog.title': '提示',
                'dialog.content': '您的表单已提交成功，稍候客服MM将与您联系。',
                content: ''

              });

              self.fetchCommentData(self.data);

            }
            else {

              if (res.data.code == 'rest_comment_login_required') {
                self.setData({
                  'dialog.hidden': false,
                  'dialog.title': '提示',
                  'dialog.content': '需要开启在WordPress rest api 的匿名评论功能！'

                });
              }
              else if (res.data.code == 'rest_invalid_param' && res.data.message.indexOf('author_email') > 0) {
                self.setData({
                  'dialog.hidden': false,
                  'dialog.title': '提示',
                  'dialog.content': 'email填写错误！'

                });
              }
              else {
                self.setData({
                  'dialog.hidden': false,
                  'dialog.title': '提示',
                  'dialog.content': '预约单提交失败,' + res.data.message

                });
              }

            }

          },
          fail: function (res) {
            //console.log(res.data) 
          }
        });

      }

    }
   
  },
  // 检测授权状态
  checkSettingStatu: function (cb) {
    var that = this;
    // 判断是否是第一次授权，非第一次授权且授权失败则进行提醒
    wx.getSetting({
      success: function success(res) {
        console.log(res.authSetting);
        var authSetting = res.authSetting;
        if (util.isEmptyObject(authSetting)) {
          console.log('首次授权');
        } else {
          console.log('不是第一次授权', authSetting);
          // 没有授权的提醒
          if (authSetting['scope.userInfo'] === false) {
            wx.showModal({
              title: '用户未授权',
              content: '如需正常使用评论的功能，请授权管理中选中“用户信息”，然后点按确定后再次提交评论。',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                  wx.openSetting({
                    success: function success(res) {
                      console.log('openSetting success', res.authSetting);
                      var as = res.authSetting;
                      for (var i in as) {
                        
                        if(as[i])
                        {
                          //获取用户信息
                          app.getUserInfo(function (userInfo)                             {
                            //更新数据
                            that.setData({
                              userInfo: userInfo,
                              isGetUserInfo: true
                            })
                          });
                        }
                        
                      }                     

                    }
                  });
                }
              }
            })
          }
        }
      }
    });
  },
  confirm: function () {
    this.setData({
      'dialog.hidden': true,
      'dialog.title': '',
      'dialog.content': ''
    })
  },

这段代码第125行的 var postID = 0; 这个0可以改为任何你已经发布过的文章或页面的ID。

最后，到form.wxml里末尾添加

<modal title="{{dialog.title}}" hidden="{{dialog.hidden}}" no-cancel bindconfirm="confirm">{{dialog.content}}</modal>

确保数据提交完成后有提示框弹出。

管理员可以通过一个评论提醒插件，将评论转发到手机上。至此，我们完美地实现了小程序表单数据传输到后端的过程。

form.js 的 完整form表单提交代码如下：

 //提交评论
  formSubmit: function (e) { 
    var value = e.detail.value; //新增定义
    var myaddress = this.data.address;
    var self = this;   
    var name = self.data.userInfo.nickName;
    var email = "submit@abc.com";
    var comment = "学员姓名：" + e.detail.value.name + " - 学员电话：" + e.detail.value.phone + " - 学员地址：" + myaddress + " - 培训类别：" + e.detail.value.trainingtype;
    var author_url =  self.data.userInfo.avatarUrl;
    
    var postID = 2017;
    if (e.detail.value.name.length == 0 || e.detail.value.phone.length == 0 || e.detail.value.trainingtype.length == 0)
    {
      self.setData({
        'dialog.hidden': false,
        'dialog.title': '提示',
        'dialog.content': '报名信息请填写完整'

      });

    }
    else
    {
      //检测授权
      self.checkSettingStatu();
      
      if (self.data.isGetUserInfo)
      {


        wx.request({
          url: Api.postComment(),
          method: 'POST',
          data: {
            post: postID,
            author_name: name,
            author_email: email,
            content: comment,
            author_url: author_url
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //console.log(res.data)
            if (res.statusCode == 201) {
              self.setData({
                'dialog.hidden': false,
                'dialog.title': '提示',
                'dialog.content': '您的报名表已提交成功，稍候我们的老师会与您联系。',
                content: ''

              });

              self.fetchCommentData(self.data);

            }
            else {

              if (res.data.code == 'rest_comment_login_required') {
                self.setData({
                  'dialog.hidden': false,
                  'dialog.title': '提示',
                  'dialog.content': '需要开启在WordPress rest api 的匿名评论功能！'

                });
              }
              else if (res.data.code == 'rest_invalid_param' && res.data.message.indexOf('author_email') > 0) {
                self.setData({
                  'dialog.hidden': false,
                  'dialog.title': '提示',
                  'dialog.content': 'email填写错误！'

                });
              }
              else {
                self.setData({
                  'dialog.hidden': false,
                  'dialog.title': '提示',
                  'dialog.content': '报名信息提交失败,' + res.data.message

                });
              }

            }

          },
          fail: function (res) {
            //console.log(res.data) 
          }
        });

      }

    }
   
  },
  // 检测授权状态
  checkSettingStatu: function (cb) {
    var that = this;
    // 判断是否是第一次授权，非第一次授权且授权失败则进行提醒
    wx.getSetting({
      success: function success(res) {
        console.log(res.authSetting);
        var authSetting = res.authSetting;
        if (util.isEmptyObject(authSetting)) {
          console.log('首次授权');
        } else {
          console.log('不是第一次授权', authSetting);
          // 没有授权的提醒
          if (authSetting['scope.userInfo'] === false) {
            wx.showModal({
              title: '用户未授权',
              content: '如需正常使用评论的功能，请授权管理中选中“用户信息”，然后点按确定后再次提交评论。',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                  wx.openSetting({
                    success: function success(res) {
                      console.log('openSetting success', res.authSetting);
                      var as = res.authSetting;
                      for (var i in as) {
                        
                        if(as[i])
                        {
                          //获取用户信息
                          app.getUserInfo(function (userInfo)                             {
                            //更新数据
                            that.setData({
                              userInfo: userInfo,
                              isGetUserInfo: true
                            })
                          });
                        }
                        
                      }                     

                    }
                  });
                }
              }
            })
          }
        }
      }
    });
  },
  confirm: function () {
    this.setData({
      'dialog.hidden': true,
      'dialog.title': '',
      'dialog.content': ''
    })
  },