How to Send HTML Form Data to Automation – Webmecanik

If you already have a custom form on your website, you can automatically transfer the data entered by your visitors to Webmecanik Automation without having to recreate your entire form in the tool.

This integration relies on a lightweight JavaScript script that maps the fields in your HTML form to contact fields in Automation.

📌 Prerequisites

Before integrating the script, make sure you have the following:

Access to the page source code or script manager (e.g., Google Tag Manager, site footer).
The mautic_form_mapper.js script, which can be downloaded directly from the Webmecanik GitHub repository.
The full URL of your Webmecanik Automation instance (e.g., [https://votre-instance.automation.webmecanik.com](https://votre-instance.automation.webmecanik.com)).

⚙️ Step 1: Prepare Your Fields in Webmecanik Automation

For Automation to accept the data, each field in your form must be linked to an existing contact field and configured correctly.

Go to your Webmecanik Automation instance settings (gear menu in the upper-right corner > Custom fields).
Find and note the Alias of the destination field (for example, email for the contact’s email address, or firstname for the first name).
Open the relevant field for editing and be sure to check the following setting:
- Publicly updatable: switch the toggle to Yes.
- Note: If this option remains set to “No,” Automation will reject updates to this value for security reasons.
Click Save and close.

🛠️ Step 2: Configure the HTML Form on Your Website

In your web page’s HTML file, you must identify the form and its fields using unique id attributes.

1. The `<form>` Tag

Add an identifier to your <form> tag and configure its validation behavior:

Case 1: No redirect required If the form should simply transmit the information without reloading the page or redirecting the visitor, enter action="javascript:;":
HTML
```
<form id="formulaire_test" action="javascript:;">
```
Case 2: Redirect to a confirmation page If you want to redirect the contact after submission or send the information to an internal processing script, specify the target URL:
HTML
```
<form id="formulaire_test" action="https://mon-site.fr/merci.html">
```

2. Input Fields (`<input>`, `<select>`, etc.)

Each form element must have a distinct id attribute, which will be used as a reference by the script:

HTML

<label for="nom">Nom</label>
<input id="nom" name="nom" type="text" placeholder="Votre nom" required>

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="exemple@domaine.com" required>

💻 Step 3: Integrate the Mapping Script

Insert the JavaScript code below at the bottom of your web page, ideally just before the closing </body> tag or in the footer (<footer>).

HTML

<script type="text/javascript">
  // 1. URL of your Webmecanik Automation instance
  var urlAutomation = "https://mon-instance.automation.webmecanik.com";

  // 2. ID assigned to your <form> tag
  var mappedFormId = "formulaire_test";

  // 3. Mapping table: "html_field_id": "automation_alias"
  var mappingFields_form = {
    "civilite" : "title",
    "nom"      : "lastname",
    "prenom"   : "firstname",
    "email"    : "email",
    "tel"      : "phone"
  };
</script>

<!-- Call the mapper script hosted on your server -->
<script src="js/mautic_form_mapper.js"></script>

Variable explanations:

urlAutomation: the secure URL of your Webmecanik Automation account (without a trailing /).
mappedFormId: the exact value of your HTML form’s id attribute.
mappingFields_form: the JavaScript object that establishes the connection. On the left is the id attribute of your HTML tag, and on the right is the alias of the corresponding field in Automation.
<script src="..."></script>: the path to the mautic_form_mapper.js file uploaded to your server.

📋 Step 4: Specific Rules by Data Type

To avoid technical issues when transmitting data, apply these rules according to the types of fields used:

Checkboxes: If you offer multiple choices to check, create a separate custom field in Automation for each checkbox. Then associate the HTML ID of each checkbox with its own alias.
Dates: The submitted format must be YYYY-MM-DD (for example, 2024-10-31). An invalid date (e.g., 2024-02-30) will prevent the submission from being validated.
Dropdown lists (<select>): The values (value="...") of your HTML options must strictly match the labels or keys configured in the value list for your Automation field.
Tags (automatic labels): You can assign one or more tags to the contact upon submission by adding a hidden field linked to the tags alias:
HTML
```
<input id="hidden_tags" name="hidden_tags" type="hidden" value="Prospect,Formulaire-Contact">
```

🔍 Troubleshooting Common Issues (FAQ)

The contact does not appear in Automation

Updating an existing contact: If the entered email address already exists in your database, Automation merges the new information into the existing record without creating a new contact. Check the last activity date on the contact record.
Incorrect data format: An invalid date or an unrecognized value in a list field will cause the request to be rejected.
Active administrator session: If you test the form in the same browser where you are logged in to your Automation account, your administrator cookies may interfere with tracking. Always perform your tests from a private browsing window.

The contact is created, but some information is missing

Field is not publicly updatable: In Automation, verify that the Publicly updatable option is set to Yes for each missing field.
Incorrect alias: Aliases are case-sensitive and do not contain spaces or accents. Compare the value in mappingFields_form with the alias displayed in your Automation interface.
Field does not exist: If a field included in the script does not exist in your instance, its value is ignored without blocking the other valid information.

index.html
3 KB Download