搜索
织梦建站

织梦在线预约报名模板如何快速搭建？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 12 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 41 分钟
位置： 首页 › 织梦建站 › 正文

下面我将为您提供一个完整、详细的在线预约报名模板方案，包括页面设计思路、前端代码示例、后端功能实现以及后台管理流程。

织梦在线预约报名模板
（图片来源网络，侵删）

整体设计思路

一个优秀的预约报名系统,应该包含以下几个核心部分：

  1. 前端展示页：用户看到并填写信息的页面，需要设计美观、表单清晰、操作简单。
  2. 数据接收与处理：用户提交后，数据如何安全地发送到服务器并保存。
  3. 后台管理：管理员如何查看、审核、导出和管理预约信息。
  4. 状态反馈：用户提交后能得到即时反馈，管理员审核后也能通知用户。

前端页面设计 (HTML + CSS + JavaScript)

这里我们设计一个简洁、专业的预约报名表单。

页面结构 (index.html)

假设这是一个独立的页面,或者可以嵌入到DedeCMS的任意栏目页中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">在线预约报名 - [这里放您的网站名称]</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .appointment-container {
            max-width: 800px;
            margin: 50px auto;
            background: #fff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .page-header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 15px;
        }
        .form-label {
            font-weight: bold;
            color: #333;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            width: 100%;
            padding: 12px;
            font-size: 16px;
        }
        .alert {
            display: none; /* 默认隐藏，提交成功后显示 */
        }
    </style>
</head>
<body>
    <div class="container appointment-container">
        <div class="page-header">
            <h1>在线预约报名</h1>
            <p class="text-muted">请认真填写以下信息，我们将在24小时内与您联系。</p>
        </div>
        <!-- 提交成功/失败的提示信息 -->
        <div class="alert alert-success" role="alert">
            <strong>提交成功！</strong> 我们已收到您的报名信息，请注意接听我们的电话或查收邮件。
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>提交失败！</strong> 请检查网络连接或联系管理员。
        </div>
        <form id="appointmentForm" action="/plus/diy.php" method="post" enctype="multipart/form-data">
            <!-- 1. 隐藏的必要参数 -->
            <input type="hidden" name="action" value="post">
            <input type="hidden" name="diyid" value="1"> <!-- 这里的1需要替换为你的自定义表单ID -->
            <input type="hidden" name="do" value="2">
            <input type="hidden" name="dede_fields" value="name,text;tel,text;email,text;course,text;time,text;remark,text">
            <input type="hidden" name="dede_fieldshash" value="这里需要动态生成">
            <!-- 2. 表单字段 -->
            <div class="mb-3">
                <label for="name" class="form-label">您的姓名 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="name" name="name" required placeholder="请输入您的真实姓名">
            </div>
            <div class="mb-3">
                <label for="tel" class="form-label">联系电话 <span class="text-danger">*</span></label>
                <input type="tel" class="form-control" id="tel" name="tel" required placeholder="请输入11位手机号">
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">电子邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="用于接收课程资料">
            </div>
            <div class="mb-3">
                <label for="course" class="form-label">意向课程 <span class="text-danger">*</span></label>
                <select class="form-select" id="course" name="course" required>
                    <option value="">请选择...</option>
                    <option value="Java开发实战班">Java开发实战班</option>
                    <option value="Python数据分析班">Python数据分析班</option>
                    <option value="UI/UX设计精品课">UI/UX设计精品课</option>
                    <option value="前端高级工程师">前端高级工程师</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="time" class="form-label">期望开班时间</label>
                <input type="text" class="form-control" id="time" name="time" placeholder="如：2025年10月 或 随时">
            </div>
            <div class="mb-3">
                <label for="remark" class="form-label">备注/留言</label>
                <textarea class="form-control" id="remark" name="remark" rows="3" placeholder="请输入您想了解的其他信息..."></textarea>
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="agreement" required>
                <label class="form-check-label" for="agreement">
                    我已阅读并同意 <a href="#">《用户协议》</a> 和 <a href="#">《隐私政策》</a>
                </label>
            </div>
            <button type="submit" class="btn btn-primary">立即提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('appointmentForm');
            const successAlert = document.querySelector('.alert-success');
            const dangerAlert = document.querySelector('.alert-danger');
            // 在页面加载时生成hash值
            // 这里的生成逻辑需要和后端保持一致，DedeCMS官方有提供JS，这里为了简化，直接写死一个示例
            // 实际项目中，你应该从DedeCMS官方文档或JS文件中找到正确的生成方法
            // document.querySelector('input[name="dede_fieldshash"]').value = fieldshash('name,text;tel,text;...', 'post');
            // 为了演示，我们用一个固定的值代替
            document.querySelector('input[name="dede_fieldshash"]').value = 'a1b2c3d4e5f6...';
            form.addEventListener('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交
                // 这里可以添加前端验证逻辑，例如手机号格式验证
                const telValue = document.getElementById('tel').value;
                if (!/^1[3-9]\d{9}$/.test(telValue)) {
                    alert('请输入正确的手机号码！');
                    return;
                }
                const formData = new FormData(form);
                fetch(form.action, {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status == 1) { // 假设成功返回 {status: 1, msg: '成功'}
                        form.style.display = 'none'; // 隐藏表单
                        successAlert.style.display = 'block'; // 显示成功提示
                    } else {
                        dangerAlert.textContent = data.msg || '提交失败，请重试。';
                        dangerAlert.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    dangerAlert.textContent = '网络错误，请检查您的连接。';
                    dangerAlert.style.display = 'block';
                });
            });
        });
    </script>
</body>
</html>

