无需重型插件，在WordPress中提交表单后动态生成协作人员名片

核心思路 #

用原生Web技术+轻量数据存储工具完成开发，全程无需安装重型CMS插件，核心流程为：协作人员填写表单→数据存入轻量存储服务→页面自动拉取数据并按区域/职业分组渲染名片。

具体实现步骤 #

1. 制作提交表单（纯前端实现） #

用HTML+原生JS编写表单，收集必要信息：姓名、运营区域、职业、联系方式、头像链接、个人简介等。示例代码：

<form id="collabForm">
  <label>姓名：<input type="text" name="name" required></label>
  <label>运营区域：<select name="region" required>
    <option value="华东">华东</option>
    <option value="华南">华南</option>
    <!-- 按需添加其他区域选项 -->
  </select></label>
  <label>职业：<input type="text" name="role" required></label>
  <label>头像链接：<input type="url" name="avatar"></label>
  <label>联系方式：<input type="tel" name="contact"></label>
  <label>个人简介：<textarea name="bio" rows="3"></textarea></label>
  <button type="submit">提交信息</button>
</form>

<script>
document.getElementById('collabForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);
  
  // 提交到后续设置的数据存储接口
  const response = await fetch('你的数据存储接口URL', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  
  response.ok ? (alert('提交成功！'), e.target.reset()) : alert('提交失败，请重试');
});
</script>

2. 轻量数据存储（无需插件/重型数据库） #

推荐两种零成本、易维护的方案：

• Google Sheets + Apps Script：把表格当作简易数据库，通过脚本实现数据接收接口：
  1. 创建Google Sheet，表头对应表单字段：name、region、role、avatar、contact、bio
  2. 打开「扩展程序」→「Apps Script」，编写POST接口代码：

     function doPost(e) {
       const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
       const data = JSON.parse(e.postData.contents);
       sheet.appendRow([data.name, data.region, data.role, data.avatar, data.contact, data.bio]);
       return ContentService.createTextOutput(JSON.stringify({status: 'success'})).setMimeType(ContentService.MimeType.JSON);
     }
     

  3. 部署脚本为Web应用，设置权限为「任何人，甚至匿名」，复制生成的URL作为表单提交接口地址。同时可以再写一个GET接口，用于页面拉取数据：

     function doGet() {
       const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
       const data = sheet.getDataRange().getValues();
       const headers = data.shift();
       const formattedData = data.map(row => {
         const obj = {};
         headers.forEach((header, index) => obj[header] = row[index]);
         return obj;
       });
       return ContentService.createTextOutput(JSON.stringify(formattedData)).setMimeType(ContentService.MimeType.JSON);
     }
     

• Firebase Realtime Database：免费额度足够小团队使用，创建项目后开启实时数据库，设置基础写入权限（可后续调整为密钥验证），将数据库URL作为表单提交地址。

3. 协作人员页面渲染名片（前端自动分组） #

用原生JS拉取存储的数据，按区域分组后渲染名片，同时支持按职业二次排序：

<div id="collabContainer"></div>

<script>
async function loadAndRenderCollabs() {
  // 拉取数据，替换为你的数据获取接口URL（比如Google Sheets的GET接口）
  const response = await fetch('你的数据获取接口URL');
  const collabs = await response.json();
  
  // 按区域分组
  const groupedByRegion = collabs.reduce((groups, collab) => {
    const region = collab.region;
    if (!groups[region]) groups[region] = [];
    groups[region].push(collab);
    return groups;
  }, {});
  
  const container = document.getElementById('collabContainer');
  container.innerHTML = '';
  
  // 遍历区域生成名片组
  for (const region in groupedByRegion) {
    const regionSection = document.createElement('section');
    regionSection.innerHTML = `<h2>${region}区域协作人员</h2>`;
    
    // 按职业排序当前区域的人员
    const sortedCollabs = groupedByRegion[region].sort((a, b) => a.role.localeCompare(b.role));
    const cardGrid = document.createElement('div');
    cardGrid.className = 'card-grid';
    
    sortedCollabs.forEach(collab => {
      const card = document.createElement('div');
      card.className = 'collab-card';
      card.innerHTML = `
        <img src="${collab.avatar || '默认头像地址'}" alt="${collab.name}">
        <h3>${collab.name}</h3>
        <p><strong>职业:</strong> ${collab.role}</p>
        <p><strong>联系方式:</strong> ${collab.contact}</p>
        <p>${collab.bio || '暂无简介'}</p>
      `;
      cardGrid.appendChild(card);
    });
    
    regionSection.appendChild(cardGrid);
    container.appendChild(regionSection);
  }
}

// 页面加载时自动拉取渲染
window.onload = loadAndRenderCollabs;
</script>

<style>
/* 基础名片样式，可按需自定义 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 15px;
}
.collab-card {
  border: 1px solid #e0e0e0;
  padding: 18px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.collab-card img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
</style>

4. 规范与优化建议 #

• 数据校验：前端表单添加格式验证（如手机号、URL格式），后端接口补充字段合法性检查，避免无效数据存入
• 权限控制：如果需要限制提交人员，可在接口中添加简单密钥验证（比如请求头携带自定义密钥，接口验证通过才允许写入）
• 缓存优化：数据更新不频繁时，可给页面添加本地存储缓存，减少接口请求次数
• 样式统一：用CSS变量统一字体、颜色、间距，保证名片样式规范一致

内容的提问来源于stack exchange，提问作者Lucia Guarino