Встроенная форма Hubspot onFormReady и onFormSubmit

Hubspot — это фантастический инструмент для включения пользовательских форм на вашем веб-сайте и сохранения этих данных в CRM Hubspot для последующих действий. При использовании форм, встроенных на веб-сайты, не относящиеся к Hubspot, мне часто приходится выходить за рамки стандартного для встраивания.

Код

В приведенном ниже коде вы увидите несколько полезных дополнений к встраиванию формы Hubspot; onFormReady и onFormSubmit.

hbspt.forms.create({
     portalId: "xxxxxxx",
     formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
     css: "",
     onFormReady: function($form){
        // Stuff to do on after form is loaded             
     },
     onFormSubmit: function($form) {
        // Stuff do do before form is submitted 
     }
   }
});

Во встроенной форме Hubspot динамически загружает некоторый javascript и асинхронно извлекает дополнительные данные поля после загрузки страницы. Если вам нужно добавить какие-либо манипуляции с формой загрузки или полями, вы должны сделать это в функции onFormReady.

Хотя это задокументировано на веб-сайте Hubspot, если вы манипулируете полем .val() с помощью jQuery, есть проблема, требующая добавления функции .change().

jQuery('textarea[name="additional_order_comments"]').val('').change();

Без указанной выше функции .change() Hubspot отправлял бы предыдущее значение поля, если оно было установлено ранее, а ваша CRM настроена на предварительное заполнение полей.

Проблема

Мне нужно было создать форму, которая использовала бы прогрессивные поля, но также позволяла мне представить поле формы комментария, которое не заполняло предварительно текстовую область. На момент написания этой статьи в блоге Hubspot не имеет возможности отключить предыдущие значения формы при использовании прогрессивных полей.

Веб-сайт должен был предоставить поле для дополнительных комментариев и не хотел записывать пустое значение для поля, если оно содержало существующее значение. Таким образом, с помощью некоторой чистой магии jQuery форма теперь сохраняет значение полей формы, удаляет значение поля в поле формы, а затем повторно применяет старое значение, если не будет введено новое текстовое значение.

hbspt.forms.create({
     portalId: "xxxxxxx",
     formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
     css: "",
     onFormReady: function($form){
        textareaDefault =  jQuery('textarea[name="additional_order_comments"]').val();
jQuery('textarea[name="additional_order_comments"]').val('').change();                   
     },
     onFormSubmit: function($form) {
if(jQuery('textarea[name="additional_order_comments"]').val().length < 1){            jQuery('textarea[name="additional_order_comments"]').val(textareaDefault).change()
      }
   }
});

Как упоминалось ранее, вы увидите требование для функции .change() в селекторе jQuery выше.

Если эта статья помогла вам, пожалуйста, оставьте комментарий ниже, мне всегда приятно знать, что я помог другим в их усилиях по программированию!