How to create forms ?

Forms are essential touchpoints for converting visitors into leads and enriching your database. This guide walks you through everything from initial creation to final integration.

How to create a form in Webmecanik Automation?

Once logged into your Webmecanik Automation instance, go to the Components section and select Forms.

1. You will arrive at the form list. Click New to start creating a form.

2. Give your form a Name and optionally a Description (the description appears below the name in the list).

3. The Successful Submission Action field allows you to define what happens after a user submits the form. There are 3 options:

   • Stay at form: The contact remains on the form page.

   • Redirect URL: The contact is redirected to a new page (e.g., a "Thank You" page).

   • Display message: The contact stays on the page, but a confirmation message appears.

   • Note: If you choose Redirect URL or Display message, you must fill in the corresponding field immediately below.

Configuration Options (Right Sidebar)

• Category: Assign a category to the form (e.g., White Paper).

• Published: The form must be set to "Yes" for contacts to submit it.

• Publish at (date/time): Schedule a specific publication date. The "Published" toggle must still be set to "Yes."

• Unpublish at (date/time): Set an expiration date. After this time, the form will no longer accept submissions.

• Disable search engine indexing: Prevents search engines from indexing the form.

• Kiosk Mode: This mode prevents a cookie from being dropped after submission. This allows multiple contacts to submit the form from the same device (e.g., a tablet at a trade show) without their profiles being merged.

• Render Style: Restores CSS styling if you apply a theme.

• Theme: Choose a visual theme for the form.

• Default Language: Sets the language for potential translations.

Adding Fields

Once configured, click the Fields tab to build your form. Choose from a wide range of field types:

• Hidden: A field invisible to the contact.

• Captcha: Adds a Captcha to block bots. (If the Google reCAPTCHA plugin is configured, you can use that instead).

• Page Break: Creates multi-page forms.

• Date / Date & Time: For selecting dates or specific times.

• Email: A standard email input field.

• File: Allows users to upload files (e.g., a CV).

• Radio group / Checkbox group: For single or multiple-choice lists.

• Country list: Displays a dropdown of countries.

• Dropdown: A standard single-choice dropdown menu.

• Number / Text / Phone / URL: Specific inputs for various data types. Note: "Text" fields are limited to 255 characters.

• Description Area: Adds a descriptive text block before or after a field.

• Text Area: Unlike the "Text" field, this has no character limit (ideal for comments/feedback).

• HTML Area: Allows you to insert custom HTML code.

Field Settings (Pop-up Tabs)

• General Tab: Set the Label (field name). You can choose to show or hide it. You can also add a Default value or a Help message. If you hide the label, use the Placeholder field to show text inside the input box that disappears when clicked.

• Contact Field Tab: Crucial step. This is where you map the form field to your contact database (e.g., mapping a "Text" field to the "First Name" contact field). Use the "Do not overwrite" option if you want to prevent new submissions from replacing existing data for identified contacts.

• Validation Tab: Set whether the field is required.

• Properties Tab: Add specific HTML attributes.

• Behavior Tab: * Show when value exists: Show the field even if the data is already in the database (requires an identified session).

  • Show after X submissions: Show a field only after a contact has submitted the form a certain number of times.

  • Auto-fill: Automatically fill fields if the contact's data is already known.

Form Actions

The Actions tab allows you to trigger events immediately after submission.

Available Actions include:

• Adjusting points (Contact or Company).

• Recording UTM tags.

• Modifying segments or tags.

• Removing a contact from the "Do Not Contact" list.

• Pushing data to integrations (CRM like Salesforce, Pipedrive, Zoho, etc.).

• Sending results to another form or to a specific user via email.

• Sending an automated email to the contact.

• Downloading a resource immediately in the browser.

Integration

1. On a Webmecanik Landing Page

1. Go to your Landing Page.

2. Open the Builder.

3. Select the Form component.

4. Drag the block into a section and select your form from the list.

5. Save & Close.

2. On your external website

To embed the form on your own website, go to the Manual Copy or Automatic JavaScript section within the form's "Draft" or "Edit" view. Copy the provided script and paste it into your website’s HTML code.