dede自定义表单前台模板怎么下载？-DEDE建站-盈思创科技

DedeCMS的自定义表单功能，其前台模板并不是像文章列表那样提供一个独立的、可下载的 .htm 文件。

（图片来源网络，侵删）

它的模板是嵌入到您网站已有的普通页面模板（通常是 article_article.htm 或您自定义的页面模板）中的一小段HTML代码。

您无法找到一个通用的“自定义表单前台模板”文件直接下载使用，正确的做法是学习如何编写和嵌入这段代码。

下面我将分步为您讲解,并提供可以直接复制使用的代码模板。

第一部分：理解DedeCMS自定义表单的工作原理

一个完整的自定义表单流程包含三个部分：

（图片来源网络，侵删）

后台设置：在DedeCMS后台创建表单，定义字段（如姓名、电话、留言内容等），并获取表单ID。
前台模板：在您的页面模板中，编写HTML表单代码，并使用DedeCMS的特定标签 {dede:form} 来提交数据。
处理反馈：用户提交表单后，可以设置一个成功提示页面，或者让页面跳转。

第二部分：如何在前台模板中编写表单代码（核心内容）

这是您问题的核心,您需要将以下代码片段，嵌入到您希望显示表单的页面模板中（templets/default/article_article.htm）。

基础代码模板（可直接复制使用）

这是一个包含“姓名”、“电话”和“留言内容”三个字段的完整示例。

{dede:form name='myform' method='post'}
    <input type="hidden" name="dopost" value="send" />
    <input type="hidden" name="action" value="post" />
    <input type="hidden" name="dede_fields" value="name,text;tel,text;content,textarea" />
    <input type="hidden" name="dede_fieldsh" value='姓名,电话;留言内容' />
    <div class="form-group">
        <label for="name">您的姓名：</label>
        <input type="text" id="name" name="name" class="form-control" required />
    </div>
    <div class="form-group">
        <label for="tel">联系电话：</label>
        <input type="text" id="tel" name="tel" class="form-control" required />
    </div>
    <div class="form-group">
        <label for="content">留言内容：</label>
        <textarea id="content" name="content" class="form-control" rows="5" required></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交留言</button>
    </div>
{/dede:form}

代码详解（关键部分）

请务必理解以下几个隐藏字段的含义,这是表单能够正常工作的关键。

{dede:form name='myform' ...}:
（图片来源网络，侵删）
- 这是表单的起始标签。name 属性可以自定义，确保唯一性即可。
<input type="hidden" name="dopost" value="send" />:

固定写法,告诉DedeCMS处理程序这是一个“发送”操作。
<input type="hidden" name="action" value="post" />:

固定写法,表示这是一个前台提交的动作。
<input type="hidden" name="dede_fields" value="..." /> (最重要):
- 这个字段定义了前台表单字段与后台数据库字段的对应关系。
- 格式：前台name值,字段类型;前台name值,字段类型;...
- 示例：name,text;tel,text;content,textarea
  - name 是前台输入框的 name 属性，text 表示它在后台是文本类型。
  - tel 同理。
  - content 是前台文本域的 name 属性，textarea 表示它在后台是长文本类型。
- 常用字段类型：text (单行文本), textarea (多行文本), select (下拉), radio (单选), checkbox (多选), datetime (时间)。
<input type="hidden" name="dede_fieldsh" value='...' /> (次重要):
- 这个字段定义了后台列表页显示的标题。
- 格式：后台字段显示名称,标题分隔符;后台字段显示名称,标题分隔符;...
- 示例：姓名,电话;留言内容
  - 它会对应 dede_fields 里的字段，后台数据列表的表头就会显示“姓名”、“电话”、“留言内容”。
  - 注意这里的逗号是分隔符，它会把“姓名”和“电话”合并显示在一列，而“留言内容”单独一列，如果希望每个字段都单独一列，可以这样写：姓名;电话;留言内容。
前台表单元素:
- <input name="name">, <input name="tel">, <textarea name="content"> 这些是用户实际看到并输入的表单元素。
- 它们的 name 属性值，必须和 dede_fields 中定义的完全一致。

第三部分：完整操作步骤（从后台到前台）

假设我们要做一个“在线报名”表单。

在DedeCMS后台创建表单

登录DedeCMS后台。
菜单栏找到 [核心] -> [内容模型管理] -> [自定义表单]。
点击 [增加自定义表单]。
表单名称：填写 在线报名。
数据表：系统会自动生成一个，如 dede_addon18，无需修改。
默认排序：留空或按 id 降序。
列表模板：留空。
发布模板：留空。
跳转提示：填写提交成功后的提示文字，“报名成功！我们会尽快与您联系。”。
是否启用：选择“是”。
点击 [确定]。

