Problem with displaying information on the LP form

[HPrzygoda]

Hi,

I noticed a problem with displaying information on the LP form.
On Thursday - everything was still fine, including the styles.
The case concerns this LP:
https://twoje.sodexo.pl/najlepszy-prezent-na-swieta
And on the form at the top, at the bottom and on the popup - the same information was displayed 3 times:
https://prnt.sc/cYx23tFeh6XS
The same form is used in 3 places, but there was no problem with that before.
I changed the selector in the js code (I added: nth-child (4)):
https://prnt.sc/eScc6iH5r_Tm
It helped - I now have 1 consent, but in the code I still have 2 empty paragraphs, which previously caused the appearance of 2 additional information obligations:
https://prnt.sc/2KJ58rVXBco2

What could be the cause of the problem and how to fix it?

Regards,
Hanna

[alyssamwilie · Accepted solution]

Very strange. Hmm maybe it has something to do with how it's being sliced? Did some testing and put together my own piece of code you could try replacing yours with:

// HubSpot global event listener so we know exactly when the form is able to be acted upon
window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    // capture form ID so we're only acting on that particular form
    formID = event.data.id;
    form = document.querySelector('.hs-form[data-form-id="' + formID + '"]');
    
    // create variables for each necessary element
    var richText = form.querySelector('.legal-consent-container .hs-richtext:nth-child(4)');
    var paragraphToSlice = richText.querySelector('p:nth-child(1)');
    var fullConsentText = paragraphToSlice.innerText;
    var cutConsentText = fullConsentText.slice(0,50);

    // slice our pargraph
    paragraphToSlice.textContent = cutConsentText + "...";

    // create our link and append it to the rich text, can also easier act on it this way instead of having to locate it with a class name
    var link = document.createElement('a');
    var linkText = document.createTextNode("Wiecej...");
    link.appendChild(linkText);
    link.href = "javascript:void(0)";
    richText.appendChild(a);
    
    // event listener to re-add our full text and remove link
    a.addEventListener('click', () => { 
      paragraphToSlice.textContent = fullConsentText;
      a.remove();
    });
  }
});

If you only want to do this for that one particular form you can add && event.data.id to the event listener if statement to only look for that particular form ID. You can get the form ID from the form editor link for the form.

// HubSpot global event listener so we know exactly when the form is able to be acted upon
window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady' && event.data.id = "2b9d5145-5717-4189-9be0-aaf029621297") {
    // capture form ID so we're only acting on that particular form
    formID = event.data.id;
    form = document.querySelector('.hs-form[data-form-id="' + formID + '"]');
    
    // create variables for each necessary element
    var richText = form.querySelector('.legal-consent-container .hs-richtext:nth-child(4)');
    var paragraphToSlice = richText.querySelector('p:nth-child(1)');
    var fullConsentText = paragraphToSlice.innerText;
    var cutConsentText = fullConsentText.slice(0,50);

    // slice our pargraph
    paragraphToSlice.textContent = cutConsentText + "...";

    // create our link and append it to the rich text, can also easier act on it this way instead of having to locate it with a class name
    var link = document.createElement('a');
    var linkText = document.createTextNode("Wiecej...");
    link.appendChild(linkText);
    link.href = "javascript:void(0)";
    richText.appendChild(a);
    
    // event listener to re-add our full text and remove link
    a.addEventListener('click', () => { 
      paragraphToSlice.textContent = fullConsentText;
      a.remove();
    });
  }
});

If with this you're still getting empty pargraphs try removing the slicing code entirely to see if the empty paragraphs still occur. At least that way we'd be able to confirm if it's the slicing doing it or something else is acting upon the forms.

[alyssamwilie]

Have you checked in the form editor that the form itself doesn't contain rich text fields with empty paragraph tags? When I look at the page through a debugger it's showing those empty tags immediately when the first form loads so I can only think it's part of the form to begin with.

[HPrzygoda]

Yes, I checked, but nothing like that is there.

[alyssamwilie]

Are you using the embed script code for all 3 forms? That may well be the cause of the duplication cause the embed script tends to cause issues when it's used multiple times on a page simply because it gets confused sometimes. I would switch to using a form field in your modules instead.

If for some reason you absolutely need to use the embed script you'll need to add divs with unique ids around each form and use those ids as the target for the module. Also, only use the <script src="//hsforms...> once on the page. Having just that on the page multiple times could be causing duplications since it's running multiple times.

[HPrzygoda]

Thank you very much for your answer.
Unfortunately, using each solution, there are still empty paragraphs.

Anyway, I will keep these solutions in mind in the future 🙂

Best regards,
Hanna