如何将ACF字段URL注入Divi中HubSpot表单实现跳转？

问题原因 #

你在前端JS里直接调用acf.get_field('gated_content_url')是错误的——get_field()是ACF的PHP函数，前端JavaScript环境无法直接访问后端的ACF字段数据，必须先通过PHP将字段值传递到前端。

解决步骤 #

在Divi的代码模块中，按以下方式修改代码：

1. 先添加一段PHP代码，将ACF字段的URL赋值给前端JS变量：

<script>
// 从后端ACF字段获取跳转URL，传递给前端JS
var gatedContentUrl = '<?php echo esc_url(get_field('gated_content_url')); ?>';
</script>

2. 修改HubSpot表单的提交回调，使用刚才定义的JS变量：

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>
    hbspt.forms.create({
        region: "XXX",
        portalId: "XXX",
        formId: "XXX",
        onFormSubmit: function($form) {
            setTimeout( function() {
                var formData = $form.serialize();
                // 使用传递过来的跳转URL
                window.location = gatedContentUrl;
            }, 300 ); 
        }
    });
</script>

说明 #

• 这段代码利用PHP从ACF获取字段值，再通过JS变量暴露给前端，既满足了Divi代码模块的使用场景，又让客户能通过ACF后端字段修改跳转URL，无需编辑代码。
• esc_url()用于确保URL的安全性，避免注入风险。

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