青柚生活「联系我们」HTML 单页源码（信息+表单）

这是一款「联系我们」单页源码。左侧是带图标的信息区（地址、邮箱、电话、微信），右侧是一张带称呼/邮箱/留言的提交表单，左右分栏一目了然。适合企业官网、工作室、独立站做联系方式页。

设计上用清新绿色渐变点缀图标与按钮，表单卡片白底描边、聚焦时按钮有光晕。表单提交做了前端拦截（弹提示、不刷新），避免误触。响应式下左右自动竖排，表单在下方。

单文件、零依赖。把信息换成你的真实联系方式、把表单 onsubmit 接到你的后端或表单服务（如腾讯问卷、Formspree），就能真正收消息。也是学习「信息卡 + 表单」两栏布局的范例。

使用教程

1. 下载与保存

复制代码保存为 contact.html。

2. 本地预览

双击打开即可看到联系页。

3. 自定义修改

换信息：改 .info 里的文字。接后端：把 <form onsubmit> 的拦截去掉，设 action 为你的接口地址、method 为 post。改主色：调 :root 的 --brand / --brand2。加字段：在 <form> 内复制一个 label+input 块。

4. 上线部署

作为静态页托管或嵌入官网联系路由。

HTML 源码

复制下方全部代码，保存为 .html 文件即可在浏览器中直接预览与使用。

<!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{ --brand:#10b981; --brand2:#059669; --ink:#0f172a; --muted:#64748b; --bg:#f0fdf9; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.7; }
  .wrap{ max-width:960px; margin:0 auto; padding:0 24px; }
  .head{ text-align:center; padding:60px 0 10px; }
  .head h1{ font-size:36px; margin-bottom:8px; }
  .head p{ color:var(--muted); }
  .box{ display:grid; grid-template-columns:1fr 1.2fr; gap:32px; padding:36px 0 70px; }
  .info .item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
  .info .ic{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
  .info b{ display:block; }
  .info span{ color:var(--muted); font-size:14px; }
  form{ background:#fff; border:1px solid #d1fae5; border-radius:20px; padding:28px; }
  form label{ display:block; font-size:14px; margin:14px 0 6px; color:#334155; }
  form input,form textarea{ width:100%; padding:11px 14px; border:1px solid #cbd5e1; border-radius:10px; font:inherit; font-size:14px; }
  form textarea{ resize:vertical; min-height:96px; }
  form button{ margin-top:18px; width:100%; padding:13px; border:0; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-weight:600; cursor:pointer; transition:.2s; }
  form button:hover{ box-shadow:0 12px 30px rgba(16,185,129,.3); }
  @media (max-width:760px){ .box{ grid-template-columns:1fr; } }
</style>
</head>
<body>
  <div class="wrap">
    <div class="head">
      <h1>联系我们</h1>
      <p>有合作、建议或投诉？填下面表单，我们通常 1 个工作日内回复。</p>
    </div>
    <div class="box">
      <div class="info">
        <div class="item"><div class="ic">📍</div><div><b>地址</b><span>杭州市余杭区文一西路 998 号 青柚大厦 5F</span></div></div>
        <div class="item"><div class="ic">✉️</div><div><b>邮箱</b><span>hi@qingyou.life</span></div></div>
        <div class="item"><div class="ic">📞</div><div><b>电话</b><span>400-820-1998（工作日 9:00–18:00）</span></div></div>
        <div class="item"><div class="ic">💬</div><div><b>微信</b><span>搜索「青柚生活」公众号</span></div></div>
      </div>
      <form onsubmit="event.preventDefault(); alert('已收到，我们会尽快联系你～');">
        <label>称呼</label><input required placeholder="怎么称呼你">
        <label>邮箱</label><input type="email" required placeholder="name@example.com">
        <label>想说的话</label><textarea required placeholder="简单描述你的需求"></textarea>
        <button type="submit">提交</button>
      </form>
    </div>
  </div>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1734.html