How to Add a Form to Elementor Using a Shortcode

You publish a clean landing page, share the link with prospective clients, and wait for new enquiries. Days pass without a message, or worse, someone tells you the enquiry button did not do anything when they clicked it. When you build pages using Elementor, getting a working contact section should not feel like troubleshooting a broken script.

You do not need an overwhelming setup to collect leads on your website. Using a reliable shortcode allows you to place your form anywhere inside your layout while letting the form builder handle data processing, email notifications, and spam prevention in the background. In this guide, I will show you how to build a form and place an elementor shortcode form onto any page using Diviniket WP Forms.

Why Shortcodes Are the Most Reliable Option for Elementor Pages

Page builders update frequently. When an update alters how internal elements render, complex custom widgets built specifically for a visual builder often suffer from layout shifts or script conflicts. Shortcodes avoid that issue by leaning on core WordPress execution rules.

A shortcode acts as a simple container. It tells WordPress to fetch the form and output its HTML exactly where the tag sits on your page. When you want an elementor contact form that behaves consistently across different updates and theme templates, dropping a shortcode into a native Elementor widget provides stable output without extra script overhead.

This approach gives you total separation of duties. You use Elementor to build your grids, set padding, and establish column widths. You use Diviniket WP Forms to manage fields, store data in your database, and manage spam protection.

Creating Your Form in the WordPress Dashboard

Before touching Elementor, you need to create the form itself. Diviniket WP Forms provides a visual interface directly inside your WordPress administration dashboard, so you do not have to write HTML markup or handle server requests manually.

Head to the Divine Forms section in your WordPress dashboard and select the option to add a new form. This opens the editor where you can drag and drop fields into position. For a standard contact form, you will usually want a Name field, an Email field, and a message area. If your business handles international calls or operates in multiple regions, you can also add an international phone input field. That field includes an automatic country-code prefix and a country-flag selector so visitors enter valid phone formats without guessing.

If you need clients to provide documents, brief notes, or screenshots, you can also include a file upload field. The plugin handles file uploads by displaying the selected filename and offering a remove button if the user picks the wrong file by mistake. To explore the visual interface in more detail, review our guide to the visual form builder.

Once your fields are in place, save the form. The system will generate a unique shortcode containing the numeric ID assigned to that form.

How to Embed the Form into Elementor Step by Step

Once you save your form, placing it on your page takes less than two minutes. The process uses Elementor's standard layout tools and does not require third-party addon packs.

  1. Open your WordPress admin menu and navigate to Divine Forms to locate the form you created.
  2. Copy the generated shortcode from your form settings. The shortcode follows this exact format:
    [divismfo_form id="123"]
    Keep in mind that 123 is only an example ID. Your form will have its own unique numeric identifier, which you must copy directly from your dashboard.
  3. Navigate to the Pages section in your WordPress dashboard, find the page you want to edit, and click Edit with Elementor.
  4. In the Elementor left-hand panel, search for the Shortcode widget. Drag this widget into the section or column where your form should appear.
  5. Paste your copied shortcode directly into the Shortcode box in the widget settings panel.
  6. Click the Elementor Update or Publish button at the bottom of the editor panel.
  7. Open the live page in a regular browser window to test the form submission.

Forms created with the plugin submit using AJAX by default. That means when a user fills out your fields and clicks submit, the page does not reload completely. The submission happens quietly in the background, providing quick feedback without jarring page jumps.

Configuring Form Design and Layout Settings

One common headache with an elementor shortcode form is alignment. Website owners often find their inputs spilling out of columns or looking mismatched against the rest of the site typography.

Diviniket WP Forms includes a form style customizer inside the dashboard. You can adjust the form width, form height, and form alignment directly in the plugin settings. This means you do not have to write custom CSS just to center a form within an Elementor column or constrain its maximum width on wide desktop screens.

You can also adjust background opacity, input text colors, placeholder colors, and placeholder transparency. Matching these values to your brand palette ensures the form looks like a natural part of your Elementor layout. Keep Elementor column padding moderate, and let the form style settings handle the internal dimensions of the inputs. If your site uses a dark layout, you can lighten the placeholder text and input colors inside the plugin settings so the fields remain clear and readable.

