Connect Drupal 8 Webform to Mautic

This article assumes that you've already heard the big news about Acquia acquiring Mautic, the largest open-source marketing automation platform. Chances are that you've already run demos on your Drupal 8 site.  If that is indeed the case and your Drupal 8 site uses the popular Webform module; you're probably wondering how you can send your existing Webform submissions to Mautic in order to convert them to contacts.

Well, the easier way is to simply create a Mautic Form and embed that form in your Drupal site. Mautic lets you create many different forms which can be easily embedded in your Drupal site using simple JavaScript and/or HTML embeds. However, you cannot simply let go of your current Webforms, and let's also be frank, there no form systems that can outperform Drupal 8's Webform module.

The good news is that Drupal 8's Webform module can easily send submissions to Mautic forms - thus connecting your Drupal site with Mautic in a seamless way.

Webform Mautic module

 

This integration also takes into consideration that Mautic tracks anonymous visitors then converts them into contacts once they submit a form - yes through Webform in this case.

 

Prerequisites: 

  1. You have a Drupal 8 website with Webform module installed
  2. You have a Mautic instance installed

 

 

Step by step guide:

  1. First, you'll need to create a Mautic form similar to your Drupal webform. You do not need to embed this form, you just need to create it so it receives the submissions by remote post from your Drupal webform.
     
    Mautic form screenshot

     
  2. Download and install Webform Mautic module. This module adds a Webform handler to map submissions to Mautic forms.

     
  3. In your Drupal 8 site, go to the webform that you want to send its submissions to Mautic. 
    Navigate to the webform's "Settings", then go to "Emails / Handlers" to add a new handler.
    Create a new handler by clicking "Add handler" and choose "Mautic".
     
    Webform Mautic handler

     
  4. Now you'll only need to configure the handler. Choose a meaningful title. I like to call this handler "Send submission to Mautic form".
     
    • Under "Mautic Settings", enter the full URL of your Mautic instance.
       
    • Enter the "Mautic form ID" of your Mautic form.
       
    • Now the handler will try to auto populate your webform fields into "Mautic submission data mapping".
      Simply change "CHANGE_ME" in "mauticform[CHANGE_ME]" to your Mautic field names.
       
      Webform Mautic settings
       
      You can also remove mapping of fields you do not want to send to Mautic, or simply add new fields using the same convention
      
     
  5. Save the handler and you're done.

 

 

Things to pay attention to:

In Drupal side:

  • It's recommended that you have Mautic tracking code installed in your Drupal site.
    This will leverage the contact tracking capabilities of Mautic and link form submissions to the contact activities that were tracked when the contact used to be an anonymous visitor.
  • Test the handler by going to "Test" in the handler's action menu. Make sure Mautic is receiving your submissions.

 

In Mautic side:

  • Make sure your form is published.
  • Make sure your form is not set to "Kiosk mode" if you want to get the full contact tracking activities when the form is submitted.

 

     

    Free Website Audit from Vardot