模板特点

  • 完全响应式: 在桌面、平板和手机上都能完美显示。
  • 现代设计: 使用了卡片布局、柔和的阴影和舒适的配色方案。
  • 功能齐全: 包含联系表单、多渠道联系方式、嵌入地图。
  • 用户友好: 表单包含实时验证,交互元素有视觉反馈。
  • 易于定制: 代码结构清晰,您可以根据自己的品牌进行修改。

模板预览

  • 桌面视图:

    联系我们响应式网页模板
    （图片来源网络，侵删）

  • 手机视图:

如何使用

  1. 复制代码: 将下面的 HTML、CSS 和 JavaScript 代码分别复制到对应的文件中（index.html, style.css, script.js）。
  2. 替换信息: 将所有 [占位符] 替换为您自己的实际信息（公司名称、地址、电话、邮箱、地图嵌入代码等）。
  3. 部署: 将这些文件上传到您的服务器或使用任何静态网站托管服务即可。

HTML 代码 (index.html)

<!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="style.css">
    <!-- 引入一个图标库，这里使用 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header class="page-header">
            <h1>联系我们</h1>
            <p>我们很乐意听取您的意见和建议，请随时与我们联系。</p>
        </header>
        <main class="contact-content">
            <!-- 左侧：联系表单 -->
            <section class="contact-form-container">
                <h2>发送消息</h2>
                <form id="contact-form" action="mailto:your-email@example.com" method="POST" enctype="text/plain">
                    <div class="form-group">
                        <label for="name">您的姓名</label>
                        <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
                        <span class="error-message" id="name-error"></span>
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" name="email" placeholder="your.email@example.com" required>
                        <span class="error-message" id="email-error"></span>
                    </div>
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject" name="subject" placeholder="请输入消息主题" required>
                    </div>
                    <div class="form-group">
                        <label for="message">消息内容</label>
                        <textarea id="message" name="message" rows="5" placeholder="请在这里输入您的消息..." required></textarea>
                        <span class="error-message" id="message-error"></span>
                    </div>
                    <button type="submit" class="submit-btn">发送消息</button>
                    <div class="form-status" id="form-status"></div>
                </form>
            </section>
            <!-- 右侧：联系信息和地图 -->
            <aside class="contact-info-container">
                <div class="contact-info">
                    <h2>联系信息</h2>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h3>地址</h3>
                            <p>[您的公司地址，北京市朝阳区某某街道某某号]</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-phone-alt"></i>
                        <div>
                            <h3>电话</h3>
                            <p><a href="tel:+8612345678900">+86 123 4567 8900</a></p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h3>电子邮箱</h3>
                            <p><a href="mailto:contact@example.com">contact@example.com</a></p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-clock"></i>
                        <div>
                            <h3>工作时间</h3>
                            <p>周一至周五: 9:00 - 18:00</p>
                            <p>周六至周日: 休息</p>
                        </div>
                    </div>
                </div>
                <div class="map-container">
                    <h2>我们的位置</h2>
                    <!-- 
                        请替换 src 中的 URL 为您自己的 Google Maps 嵌入代码。
                        如何获取：在 Google Maps 上搜索您的地址 -> 点击 "分享" -> 点击 "嵌入地图" -> 复制 iframe 代码。
                    -->
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.016285819798!2d144.9537353153167!3d-37.81627997975171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b6943d7%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sau!4v1628791234567!5m2!1sen!2sau" 
                        width="100%" 
                        height="300" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy">
                    </iframe>
                </div>
            </aside>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (style.css)

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --text-color: #555;
    --border-color: #ddd;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #f4f7f6;
}
.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}
/* --- 页面头部 --- */
.page-header {
    text-align: center;
    margin-bottom: 50px;
}
.page-header h1 {
    font-size: 2.5rem;
    color: var(--dark-color);
    margin-bottom: 10px;
}
.page-header p {
    font-size: 1.1rem;
    color: var(--secondary-color);
}
/* --- 主要内容区域 --- */
.contact-content {
    display: flex;
    gap: 40px;
    flex-wrap: wrap; /* 在小屏幕上换行 */
}
/* --- 联系表单样式 --- */
.contact-form-container {
    flex: 1 1 500px; /* 默认宽度，最小为500px */
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.contact-form-container h2 {
    margin-bottom: 25px;
    color: var(--dark-color);
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.error-message {
    color: #dc3545;
    font-size: 0.85rem;
    display: none;
    margin-top: 5px;
}
.submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
}
.submit-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
.form-status {
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
    color: #28a745;
    display: none;
}
/* --- 联系信息样式 --- */
.contact-info-container {
    flex: 1 1 350px; /* 默认宽度，最小为350px */
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.contact-info, .map-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.contact-info h2, .map-container h2 {
    margin-bottom: 20px;
    color: var(--dark-color);
}
.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.info-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
}
.info-item h3 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--dark-color);
}
.info-item p, .info-item a {
    color: var(--secondary-color);
    text-decoration: none;
}
.info-item a:hover {
    color: var(--primary-color);
}
.map-container iframe {
    border: 0;
    border-radius: 5px;
    width: 100%;
    height: 300px;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
    }
    .contact-form-container,
    .contact-info-container {
        flex: 1 1 100%; /* 在小屏幕上占满宽度 */
    }
    .page-header h1 {
        font-size: 2rem;
    }
}

