How to integrate a form in my website ? – Webmecanik

Congratulations, you've just created your form in Webmecanik Automation! The next step is to display it on your website pages (such as your WordPress site, for example).

Don't worry—you don't need to be a developer to do this.

Once your form is saved, Webmecanik offers several integration methods. Here is a guide to choosing the best option for your needs.

⭐ Option 1: JavaScript Integration (The recommended and easiest method!)

This is what we call "automatic copy." We recommend using this method 99% of the time.

As you can see in the image, this corresponds to the first box titled "Via JavaScript (recommended)."

How does it work?

You simply copy a short line of code (a script) that looks like this:

<script type="text/javascript" src="//yourinstance..."></script>

The main advantage (the magic of JavaScript):

Once this line is pasted onto your site, your form appears. More importantly, it is directly connected to Webmecanik!

If you decide to update your form in Webmecanik later on (for example, adding a "Phone number" field or changing some text), your website will update automatically and instantly. You'll never need to touch the code on your website again.

💡 WordPress Tip:

On your WordPress page, simply add a "Custom HTML" block, paste this line of script inside, and you're all set!

🛠️ Option 2: Manual Copy (For more technical users)

Manual copy allows you to retrieve the full "skeleton" of your form (the complete HTML and CSS code).

What is it used for?

It's useful if you (or your webmaster) want full control over the form's styling so it seamlessly matches your website's custom design.

⚠️ Please note:

Unlike the JavaScript method, this code is "static." If you return to Webmecanik to add a new field to your form, it will not automatically appear on your site. You will need to repeat the process: copy the newly generated code from Webmecanik and replace the old code on your website.

🚫 Option to avoid: Integration "Via iframe"

Looking at the image, you'll notice a final boxed option at the bottom: "Via iframe."

We strongly advise against using this method.

Why?

An iframe acts like a "window" cut into your site to display another site through it. While easy to set up, it often causes significant display issues:

On mobile devices (smartphones): The form scales poorly on small screens and often gets cut off.
Height issues: If an error message appears after the user clicks "Submit," the form expands and risks being hidden, forcing the user to scroll inside an unappealing miniature window.

It is also less optimal for your page's search engine optimization (SEO).

Always prioritize the JavaScript method (recommended) to ensure a seamless display on both desktop and mobile!