Skip to content

Instantly share code, notes, and snippets.

@escopecz

escopecz/form.html

Last active April 23, 2024 17:29
Show Gist options
  • Save escopecz/136f62b66d526bc32006f0d2358a8e15 to your computer and use it in GitHub Desktop.
Save escopecz/136f62b66d526bc32006f0d2358a8e15 to your computer and use it in GitHub Desktop.
Download ZIP
An example of how to send a form submission to a Mautic form with jQuery
Raw
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mautic Form Test</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h2>Mautic Test</h2>
<form id="mautic" method="post" action="http://mautic.test/form/submit">
<input type="hidden" name="formId" value="284" />
<input type="hidden" name="return" value="this-must-exist" />
<input type="hidden" name="formName" value="" />
<input type="hidden" name="messenger" value="1" />
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" value="John">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" required value="Linhart">
</div>
<div class="form-group">
<label for="company">Company Name</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Company Name" required value="Mautic">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required value="[email protected]">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script type="text/javascript">
$(() => {
$('#mautic').on('submit', (e) => {
e.preventDefault();
let form = $('#mautic');
let values = {mauticform: form.serializeArray().reduce((obj, val) => { obj[val.name] = val.value; return obj; }, {})};
$.ajax({
url: form.attr('action') + '?formId=' + form.find('[name=formId]').val(),
data: $.param(values),
type: 'POST',
headers: {'X-Requested-With': 'XMLHttpRequest'},
success: (content, status, xhr) => {
console.log('The submission was successful.');
},
error: (xhr) => {
console.log('An error occured when submitting the form');
},
});
});
});
</script>
</body>
</html>
@blzbruno
Copy link

Thanks, I simplied ur code and worked well with me

  function sendMautic() {
    var name = $("#name").val();
    var email = $("#email").val();
    var whatsapp = $("#whatsapp").val();
    $.ajax({
        url: "https://domain.com/form/submit?formId=XX",
        type: "post",
         enctype: 'multipart/form-data',
          headers: {'X-Requested-With': 'XMLHttpRequest'},
        data: { "mauticform":{
          name : name,
          email : email,
          whatsapp :whatsapp,
          return : "",
          formId : XX,
          formName : "yourformname",
          submit : ""
        }} ,
        success: function (response) {
          console.log("Data: " + response);
           // You will get response from your PHP page (what you echo or print)
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });
  }

@g00dv1n
Copy link

g00dv1n commented Jan 15, 2020 •
edited
Loading

Another example to send via fetch

function serializeData(obj) {
    if ('string' == typeof obj) {
        return obj;
    }
    return Object.keys(obj).map(function(key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]);
    }).join('&');
}

async function sendToMautic(name, email) {
    const FORM_ID = XX
    const url = 'https://domain.com/form/submit';
    
    const data = {
        'mauticform[formId]': FORM_ID,
        'mauticform[enter_your_name]': name,
        'mauticform[enter_your_email]': email
    };

    return fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: serializeData(data)
    })
}

@adiux
Copy link

adiux commented Apr 30, 2020

I believe this does no longer work with Mautic v3. I use the same parameters on a production form and on the v3.0.0-beta running locally with DDEV.

The values get added to the form on production. On my local instance, I receive a 500 error

log:
mautic.CRITICAL: Uncaught PHP Exception Doctrine\ORM\ORMInvalidArgumentException: "A new entity was found through the relationship 'Mautic\FormBundle\Entity\Submission#lead' that was not configured to cascade persist operations for entity: Mautic\LeadBundle\Entity\Lead with ID #. To solve this issue: Either explicitly call EntityManager#persist() on this unknown entity or configure cascade persist this association in the mapping for example @ManyToOne(..,cascade={"persist"})." at /var/www/html/vendor/doctrine/orm/lib/Doctrine/ORM/ORMInvalidArgumentException.php line 102 {"exception":"[object] (Doctrine\\ORM\\ORMInvalidArgumentException(code: 0): A new entity was found through the relationship 'Mautic\\FormBundle\\Entity\\Submission#lead' that was not configured to cascade persist operations for entity: Mautic\\LeadBundle\\Entity\\Lead with ID #. To solve this issue: Either explicitly call EntityManager#persist() on this unknown entity or configure cascade persist this association in the mapping for example @ManyToOne(..,cascade={\"persist\"}). at /var/www/html/vendor/doctrine/orm/lib/Doctrine/ORM/ORMInvalidArgumentException.php:102)"} []

Does anybody else have the same problem?

@YouBuiltThat
Copy link

Is there any intention to get this working in M3?

@benbehringer
Copy link

Another example to send via fetch

function serializeData(obj) {
    if ('string' == typeof obj) {
        return obj;
    }
    return Object.keys(obj).map(function(key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]);
    }).join('&');
}

async function sendToMautic(name, email) {
    const FORM_ID = XX
    const url = 'https://domain.com/form/submit';
    
    const data = {
        'mauticform[formId]': FORM_ID,
        'mauticform[enter_your_name]': name,
        'mauticform[enter_your_email]': email
    };

    return fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: serializeData(data)
    })
}

Thanks! This works for me with Mautic 3.0.2!

@bebjakub
Copy link

bebjakub commented Nov 12, 2020 •
edited
Loading

@g00dv1n thanks for the inspiration! I added a simple validation.

const formData = new FormData()
formData.append('mauticform[formId]', 1)
formData.append('mauticform[messenger]', 1) // required

// form inputs names
formData.append('mauticform[first_name]', first_name)
formData.append('mauticform[last_name]', last_name)
formData.append('mauticform[email]', email)
formData.append('mauticform[f_message]', message)

fetch('https://yourmautic.com/form/submit', {
  method: 'POST',
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  body: formData,
})
.then(response => response.text())
.then(result => {
  if (result.includes('results')) {
    console.log('Thank you for a message')
  } else {
    console.log('Error')
  }
})
.catch(() => {
});

@digitalmkt
Copy link

The HTML form worked perfectly for me on wordpress and WPBakery. Aafter 2 days of fighting with the mautic 3.2.1 submitform insisting to call http instead of https. Thank you.

@peseotni
Copy link

peseotni commented Jun 30, 2021 •
edited
Loading

I used the code on my website, but it complains that "first_name", "last_name", "email" and "message" is not defined.
I do not know javascript. I tried to define them like this:

formData.append('mauticform[vorname]', document.getElementById('firstname'))
formData.append('mauticform[nachname]', document.getElementById('lastname'))
formData.append('mauticform[email]', document.getElementById('email'))

and it sends a form to Mautic, but those fields are empty.
How do I send the values correctly?

Also, is there a way of doing this for more than just one form on the same website?

thank you for your help.

@bebjakub
Copy link

@peseotni could you provide a minimal example on https://jsfiddle.net/ etc.?

@peseotni
Copy link

peseotni commented Jun 30, 2021 •
edited
Loading

@bebjakub here it is:

https://jsfiddle.net/peseotni/k92dcrzg/#&togetherjs=egReh13vuc

thanks for your help

mautic

this is what I get in mautic

@bebjakub
Copy link

bebjakub commented Jul 1, 2021

@peseotni in your javascript, you have just a script for posting data, but you are missing an event (on click submit button, etc.) to trigger that script and validation of inputs. If you are not familiar with javascript use embeds from mautic administration, pls...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment