自适应在线咨询HTML表单模板

5 浏览

这是一个美观、响应式的在线咨询表单模板，自适应设计适用于各种设备和屏幕尺寸。

如果有相关需求可以免费下载使用。自适应在线咨询HTML表单模板

设计思路

  • 使用现代UI设计，简洁专业
  • 完全响应式布局，适配手机、平板和桌面
  • 包含表单验证和用户友好的交互
  • 使用柔和的配色方案，提升用户体验

实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咨询表单模板</title>
    <style>
        :root {
            --primary-color: #3498db;
            --primary-dark: #2980b9;
            --secondary-color: #f8f9fa;
            --text-color: #333;
            --light-gray: #e9ecef;
            --border-color: #dee2e6;
            --error-color: #e74c3c;
            --success-color: #2ecc71;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .form-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 40px auto;
            max-width: 800px;
        }
        
        .form-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .form-header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .form-header p {
            opacity: 0.9;
        }
        
        .form-body {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .required::after {
            content: " *";
            color: var(--error-color);
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        .form-col {
            flex: 1;
            padding: 0 10px;
            min-width: 250px;
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .checkbox-group input {
            width: auto;
            margin-right: 10px;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border: none;
            padding: 14px 30px;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            transition: transform 0.2s, box-shadow 0.2s;
            font-weight: 600;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .submit-btn:active {
            transform: translateY(0);
        }
        
        .error-message {
            color: var(--error-color);
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        .success-message {
            background-color: var(--success-color);
            color: white;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            margin-bottom: 20px;
            display: none;
        }
        
        @media (max-width: 768px) {
            .form-col {
                flex: 100%;
            }
            
            .form-header, .form-body {
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 10px;
            }
            
            .form-container {
                margin: 20px auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="form-header">
                <h1>在线咨询</h1>
                <p>请填写以下表单，我们的专业顾问会尽快与您联系</p>
            </div>
            
            <div class="form-body">
                <div id="successMessage" class="success-message">
                    感谢您的咨询！我们已收到您的信息，会尽快与您联系。
                </div>
                
                <form id="consultationForm">
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="firstName" class="required">名字</label>
                                <input type="text" id="firstName" name="firstName" required>
                                <div class="error-message" id="firstNameError">请输入您的名字</div>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="lastName" class="required">姓氏</label>
                                <input type="text" id="lastName" name="lastName" required>
                                <div class="error-message" id="lastNameError">请输入您的姓氏</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="email" class="required">电子邮箱</label>
                        <input type="email" id="email" name="email" required>
                        <div class="error-message" id="emailError">请输入有效的电子邮箱地址</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone" class="required">联系电话</label>
                        <input type="tel" id="phone" name="phone" required>
                        <div class="error-message" id="phoneError">请输入有效的联系电话</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="consultType">咨询类型</label>
                        <select id="consultType" name="consultType">
                            <option value="">请选择咨询类型</option>
                            <option value="product">产品咨询</option>
                            <option value="service">服务咨询</option>
                            <option value="technical">技术支持</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="message" class="required">咨询内容</label>
                        <textarea id="message" name="message" placeholder="请详细描述您的需求或问题..." required></textarea>
                        <div class="error-message" id="messageError">请输入咨询内容</div>
                    </div>
                    
                    <div class="form-group">
                        <label>您希望通过什么方式联系？</label>
                        <div class="checkbox-group">
                            <input type="checkbox" id="contactPhone" name="contactMethod" value="phone" checked>
                            <label for="contactPhone">电话</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="contactEmail" name="contactMethod" value="email" checked>
                            <label for="contactEmail">电子邮件</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="contactWechat" name="contactMethod" value="wechat">
                            <label for="contactWechat">微信</label>
                        </div>
                    </div>
                    
                    <button type="submit" class="submit-btn">提交咨询</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('consultationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 重置错误消息
            const errorMessages = document.querySelectorAll('.error-message');
            errorMessages.forEach(msg => {
                msg.style.display = 'none';
            });
            
            // 验证表单
            let isValid = true;
            
            // 验证名字
            const firstName = document.getElementById('firstName');
            if (!firstName.value.trim()) {
                document.getElementById('firstNameError').style.display = 'block';
                isValid = false;
            }
            
            // 验证姓氏
            const lastName = document.getElementById('lastName');
            if (!lastName.value.trim()) {
                document.getElementById('lastNameError').style.display = 'block';
                isValid = false;
            }
            
            // 验证邮箱
            const email = document.getElementById('email');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email.value)) {
                document.getElementById('emailError').style.display = 'block';
                isValid = false;
            }
            
            // 验证电话
            const phone = document.getElementById('phone');
            const phoneRegex = /^[\d\s\-\+\(\)]{10,}$/;
            if (!phoneRegex.test(phone.value)) {
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            }
            
            // 验证咨询内容
            const message = document.getElementById('message');
            if (!message.value.trim()) {
                document.getElementById('messageError').style.display = 'block';
                isValid = false;
            }
            
            // 如果表单有效，显示成功消息
            if (isValid) {
                document.getElementById('successMessage').style.display = 'block';
                this.reset();
                
                // 3秒后隐藏成功消息
                setTimeout(() => {
                    document.getElementById('successMessage').style.display = 'none';
                }, 5000);
            }
        });
        
        // 实时验证输入
        const inputs = document.querySelectorAll('input, textarea');
        inputs.forEach(input => {
            input.addEventListener('blur', function() {
                const errorId = this.id + 'Error';
                const errorElement = document.getElementById(errorId);
                
                if (errorElement) {
                    if (this.type === 'email') {
                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        if (!emailRegex.test(this.value)) {
                            errorElement.style.display = 'block';
                        } else {
                            errorElement.style.display = 'none';
                        }
                    } else if (this.type === 'tel') {
                        const phoneRegex = /^[\d\s\-\+\(\)]{10,}$/;
                        if (!phoneRegex.test(this.value)) {
                            errorElement.style.display = 'block';
                        } else {
                            errorElement.style.display = 'none';
                        }
                    } else if (this.hasAttribute('required') && !this.value.trim()) {
                        errorElement.style.display = 'block';
                    } else {
                        errorElement.style.display = 'none';
                    }
                }
            });
        });
    </script>
</body>
</html>

功能特点

  1. ​响应式设计​：表单在不同屏幕尺寸下都能良好显示
  2. ​表单验证​：
    • 必填字段验证
    • 邮箱格式验证
    • 电话号码格式验证
    • 实时验证反馈
  3. ​用户体验优化​：
    • 清晰的错误提示
    • 提交成功反馈
    • 直观的表单布局
  4. ​美观的UI设计​：
    • 渐变色标题栏
    • 柔和的阴影效果
    • 一致的间距和对齐

您可以直接复制此代码到HTML文件中使用，或根据需要进行自定义修改。

本文将为你提供一个美观实用的高端JavaScript弹窗登录html模板，包含完整的…
自己怎么做网站404页面？404页面在网站中起着非常重要的作用。 接下来我们将和大家…
自适应网页（Adaptive Web Design）和响应式网页（Responsiv…
404页面是网站中非常重要的组成部分，它不仅仅是错误提示页面，更是用户体验和SEO优…
HTML中的<ul>标签用于创建无序列表，特别适合表示一组没有特定顺序的…
这是一个响应式技术博客网站html首页模板，包含现代设计元素和良好的用户体验，如果你…
通常一个“自适应会员中心模板”需要满足几个核心要求：响应式布局（在各种屏幕尺寸下都能…
这不是普通的模板，而是具备现代企业形象、高度可定制性和优秀用户体验的“高级”自适应H…
职业生涯规划：正确定位，改变一生的关键步骤 在当今竞争激烈的职场环境中，职业生涯规划…
以下是一个完整的简单自适应汉堡导航菜单模板，包含所有HTML + CSS + JS代…

发表评论