Drupal HubSpot Integration: The Challenge

Creating a field in a node entity that allows for embed HTML and JavaScript using no filtering or WYSIWYG editor such that a client can embed HubSpot forms.

The normal way to do this:

  1. Create a new Text Format called “Embeded Text” and only allow the “
  3. Provide documentation that informs the client to switch text format before pasting their snippet.
  4. Hope (wish and pray) that client/content editor remembers to do this.

This is not optimal. Ideally, we would want to protect the content creator from this technical of a task. This kind of configuration is distracting from the content editor’s role which should be focused on quality content creation. Also, the step three above is counter-intuitive. The goal here should be for the editor to be able to paste embed with little additional effort.

The Fix:

A hook_form_FORM_ID_alter() function in a custom module can improve this work-flow significantly ..

/**
 * Implements hook_form_FORM_ID_alter().
 */
function hubspot_form_container_form_hubspot_form_container_node_form_alter(&$form, &$form_state, $form_id) {
  foreach ($form['form_embed']['und'] as $delta => $value) {
    if (is_int($delta)) {
      $form['form_embed']['und'][$delta]['#format'] = 'form_embed';
    }
  }
}

In this case our content type’s machine name is ‘hubspot_form_container” and the machine name of the input filter is ‘form embed”. When the node/add edit page is loaded the correct Text Format, it is prelaoded and the content editor can just paste in their snippet.

While the above context is for pasting Hubspot forms, the approach can be extended to be used as a field for most any snippit pasted fields such as PayPal or Google Checkout buttons for a smaller site that does not need a full-blown Drupal Commerce implementation.