DotCMS Integration

Send2CRM client script

The client script should be added to your main template file that contains the <head> element, usually html_head.vtl in your application/themes/<theme-name> directory. Include the main snippet and any client-side config in the <head> element of the template.

<script>(function(s,e,n,d2,cr,m){n[e]=n[e]||{};m=document.createElement('script');m.onload=function(){n[e].init(d2,cr);};m.src=s;document.head.appendChild(m);})('/send2crm.min.js', 'send2crm', window, 'yourDomain.com', 'yourId');

window.addEventListener('send2crmLoading', (evt) => {
  send2crm.applySettings({
    formSelector: 'form.send2crm-form',
    formListenOnButton: true,
    debug: false,	
  });
});
</script>

Form identifiers

Velocity (`.vtl`) template forms

For forms that are defined in your templates, simply add the formSelector identifier to your form element (send2crm-form CSS class by default).

Form Builder (Marketing) forms

In order to capture submissions from forms built with the form builder we will need to modify the formSelector configuration to process the dotCMS generated forms.

Modify your formSelector configuration to target the custom HTML element: 'dot-form form'.
Note: this will capture all form builder forms, use the dot-form element id if you wish to capture a specific form.

Form builder forms have their own method for collecting data which does not rely on the standard HTML conventions. Therefore we need to add the below snippet to our <head> element to make the form comply with HTML standards.

// Listen for send2crmDomchange event to react when forms are added to the page.
window.addEventListener("send2crmDomchange", () => {
  // Get all applicable forms that we haven't yet processed.
  Array.from(document.querySelectorAll("form"))
    .filter(
      (frm) =>
        frm.parentElement.tagName == "DOT-FORM" &&
        !frm.classList.contains("dot-s2c-processed"),
    )
    .forEach((form) => {
      if (!form.id) {
        // Add a form id to be used as identifier; relate to parent element.
        form.id = `${form.parentElement.id}-form`;
      }

      Array.from(form.querySelectorAll("input,textarea,select"))
        .filter((fld) => fld.id && !fld.name)
        .forEach((fld) => {
          // Set a name on all field elements that have an id, but no name.
          fld.setAttribute("name", fld.id);
        });

      // Add class so we don't repeat for this form.
      form.classList.add("dot-s2c-processed");
    });
});

Please note that this will not handle Tag and Binary dotCMS fields due to their custom design.

Send2CRM client script

Form identifiers

Velocity (.vtl) template forms

Form Builder (Marketing) forms

Velocity (`.vtl`) template forms