如何在New Referral盒子下方创建带样式的表单？

步骤1：修改HTML结构，添加表单区域 #

在你的New Referral盒子之后插入以下表单代码：

<!-- 新增推荐人详情表单 -->
<div class="referral-form">
  <h4>Referral Details</h4>
  <div class="form-group">
    <i class="fa-solid fa-user"></i>
    <input type="text" id="firstName" placeholder="First name">
  </div>
  <div class="form-group">
    <i class="fa-solid fa-user"></i>
    <input type="text" id="lastName" placeholder="Last name">
  </div>
  <div class="form-group">
    <i class="fa-solid fa-calendar-days"></i>
    <input type="date" id="dob">
  </div>
  <div class="form-group">
    <i class="fa-solid fa-phone"></i>
    <input type="tel" id="phone" placeholder="Phone number">
  </div>
  <div class="form-group">
    <i class="fa-solid fa-envelope"></i>
    <input type="email" id="email" placeholder="Email address">
  </div>
  <div class="form-group">
    <i class="fa-solid fa-location-dot"></i>
    <input type="text" id="address" placeholder="Full address">
  </div>
</div>

注：上述代码使用Font Awesome图标，需要确保你的页面已引入该图标库，可通过添加CDN链接到HTML头部：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
若不想使用CDN，可替换成你本地的图标资源。

步骤2：添加CSS样式，实现图标布局和下划线效果 #

将以下样式添加到你的CSS文件中：

/* 表单容器基础样式 */
.referral-form {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

.referral-form h4 {
  margin-bottom: 20px;
  color: #333;
  font-size: 1.2rem;
}

/* 表单组布局控制 */
.form-group {
  position: relative;
  margin-bottom: 28px;
}

/* 图标定位与样式 */
.form-group i {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 16px;
}

/* 输入框样式 - 仅保留底部下划线 */
.form-group input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: none;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  color: #333;
  background-color: transparent;
}

/* 输入框聚焦状态优化 */
.form-group input:focus {
  outline: none;
  border-bottom-color: #2196f3;
}

.form-group input::placeholder {
  color: #999;
}

/* 日期输入框调整内边距 */
.form-group input[type="date"] {
  padding-left: 42px;
}

效果说明 #

• 每个输入项左侧对应功能图标，通过绝对定位固定位置，不占用输入框空间
• 输入框仅保留底部边框，实现需求的下划线效果
• 聚焦时下划线颜色变化，提升交互反馈
• 表单容器与原New Referral盒子保持视觉一致性

内容的提问来源于stack exchange，提问作者Buse Nur