Раскрывающийся список HubSpot в форме ошибки - PullRequest
Новая
       10

Раскрывающийся список HubSpot в форме ошибки

0 голосов
/ 16 мая 2018

На нашем веб-сайте мы используем регистрационную форму HubSpot с пользовательским стилем, которая загружается во всплывающем окне fancybox.

enter image description here

Вот так это должно выглядеть

Наша проблема в том, что нам нужно добавить «триггер по щелчку» (см. HTML и JS ниже), чтобы загрузить выпадающий список с правильным стилем. Мы хотим, чтобы форма работала правильно без триггера.Без триггера клика это выглядит так: enter image description here

Также, когда эта форма появляется, раскрывающийся список не работает.

Наш код выглядит следующим образом: 

<div class="popup-mask">
      <div class="popup sm" id="popup-gartner-get-in-touch">
        <h4 class="section-title blue">Get in touch</h4>
        <div class="download-form">
          <div class="hubpop">
            <div class="download-form">
              <!--[if lte IE 8]>
              <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
            <![endif]-->
            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
            <script>
              $('a[href="#popup-gartner-get-in-touch"]').click(function() {
                hbspt.forms.create({ 
                  portalId: "538005",
                  formId: "190bdb23-c363-4d93-8189-9c7d28782017",
                  target:'.hubpop',
                });
              });
            </script>
          </div>
        </div> 
      </div> 
    </div><!-- end popup -->
    </div><!-- end popup-mask -->

1 Ответ

0 голосов
/ 06 июня 2018

Полагаю, вы используете какой-то плагин jQuery для стилизации выпадающего меню.Проблема в том, что ваш код пытается стилизовать что-то, чего нет в DOM, пока не будет нажат этот триггер.Что вам нужно сделать, это вставить этот код плагина jQuery в функцию onReady форм. 

    hbspt.forms.create({
      portalId: '',
      formId: '',
      onFormReady: function($form) {
        // YOUR CODE TO MODIFY THE SELECT DROPDOWN SHOULD GO HERE
          console.log($form.find('select'));
        }
    });

Если вы просто хотите стилизовать выделение формы без использования плагина jQuery, вы можете использовать этот инструмент чтобы получить CSS, необходимый для этого.

...