用按钮 data 属性填充 BricksExtras 弹窗中的 WS Form 表单字段

本教程演示如何把打开弹窗（Modal）的按钮/链接上的 data-* 属性值，填充到 BricksExtras 的 Modal 内 WS Form 表单字段里。

这个方法稍作调整，也能用在其他插件创建的表单上。

Step 1

安装并激活 BricksExtras，激活授权。

在插件设置里启用 Modal 元素。

Step 2

用你喜欢的表单插件创建一个表单，这里用的是 WS Form。

Step 3

用 Bricks 编辑你的模板或页面。

在某个 Section 的 Container 里添加两个按钮和一个 Modal 元素。

给按钮设置 data 属性，例如：

按钮 1（按钮属性面板里填 data-phone，值就是你想传给表单的电话号码）：

按钮 2（data-phone 填另一个值）：

在 STYLE 标签页 → CSS 里给两个按钮都加上一个 class，比如 open-form-1。

把 Modal 元素的触发器（trigger）配置成点击这些按钮打开：

给 Modal 添加如下自定义 CSS：

%root% .wsf-alert {
	margin-bottom: 0;
}

在 Modal 里添加一个 WS Form 元素。

选择要在弹窗里显示的那个表单。

Step 4

打开设置（齿轮图标）→ PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts，粘贴：

<script>
document.addEventListener("DOMContentLoaded", (e) => {
  const buttons = document.querySelectorAll('.open-form-1');
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      setTimeout(() => {
        const successMessage = document.querySelector('.x-modal .wsf-alert-success');
        const phoneValue = this.getAttribute('data-phone');
        const form = document.getElementById('ws-form-1');
        const inputField = form.querySelector('#wsf-1-field-4');
        if (successMessage) {
          successMessage.style.display = 'none';
        }
        form.style.display = 'block';
        if (inputField) {
          inputField.value = phoneValue;
        }
      }, 0); // increase the time (ms) if needed
    });
  });
});
</script>

把代码里的占位值替换成你自己的：

• open-form-1 → 你加在所有按钮上的那个 class；

• data-phone → 你的属性名；

• ws-form-1 → 你的表单 ID，在前端打开弹窗、用浏览器开发者工具检查表单元素即可拿到；

• wsf-1-field-4 → 表单里目标字段的 ID。

在查询循环（Query Loop）内使用

如果表单和弹窗在查询循环里，每个循环项的表单 ID 都不一样，所以需要改用「循环元素 ID + 字段 name」的方式来定位，避免硬编码 ID：

<script>
document.addEventListener("DOMContentLoaded", () => {
   const loopElementID = 'brxe-dgflih'; /* the ID from the element with the query loop */
   const fieldName = 'field_29'; /* the 'name' attribute value on the tel input in the form */
  const buttons = document.querySelectorAll('.open-form-1');
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      setTimeout(() => {
        const loopEl = this.closest('.' + loopElementID);
        const successMessage = loopEl.querySelector('.x-modal .wsf-alert-success');
        const phoneValue = this.getAttribute('data-phone');
        const form = loopEl.querySelector('.wsf-form');
        const inputField = form.querySelector('input[name="' + fieldName + '"]');
        if (successMessage) {
          successMessage.style.display = 'none';
        }
        form.style.display = 'block';
        if (inputField) {
          inputField.value = phoneValue;
        }
      }, 0); // increase the time (ms) if needed
    });
  });
});
</script>

使用前先改开头三个变量：

• loopElementID：开启查询循环的那个块/div/容器的 ID（brxe- 开头）；

• fieldName：需要写入值的那个输入框的 name 属性值（格式为 field_X，X 是 WS Form 设置里的字段 ID。下图标出了在哪里查看字段 ID——在 WS Form 的字段编辑界面里，每个字段的设置面板上能看到它的 ID）；

• open-form-1：换成你加在按钮上的 class；

• data-phone：如果属性名不同，一并替换。

更新 1：从表格行向弹窗内表单发送文章数据

下面演示如何把文章标题和文章 ID 发送到 BricksExtras Modal 内的 WS Form 表单——此时查询循环设在 Nestable Table 的 TBODY Row 元素上。

Demo 的搭建步骤：

1. 在 BricksExtras 设置里启用这几个元素：Modal、Nestable Table、WS Form。Frames 的 Table Alpha 也可以用来替代 BricksExtras 的 Nestable Table。

2. 示例里的 WS Form 表单有两个关键字段：一个只读的 “Job Title” 字段和一个隐藏的 “Job ID” 字段（见下图）。

3. 想直接对照参考，可以从这里（镜像）下载这个表单的 JSON 导入到你的站点。

