brickswiki.com

首页 / 中文教程 / 教程

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

本教程演示如何把打开弹窗（Modal）的按钮/链接上的 data- 属性值，填充到 BricksExtrashttps://bricksextras.com/ 的 Modal 内 WS Formhttps://brick…

Ray Chan·2026-08-12·约 4 分钟

本教程演示如何把打开弹窗（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。

结论

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

需要帮忙？

用 Bricks 建站？我接客户项目。

从快速营销站到完整的 Bricks 建站，再到从 Elementor 迁移——我都做过。本站每篇教程都来自真实项目经验。告诉我你的需求，一个工作日内回复。

  • ✓Bricks 建站与改版
  • ✓Elementor / Divi → Bricks 迁移
  • ✓Bricks → Astro / headless 性能升级
  • ✓速度优化，PageSpeed 95+ 目标

相关教程

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

阅读全文 →

Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据

阅读全文 →

Bricks 中输出 ACF Relationship 关联文章的数量

阅读全文 →