关键点说明

  • Bootstrap框架：用于快速构建响应式布局，美观且兼容性好。
  • 表单属性：
    • action="/plus/diy.php"：DedeCMS处理自定义表单的固定地址。
    • method="post"：使用POST方法提交数据，更安全。
    • enctype="multipart/form-data"：如果需要上传文件，必须添加此属性。
  • 隐藏字段：这是DedeCMS自定义表单的核心。
    • diyid：自定义表单的ID，你需要在DedeCMS后台创建表单后获得此ID。
    • dede_fields：定义了表单字段名和类型，格式为 字段名,类型;字段名,类型;...。text是单行文本，textarea是多行文本。
    • dede_fieldshash：一个验证字段，防止数据被恶意提交。它的值必须由JS动态生成，且生成逻辑要与DedeCMS后端一致，上面的JS中只是一个占位符，实际使用时需要找到正确的生成方法。
  • 前端交互：
    • 使用fetch API进行异步提交，避免页面刷新。
    • 提交成功后,隐藏表单并显示成功提示，用户体验更好。
    • 添加了简单的手机号格式验证。

后台功能实现 (DedeCMS配置)

这是让表单“活”起来的关键步骤。

织梦在线预约报名模板
（图片来源网络，侵删）

创建自定义表单

  1. 登录你的DedeCMS后台。
  2. 在左侧菜单栏找到 【核心】 -> 频道管理】。
  3. 在页面顶部点击 【增加自定义表单】。
  4. 填写表单信息：
    • 表单名称：填写一个你容易识别的名字，在线预约报名”。
    • 表单提示：可以留空，或填写一些说明文字。
    • 成功提示：用户提交成功后显示的文字，您的预约信息已提交成功，我们会尽快与您联系！”。
    • 表单列表命名规则：系统会自动生成，如 diyform_1，这里的1就是你的diyid。
  5. 添加字段：这是最重要的部分。
    • 点击 【增加字段】。
    • 字段名：name (必须与HTML中的name属性一致)
    • 字段类型：单行文本
    • 字段提示：您的姓名
    • 是否必填：勾选
    • 保存。
    • 重复此步骤,添加tel（单行文本）、email（单行文本）、course（下拉菜单）、time（单行文本）、remark（多行文本）等字段。
    • 对于course下拉菜单：在添加字段时，选择“下拉菜单”，然后在“后台参数”中填写选项，每行一个，如：
      Java开发实战班
Python数据分析班
UI/UX设计精品课
前端高级工程师
  6. 保存所有设置。

管理预约数据

  1. 在后台菜单栏找到 【核心】 -> 频道管理】。
  2. 你会看到刚才创建的自定义表单,点击它进入。
  3. 在这里你可以：
    • 查看所有提交的记录。
    • 审核记录：可以设置“待审核”、“已审核”等状态。
    • 修改和删除记录。
    • 导出数据：可以将数据导出为Excel文件，方便进行后续处理和分析。

后台管理流程优化

仅仅在后台查看数据可能不够,我们可以增加一些功能让管理更高效。

设置邮件提醒

当有新的预约时,系统自动发送邮件通知管理员。

  1. 在DedeCMS后台,找到 【系统】 -> 【系统基本参数】 -> 【核心设置】。
  2. 确保 “网站发信EMAIL” 和 “SMTP服务器” 等邮件相关参数已正确配置。
  3. 回到你的自定义表单管理页面。
  4. 点击 【增加字段】，添加一个 “发送到指定邮箱” 类型的字段。
  5. 在“后台参数”中，输入你希望接收通知的管理员邮箱，多个邮箱用逗号隔开。
  6. 保存,这样，每次有新数据提交时，DedeCMS会自动将表单内容邮件发送到指定地址。

前端展示已报名人数（可选）

如果想增加紧迫感,可以在前端展示“已有XXX人报名”。

  1. 在自定义表单管理页面,点击 【字段管理】。
  2. 新增一个字段,ip，类型为ip，用于记录提交者IP。
  3. 在需要显示人数的地方（比如报名按钮旁边），使用DedeCMS的标签调用：
    已有 {dede:php}
    $dsql = new DedeSql(false);
    $dsql->SetQuery("SELECT COUNT(*) FROM `dede_diyform1`"); // 注意：表名是 `dede_` + 你的表单列表命名规则
    $dsql->Execute();
    $count = $dsql->GetOne();
    echo $count['COUNT(*)'];
{/dede:php} 人报名

    注意：直接在模板中使用{dede:php}标签有安全风险，确保你的网站是安全的，或者考虑使用更安全的方式。

    织梦在线预约报名模板
    （图片来源网络，侵删）

总结与注意事项

  • 安全性：始终对用户输入进行过滤和验证，防止SQL注入和XSS攻击，DedeCMS的自定义表单功能在这方面做得还不错，但前端验证和后台管理员的操作规范同样重要。
  • 用户体验：清晰的表单设计、即时的反馈和友好的提示是成功的关键。
  • 测试：在上线前，务必多次测试表单的提交、数据保存、邮件发送等功能，确保一切正常。
  • dede_fieldshash：这是最容易出错的地方，务必确保其生成逻辑正确，否则表单将无法提交，你可以从DedeCMS官方论坛或模板文件中查找相关的JS代码。

这个模板方案为你提供了一个坚实的基础,你可以根据自己网站的具体风格和业务需求进行修改和扩展。

-- 展开阅读全文 --
头像
strcat函数如何实现字符串连接？
« 上一篇 03-04
织梦导航下拉菜单标签怎么用？
下一篇 » 03-04

相关文章

取消
微信二维码
支付宝二维码

目录[+]