DotCMS Integration
- Arthur Apanovics
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.