Question

我们在hubspot上有一个网站，我们使用他们的本地WYSIWYG来设计布局，然后使用css和js设置它们。

在主页http://www.lspatents.com/上，它曾经在＆＃34;在这里开始使用＃34;标题，它有大约10个问题，并使用javascript将它们拆分为步骤，以便它们可以放在当前显示的空白框的相同区域。

它工作得很好，直到两天前表格消失了，并留下了一个空白区域，你现在可以看到，据我所知，最近没有人触及这个代码。

以下是用于操作表单的js代码

 // Hero Form
$(window).load(function() {

        // disable autocomplete to fix bug
        $('.hero-form form').attr("autocomplete", "off");

        $('.hero-form .hs-richtext').each(function() {
          $(this).nextUntil('.hs-richtext').wrapAll('<div class="step" />');
        });

        // Hide Loading icon
        $('.hero-form form').css('background', 'none');
        $('.hero-form form .step:nth-of-type(2)').show();

        // First Step to Second Step
        $('.step').find('.hs-richtext').change(function() {
            $('.step:nth-of-type(2)').hide().next().next().fadeIn();
        });

        // Second Step to Third Step
        $('.step').find('.hs-input').change(function() {
            var names = {};
            $(':radio').each(function() {
                names[$(this).attr('name')] = true;
            });
            var count = 0;
            $.each(names, function() { 
                count++;
            });
            if ($(':radio:checked').length === count) {
                $('.step:nth-of-type(4)').hide().next().next().fadeIn();
            }
        });

});

据我所知，开发人员使用css用display：none隐藏整个表单区域;并使用上面的js将问题分解为步骤，并在每个步骤中显示一定数量。

您可以在页脚中看到正在调用的代码，因此.js文件的链接没有问题，如果您检查元素并禁用display：none;对于英雄形式中的任何div声明的所有问题都会显示出来，所以表格也没有问题，为什么它停止工作呢？

非常感谢任何帮助，

Answer 1

此行不再适用于您的加价......

$('.hero-form form .step:nth-of-type(2)').show();

还有一些额外的div包装你的标记，放在那里做出反应，React在你的表单中放置了一系列div，它们被你现有的CSS隐藏（我假设它只是一个系列的步骤

隐藏节点的CSS是：

.hero-form form>div, .hero-form form>.step {
  display: none;
}

使用display：none

隐藏的节点

<div data-reactid=".0.0:$1">
  <div class="hs-richtext" data-reactid=".0.0:$1.0">
    <hr>
  </div>
  <div class="step">
    <div class="hs_patent field hs-form-field" data-reactid=".0.0:$1.$patent">
      <label placeholder="Enter your Do you have a patent?" for="patent-9fc8dd30-a174-43bd-be4a-34bd3a00437e_2496" data-reactid=".0.0:$1.$patent.0">
        <span data-reactid=".0.0:$1.$patent.0.0">Do you have a patent?</span>
        <span class="hs-form-required" data-reactid=".0.0:$1.$patent.0.1">*</span>
      </label>
    <div class="hs-field-desc" style="display:none;" data-reactid=".0.0:$1.$patent.1">
  </div>
</div>

您的JQuery将使用类＆＃39;步骤＆＃39;将显示：块添加到DIV。 bit不会改变父DIV（由React插入），这仍然会阻止您的节点显示。

你需要改变你的JQuery，在包含＆＃34;步骤＆＃34;的父（）上调用show（）;你希望表现出来。

Answer 2

请检查您的浏览器控制台，看看您在加载此表单时遇到问题：

https://forms.hubspot.com/embed/v3/form/457238/9fc8dd30-a174-43bd-be4a-34bd3a00437e

这是错误：

net::ERR_NAME_RESOLUTION_FAILED

您最好将DNS更改为8.8.8.8，并查看问题是否仍然存在。

使用javascript

2 个答案: