-
-
Save escopecz/136f62b66d526bc32006f0d2358a8e15 to your computer and use it in GitHub Desktop.
| <!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="jan@linhart.email"> | |
| </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> |
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.
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.
@peseotni could you provide a minimal example on https://jsfiddle.net/ etc.?
@bebjakub here it is:
https://jsfiddle.net/peseotni/k92dcrzg/#&togetherjs=egReh13vuc
thanks for your help
this is what I get in mautic
@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...
@g00dv1n thanks for the inspiration! I added a simple validation.