4. 复制这份 Section JSON，粘贴到 Bricks 编辑器里导入。

5. 点击开启了查询循环的那一行，选择文章类型，比如 job。

Button 元素上我们加了两个 data 属性：data-title 和 data-id，值分别设置为对应的 Bricks 动态数据标签。

前端表格里点击某条 job 的 Apply 按钮时，目标就是：取该表格行 data-title 属性的值填入表单字段；同样地，该行的 data-id 属性值会填入隐藏的 ID 字段——这样能确保引用到正确的 job。

设置（齿轮图标）→ PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts，粘贴：

<script>
// Wait for the DOM to be fully loaded before executing the script
document.addEventListener( "DOMContentLoaded", () => {
    // Define constants for element IDs and field names
    const LOOP_ELEMENT_ID = 'brxe-vtgarx'; // The ID from the element with the query loop
    const TITLE_FIELD_NAME = 'field_8'; // The 'name' attribute value on the title input in the form
    const ID_FIELD_NAME = 'field_9'; // The 'name' attribute value on the ID input in the form
    // Select all elements with the class 'open-form'
    const buttons = document.querySelectorAll( '.open-form' );
    // Add click event listener to each button
    buttons.forEach( button => {
        button.addEventListener( 'click', handleButtonClick );
    } );
    // Function to handle button click events
    function handleButtonClick() {
        // Find the closest ancestor element with the specified ID
        const loopEl = this.closest( `.${LOOP_ELEMENT_ID}` );
        if ( ! loopEl ) return; // Exit if the loop element is not found
        // Find the form within the loop element
        const form = loopEl.querySelector( '.wsf-form' );
        if ( ! form ) return; // Exit if the form is not found
        // Find the success message, title field, and ID field
        const successMessage = loopEl.querySelector( '.x-modal .wsf-alert-success' );
        const titleField = form.querySelector( `input[name="${TITLE_FIELD_NAME}"]` );
        const idField = form.querySelector( `input[name="${ID_FIELD_NAME}"]` );
        // Get the title and ID values from the button's data attributes
        const titleValue = this.getAttribute( 'data-title' ) ?? '';
        const idValue = this.getAttribute( 'data-id' ) ?? '';
        // Use requestAnimationFrame for smoother DOM updates
        requestAnimationFrame( () => {
            // Hide the success message if it exists
            if ( successMessage ) {
                successMessage.style.display = 'none';
            }
            // Show the form
            form.style.display = 'block';
            // Set the title field value if it exists
            if ( titleField ) {
                titleField.value = titleValue;
            }
            // Set the ID field value if it exists
            if ( idField ) {
                idField.value = idValue;
            }
        } );
    }
} );
</script>

按需替换：

• brxe-vtgarx → 开启查询循环元素的 HTML ID；

• field_8 里的 8 → “Job Title” 表单字段的字段 ID；

• field_9 里的 9 → “Job ID” 表单字段的字段 ID。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

结论

整套方案的思路是：给触发弹窗的按钮/链接挂上 data-* 属性 → 点击后用小段 JS 读属性值 → 定位弹窗里的 WS Form 字段并写入。单表单场景用表单 ID + 字段 ID 定位即可；弹窗在查询循环里时改用「循环元素 ID + input[name="field_X"]」定位，避免循环项 ID 重复冲突。最新一版用 requestAnimationFrame 包裹 DOM 更新，比 setTimeout 更平滑，并且用空值合并（??）兜底防止取不到属性时报错。

常见误区

这套「按钮 data 属性 → 弹窗表单字段」有几个容易翻车的地方：一是查询循环里多个弹窗/按钮的 ID 会重复，必须用「循环元素 ID + 字段选择器」定位，否则填串了；二是data 属性值别直接拼进 HTML/JS 当代码执行，只当数据填进 input value，避免 XSS；三是弹窗可能还没渲染完就写值，所以用 requestAnimationFrame 兜一层比 setTimeout 稳。表单字段 ID 和表单 ID 要对准，写错一个就填不进去。

常见问题（FAQ）

Q：循环里多个弹窗填串了怎么办？ A：用「循环元素 ID + input[name=field_X]」定位，避开重复 ID 冲突。

Q：按钮 data 属性安全吗？ A：只作为数据填进表单字段 value，不要拼进代码执行，防止 XSS。

Q：为什么用 requestAnimationFrame 不用 setTimeout？ A：弹窗可能还没渲染完，rAF 等下一帧再写值更平滑可靠。

Q：除了 WS Form 别的表单能用吗？ A：能，思路通用，只要目标表单字段能靠 ID/name 定位写入。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Form Builder Complete Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程