JavaScript 代码 (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contact-form');
    const formStatus = document.getElementById('form-status');
    // 表单提交处理
    form.addEventListener('submit', function(event) {
        // 阻止默认的表单提交行为
        event.preventDefault();
        // 清除之前的错误消息和状态
        clearErrors();
        formStatus.style.display = 'none';
        // 验证表单
        if (validateForm()) {
            // 如果验证通过，显示成功消息
            // 注意：mailto: 的提交方式比较基础，用户体验不佳。
            // 在实际项目中，应该使用后端API来处理表单提交。
            // 这里仅作演示。
            formStatus.textContent = '感谢您的留言！我们会尽快回复您。';
            formStatus.style.color = '#28a745';
            formStatus.style.display = 'block';
            // 可选：清空表单
            form.reset();
        }
    });
    // 表单验证函数
    function validateForm() {
        let isValid = true;
        const name = document.getElementById('name');
        const email = document.getElementById('email');
        const message = document.getElementById('message');
        // 验证姓名
        if (name.value.trim() === '') {
            showError('name', '请输入您的姓名。');
            isValid = false;
        }
        // 验证邮箱
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email.value)) {
            showError('email', '请输入一个有效的电子邮箱地址。');
            isValid = false;
        }
        // 验证消息内容
        if (message.value.trim() === '') {
            showError('message', '请输入消息内容。');
            isValid = false;
        }
        return isValid;
    }
    // 显示错误信息
    function showError(fieldId, message) {
        const field = document.getElementById(fieldId);
        const errorElement = document.getElementById(fieldId + '-error');
        field.style.borderColor = '#dc3545';
        errorElement.textContent = message;
        errorElement.style.display = 'block';
    }
    // 清除所有错误信息
    function clearErrors() {
        const errorElements = document.querySelectorAll('.error-message');
        const inputElements = document.querySelectorAll('input, textarea');
        errorElements.forEach(el => {
            el.style.display = 'none';
            el.textContent = '';
        });
        inputElements.forEach(el => {
            el.style.borderColor = 'var(--border-color)';
        });
    }
});

重要提示和后续优化建议

  1. 表单提交:

    • 当前模板使用 mailto: 协议，这在很多邮件客户端中可能无法正常工作，且用户体验不佳（需要打开邮件客户端）。
    • 强烈建议：将表单的 action 属性指向一个服务器端脚本（如 PHP, Node.js, Python）或使用第三方服务（如 Formspree, Netlify Forms, Getform）来处理表单提交，这需要后端知识,但能提供更稳定和专业的用户体验。

  2. 地图嵌入:

    • 务必将 <iframe> 中的 src 替换为您自己公司地址的 Google Maps 嵌入代码，您也可以选择使用高德地图、百度地图等其他地图服务的嵌入代码。

  3. 品牌化:

    • 修改 root 中的 CSS 变量（如 --primary-color）来匹配您公司的品牌色彩。
    • 更换 Font Awesome 图标库为您自己设计的图标或使用其他图标库。

  4. SEO优化:

    • 在 <head> 中添加更丰富的 meta 标签，如 description 和 keywords。
    • 为 <h1>, <h2> 等标题标签添加语义化的描述。

这个模板为您提供了一个坚实的基础，您可以在此基础上进行扩展和美化,打造出专业且功能完善的联系我们页面。