How to install a secure Elementor form on my website?

WordPress and Elementor

Building a WordPress site with a page builder is much easier. One alternative to the standard Gutenberg block builder is Elementor. You can download Elementor for free from the WordPress plugin library. With Elementor, you can easily build content without programming skills using drag-and-drop blocks. At the same time, you will see your page almost in the same form as it will be when it is published.

The basic version of Elementor does not include the Elementor's Form Builder. The form builder is a feature of Elementor Pro. The Elementor Pro has many more functionalities overall, therefore Elementor Pro is often installed on websites on top of the basic Elementor. One good reason to get Elementor Pro is precisely its easy-to-use element for building the forms. With this element, you can add, for example, a contact form to your site very quickly and easily. It is also easy to change the fields and layout of the form.

There is plenty of material to get started with Elementor on their support page: Elementor help.

Below I explain how to add the form to your page. There is also plenty of information on adding form functions and modifying the appearance of the form on the same Elementor support pages.

At the same time, it is important to consider the security of the form. Spam bots find your form very quickly after publishing, so it is worth protecting it from spamming by bots.

Installing an Elementor form

  1. Open the editable page with the "Edit with Elementor" option.
  2. The sidebar on the left side of the view contains elements that can be dropped onto the page. If you are using the Pro version, the "Pro" elements can be found right below the "Basic" elements. The easiest way is to write the word "form" in the top search tool.

    Elementor search for form

  3. Drag and drop the “Form” element on your page to “Drag widget here”. When dropped, the element transforms into a draft form.

    Elementor contact form draft

  4. You can select more fields and change the current fields in the "Form Fields" section of the left sidebar. Add a field by pressing “+ Add item”.

    Elementor draft form fields

  5. Be sure to protect your form. More on this below.

You can see more examples of form editing in the video: How to Use Elementor's Form Builder.

Standard protection methods of the Elementor form

You can protect the form in Elementor Pro with the standard security measures found in Pro.

    1. In the "Form Fields" section, click "+ Add item". After that, select "Honeypot" from the drop-down menu.

      Elementor form add field

    2. The field becomes invisible on the form itself. Remember to save the page by pressing "Update" at the bottom of the page. Nothing else is required.

A honeypot is usually a moderately good protection method. However, the bot test tool on this website was tested and it sent easily mail through a honeypot-protected Elementor Pro form. The standard security measures of the Elementor Pro form also include Google's Captcha. Installing Google Captcha is not covered in this article, as it requires registration with Google. Google also has its own requirements for the use of Captcha and in some cases separate sensitivity settings.

Protecting your Elementor form more efficiently with a plugin

The easiest and most effective way to protect your Elementor Pro form from bots is to use the Bot Spam Block plugin. The plugin has been specially developed to block spam sent by bots. The only setting for the plugin is the license key. Otherwise, the plugin is lightweight and works both efficiently and automatically without unnecessary settings. It also does not create additional frustration to the actual user of the form, because the user does not have to solve additional tasks or riddles.

Elementor and dxw3 now offer a bundle where the buyer of Elementor Pro gets dxw3 Bot Spam Block plugin for free.

This requires that you 1) order the Elementor Pro plugin by clicking the image below.

2) Request after this 100% coupon code either by email or by using the contact form.

And 3) come back here to shop and redeem the plugin with the coupon code.

How to install a Contact Form 7 form on my WordPress site?

Follow these instructions to install the Contact Form 7 form on your web page

  1. Open the WordPress admin view under Plugins – Installed Plugins. Click "Add new".
  2. Enter "Contact Form 7" in the search box in the upper right corner and click Contact Form 7 - "Install now". After that, click on the same button "Activate".
  3. After that, click on "Contact" in the admin menu. You can see only one form at this time. The form usually works with its default settings, but you can edit the settings by clicking on the name of the contact form. By default, form submissions arrive in the site administrator's email box. You can also see the default fields of the form by clicking on the name of the form "Contact form 1".
  4. Click on the code in square brackets "Shortcode". Copy the code including square brackets to the clipboard, e.g. Ctrl+C/Command-C.
  5. After this, the shortcode must be placed in the desired place where the form is to be placed. If you want to place the form on a specific page, click "Pages" in the admin menu.
  6. Next, either add a new page or click on the title of an existing page. In page editing mode, click the plus sign in the upper left corner to add a block. Type "short" in the search box.
  7. Drag the block to the desired position on the page. Set the code copied to your clipboard as the value of the block. After that, save the page from the upper right corner "Update".

Everything is ready. Your contact form will now send you contact requests entered via your form on your site. Your site's e-mail must of course be set up correctly. Try out your form and if you do not receive the message entered through the form to your admin email, there may be a problem with the email settings. In this case, you should test the emailing by trying to reset your own password. If you do not receive a message for resetting the password, your email settings need to be fixed. However, if you can receive a password reset message, there likely is a problem with your form.

Important spam settings

When your form is set up correctly, you will receive the test messages in your email. Consecutively, however, it won't be long before spam bots find your form. You should immediately block the reception of spam mail with additional settings. Contact Form 7 can connect Google's CAPTCHA/reCAPTCHA, the purpose of which is to prevent spam. However, CAPTCHA can be tricky to set. Furthermore, it may add extra tasks for your visitors before they can submit their messages. In addition, the new CAPTCHA requires some admin settings, and after all the trouble, you may block some genuine submissions or allow bots to submit the form.

The easiest way to stop the bot spam is to set up on your site the Bot Spam Block plugin. The plugin works automatically after activation. You only have to set the license code for the plugin. Your visitors won't notice the plugin as it works in the background. In addition, they won't have to complete extra image tasks or solve math equations. Yet the plugin prevents bot spam from being sent via your form.