记下这个表单对应的 数据表 (如 dede_addon18)，虽然我们前台代码用不到，但了解它有助于理解原理。

在前台模板中嵌入代码

进入 [模板] -> [默认模板管理]。
找到您希望显示表单的页面模板,比如文章页 article_article.htm。
在您希望显示表单的位置,粘贴上面第二部分的“基础代码模板”。

修改代码：根据您的需求修改字段，我们增加一个“选择课程”的下拉框。

{dede:form name='enrollform' method='post'}
    <input type="hidden" name="dopost" value="send" />
    <input type="hidden" name="action" value="post" />
    <!-- 修改dede_fields，增加course字段 -->
    <input type="hidden" name="dede_fields" value="name,text;tel,text;course,select;content,textarea" />
    <!-- 修改dede_fieldsh，增加课程标题 -->
    <input type="hidden" name="dede_fieldsh" value='姓名,电话;课程;留言内容' />
    <div class="form-group">
        <label for="name">您的姓名：</label>
        <input type="text" id="name" name="name" class="form-control" required />
    </div>
    <div class="form-group">
        <label for="tel">联系电话：</label>
        <input type="text" id="tel" name="tel" class="form-control" required />
    </div>
    <div class="form-group">
        <label for="course">选择课程：</label>
        <select id="course" name="course" class="form-control">
            <option value="php开发">PHP开发</option>
            <option value="前端开发">前端开发</option>
            <option value="UI设计">UI设计</option>
        </select>
    </div>
    <div class="form-group">
        <label for="content">备注信息：</label>
        <textarea id="content" name="content" class="form-control" rows="5"></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">立即报名</button>
    </div>
{/dede:form}

注意：

我修改了 dede_fields 为 name,text;tel,text;course,select;content,textarea。
修改了 dede_fieldsh 为 姓名,电话;课程;留言内容。
增加了 <select name="course"> 下拉框，其 name 值为 course，与 dede_fields 中对应。

更新前台页面并测试

在后台模板管理中,更新您修改过的页面模板（如 article_article.htm）。
前台访问对应的文章页面,您就能看到表单了。
填写信息并提交。
提交成功后会显示您在后台设置的跳转提示文字。
您可以到后台 [核心] -> [自定义表单] 中，点击您创建的表单名称（如“在线报名”），查看所有提交的数据。

第四部分：常见问题与高级技巧

Q: 如何设置表单样式？
- A: 上面代码中的 class="form-control" 和 class="btn btn-primary" 是Bootstrap框架的样式类，如果您网站使用了Bootstrap，这些样式会生效，如果没有，您可以删除这些class，或者自定义CSS样式，给每个输入框加上 style="width: 100%; padding: 8px;"。

Q: 如何增加单选按钮或复选框？

A: 以性别（单选）和兴趣（复选）为例。

dede_fields: name,text;gender,radio;hobby,checkbox;content,textarea
dede_fieldsh: 姓名;性别;兴趣;留言内容

前台HTML:

<!-- 单选框 -->
<div class="form-group">
    <label>性别：</label>
    <input type="radio" name="gender" value="男" checked /> 男
    <input type="radio" name="gender" value="女" /> 女
</div>
<!-- 复选框 -->
<div class="form-group">
    <label>兴趣爱好：</label>
    <input type="checkbox" name="hobby" value="阅读" /> 阅读
    <input type="checkbox" name="hobby" value="运动" /> 运动
    <input type="checkbox" name="hobby" value="音乐" /> 音乐
</div>

注意：单选框和复选框的 value 值就是最终提交到数据库的值。

Q: 为什么我提交后提示“未定义 dede_fields”之类的错误？
- A: 请仔细检查以下几点：
  1. {dede:form} 标签是否写错，是否完整闭合。
  2. dede_fields 和 dede_fieldsh 的 name 属性是否拼写正确。
  3. dede_fields 中定义的 name 是否和前台表单元素的 name 完全一致（包括大小写）。
  4. 字段类型是否正确（如 select 对应下拉框，radio 对应单选框）。

下载”：您不需要下载现成的模板文件，您需要做的是：

理解 {dede:form} 的工作原理，特别是 dede_fields 和 dede_fieldsh 这两个隐藏字段。
复制上面提供的“基础代码模板”。
根据您的需求，修改字段名称、类型和前台HTML结构。
将修改好的代码嵌入到您网站的任意页面模板中。

掌握了这个方法,您就可以创建任意复杂度的自定义表单前台界面了。

dede自定义表单前台模板怎么下载？