Thumbnail
My Mitsu Mautic

Developed by

Expert
Expert
Not Version 9 Ready Yet.

This addon creates a jQuery code which sends data to Mautic.  Mautic is a marketing-automation software.

You can pickup a form item via ID/class, which enables virtually any form to connect to Mautic.

 

PREREQUISITES

* You have setupped a concrete5's form.

* You have setupped a Mautic.

 

WHAT THIS ADDON DOES

When a visitor of your website send a message via your concrete5's form, the data will be also sent to your Mautic.

Using jQuery, this addon pickup your form's data and sent to your Mautic.

 

HOW TO SETUP THIS ADDON

You need to specify the form and the form items, which will be sent to your Mautic.

 

Put a block into the page where you have put a c5's form.

In the block-edit area, you will be requested to fill these items.

firepoint (ID/class) : When the data is sent to mautic. Typically a form's "send message" button.

mautic URL : The url of your Mautic.

Identifier characters after URL : This identifier will be added to your page URL. Typically "#sent", if the contact page url is "http://example.com/contactpage", then the url info sent to mautic will be "http://example.com/contactpage#sent". It's optional.

 

The data sent to Mautic will be pickuped by jQuery. Check your form's html and enter the ID/class for each element; firstname, lastname, email.

Suppose your form is like this,

	<input name="Question7" id="Question7" class="form-control" type="text" value="" />
<input name="Question8" id="Question8" class="form-control" type="text" value="" />
<input type="submit" name="Submit" class="btn btn-primary" value="Send Message" />

Put #Question7 into firstname (ID/class) , Put #Question8 into email (ID/class) , and Put .btn-primary into firepoint (ID/class) . (Leave blank for lastname (ID/class))

(The sharp "#" stands for ID, The dot "." stands for class.)

 

This setting will do;

When a button with a class "btn-primary" is clicked, the data with the ID "Question7" and the ID "Question8" will be sent to a Mautic.

 

GENERATED JS CODE

The outputted code will be like the following;

$(function() {
    $('.btn-primary').click(function (e) {
        var imgsrc = 'https://my-mitsu.mautic.net/' + '/mtracking.gif?page_url=' + encodeURIComponent(window.location.href);
        var imgsrc = imgsrc + encodeURIComponent('#sent');
        var firstname = $('#Question7').val();
        var imgsrc = imgsrc + '&firstname=' + encodeURIComponent(firstname);
        var mail = $('#Question8').val();
        var imgsrc = imgsrc + '&email=' + encodeURIComponent(mail);
        var mauticimg = $('<img id="mauticimg">');
        mauticimg.attr('src', imgsrc);
        mauticimg.attr("width", 1).attr("height", 1).css("display", "none");
        mauticimg.appendTo('body');
    });
});

 

NOTICE:

This addon assumes the following,

* You have the knowledge on HTML ID/class.

* You have setupped a concrete5's form.

* You have the knowledge on Mautic.

* You have installed a Mautic (or registered a Mautic Cloud.)

* You have setupped the firstname/lastname/email fields to "Publicly updatable" in your Mautic.

Document in Japanese

See here.

Current Version: 0.9.6
Fully Translatable: Yes
Needs External Libraries: No
Compatible 5.7.5+
License: MIT
Support Response: Replies to tickets once a week or so.
Support Hosted: On marketplace.concretecms.com
Needs extra server permissions: No
Needs Internet: No
Marketplace Tests:
Passed Automated Tests
Passed PRB Review