基于Contact Form 7开发含LMP日期加280天计算的联系表单需求

嘿，我来帮你一步步搞定这个需求——给Contact Form 7加个带验证的日期选择器（LMP字段），还能自动算出LMP加280天后的EDD日期，格式统一用dd/mm/yyyy。

1. 先搞定日期选择器字段 #

Contact Form 7本身不带日期选择器，所以咱们先装个靠谱的小插件：

• 去WordPress后台的插件市场搜 Contact Form 7 Datepicker，安装激活就行，这是CF7生态里常用的插件，稳得很
• 打开你的CF7表单编辑器，添加LMP字段，用插件提供的标签格式：

  [date* lmp date-format:dd/mm/yyyy min:today placeholder "请选择LMP日期"]
  

  给你唠唠这些参数：
  • date* 表示这是必填字段，自带基础的日期格式验证
  • lmp 是字段的名称，后面JS计算要用到，别改错
  • date-format:dd/mm/yyyy 强制日期显示和输入格式为日/月/年
  • min:today 限制用户不能选今天之前的日期，要是你不需要这个限制直接删掉就行
  • placeholder 给用户加个提示文字，体验更好

2. 添加EDD结果展示字段 #

接下来在表单里加个只读的文本框，用来显示计算好的EDD：

[text edd readonly placeholder "EDD日期将自动计算"]

• edd 是结果字段的名称，要和后面JS里的对应上
• readonly 让用户不能手动改这个字段，只能看自动计算的结果

3. 写JavaScript实现日期计算 #

现在要让LMP选完后自动算EDD，咱们把这段JS代码加到网站里，有两种简单的方法：

方法一：通过主题functions.php加（推荐，方便管理） #

打开你的子主题functions.php文件（别直接改父主题，不然主题更新会丢失代码），把这段代码粘进去：

add_action( 'wp_footer', 'cf7_lmp_to_edd_calculation' );
function cf7_lmp_to_edd_calculation() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 拿到LMP和EDD的输入框元素
  const lmpField = document.querySelector('input[name="lmp"]');
  const eddField = document.querySelector('input[name="edd"]');

  // 要是找不到这两个字段就直接退出，避免报错
  if (!lmpField || !eddField) return;

  // 监听LMP字段的变化，选完日期就计算
  lmpField.addEventListener('change', function() {
    const lmpDateStr = this.value;
    // 如果用户清空了LMP，EDD也跟着清空
    if (!lmpDateStr) {
      eddField.value = '';
      return;
    }

    // 把dd/mm/yyyy格式转成JS的Date对象能识别的格式（JS是月从0开始算的，所以要减1）
    const [day, month, year] = lmpDateStr.split('/');
    const lmpDate = new Date(year, month - 1, day);

    // 计算加280天
    const eddDate = new Date(lmpDate);
    eddDate.setDate(lmpDate.getDate() + 280);

    // 把计算后的日期再转成dd/mm/yyyy格式，确保补零（比如1号变成01，3月变成03）
    const formattedEdd = `${String(eddDate.getDate()).padStart(2, '0')}/${String(eddDate.getMonth() + 1).padStart(2, '0')}/${eddDate.getFullYear()}`;
    
    // 把结果放到EDD字段里
    eddField.value = formattedEdd;
  });
});
</script>
<?php
}

方法二：直接粘到CF7表单里（适合快速测试） #

打开CF7表单编辑器，在表单内容的最底部粘这段HTML：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const lmpField = document.querySelector('input[name="lmp"]');
  const eddField = document.querySelector('input[name="edd"]');

  if (!lmpField || !eddField) return;

  lmpField.addEventListener('change', function() {
    const lmpDateStr = this.value;
    if (!lmpDateStr) {
      eddField.value = '';
      return;
    }

    const [day, month, year] = lmpDateStr.split('/');
    const lmpDate = new Date(year, month - 1, day);
    const eddDate = new Date(lmpDate);
    eddDate.setDate(lmpDate.getDate() + 280);

    const formattedEdd = `${String(eddDate.getDate()).padStart(2, '0')}/${String(eddDate.getMonth() + 1).padStart(2, '0')}/${eddDate.getFullYear()}`;
    
    eddField.value = formattedEdd;
  });
});
</script>

4. 验证和测试 #

• 保存表单后，去前端页面试试：选个LMP日期，比如01/01/2024，EDD应该自动跳出28/09/2024（算过了，刚好加280天）
• 试试输入无效格式或者空值，CF7的date*字段会自动提示验证错误，不用额外写验证逻辑

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