Stopping Automated Spam on Your Contact Form

Putting an unprotected contact form on a public website invites automated bot submissions. Within days, your inbox can fill with automated sales pitches and junk messages. Diviniket WP Forms includes multiple layers of defense to help keep spam down.

The first option is a built-in Honeypot field. A honeypot adds an invisible element to the form that human visitors do not see or fill out. Automated bots typically read the raw form code and populate every field they find. When the plugin detects that the hidden honeypot field contains data, it rejects the submission automatically. Honeypot does not require API keys or third-party accounts, making it a great starting point.

If your website receives heavy automated bot traffic, you can pair the honeypot with a dedicated verification provider. The plugin supports Google reCAPTCHA v2, Cloudflare Turnstile, and hCaptcha. You configure your provider credentials globally in the plugin settings, and then enable or disable the protection on individual forms as needed. When active, the provider script loads and verifies the submission token. For a complete look at these anti-spam tools, read our overview of spam protection options.

Managing Entries and Exporting Submission Data

Relying solely on email alerts for client leads is risky. Server delivery issues, aggressive spam filters, and accidental deletions can cause you to miss high-value business enquiries. The plugin stores every submission locally inside your WordPress database tables so you do not lose records.

You can view, review, and manage your form submissions anytime by navigating to Divine Forms > All Entries in your WordPress dashboard. This screen gives you an organized log of who reached out, when they submitted, their contact details, and any uploaded files they attached. You can also export your stored entries if you need to create offline backups or share records with your team.

If your team prefers to work directly from spreadsheets, you can link your submissions to an external spreadsheet using our Google Sheets integration. After setting up a Google service account and configuring your credentials in the plugin, validated form submissions will pass through to designated spreadsheet rows automatically. This gives you an updated log without manual copying and pasting.

Limitations to Keep in Mind

Being clear about what software cannot do saves time down the road. Diviniket WP Forms is built for standard data collection, lead capture, and enquiry management. It does not try to be an enterprise application builder.

The plugin does not include a dedicated native Elementor widget, so you must use the standard Elementor Shortcode widget as outlined above. It does not support conditional field logic, multi-step forms, or calculation fields. If you are building complex mortgage calculators or multi-page insurance questionnaires, you will need a specialized tool for that.

Previous versions of the software included integrations for WhatsApp, PDF generation, and payment gateways, but those were removed in recent updates to keep the core codebase lean and focused. The plugin is also not a booking calendar or appointment reservation platform, even though you can use it to receive general booking enquiries. It simply takes form input, checks it for spam, logs it in your database, and sends notification emails or spreadsheet rows.

FAQ

Can I customize the colors of my form from within Elementor?

Elementor styles the container holding the shortcode, but the internal form fields are controlled inside Diviniket WP Forms. You can adjust the input text color, placeholder color, placeholder transparency, and background opacity inside the plugin form style customizer. This keeps your field appearance consistent regardless of which page template you use.

Why is my Elementor shortcode form not rendering on the live page?

This usually happens if the shortcode was copied incorrectly or contains a typo. Make sure you copied the exact shortcode from the Divine Forms admin screen, including the brackets and your specific numeric form ID. Do not use placeholder IDs like 123 on a production page.

Does the form cause the entire page to reload on submission?

No, the plugin uses AJAX submissions to send form data in the background. Your visitors will see their confirmation message or experience your configured redirect without waiting for a full page refresh. This ensures a clean experience on mobile devices and desktop screens alike.

Can I route submissions to a thank-you page after users submit?

Yes, the plugin supports redirects upon submission. You can specify a redirect URL in your form settings, which instructs the browser to send visitors to an Elementor thank-you page or confirmation page once their message is processed.

If you want to watch visual demonstrations of form building and shortcode setup, check out our walkthrough guides on the Dev Aditya Divine YouTube channel. You can also connect with me directly on my Aditya Singh LinkedIn profile to share feedback or ask questions about upcoming plugin improvements.

Download Diviniket WP Forms