You spend an afternoon tweaking your landing page columns, dialing in your row spacing, and getting your typography just right. Then you reach the bottom of the page and realize you have no easy way for potential clients to reach you. An email address written out in plain text usually brings a wave of automated scrapers, and switching between different page templates can sometimes break how raw contact forms look.
If you use Beaver Builder to design your site, you do not need an overly complicated setup to collect client messages. With Diviniket WP Forms, you can build your layout visually inside the WordPress admin dashboard and drop it right into your layout using a simple shortcode. In this post, I will walk you through how to configure a form and embed it cleanly into any Beaver Builder layout.
Why Shortcodes Work Best for Page Builders
When working with a WordPress page builder form, many site owners search for a dedicated builder module for every single task. That approach sounds convenient at first, but it can quickly tie you to specific builder updates and create unnecessary overhead. If a module breaks during an update, your entire contact section might vanish. A Beaver builder shortcode provides a dependable bridge between your layout and your form processing logic. Diviniket WP Forms uses the standard WordPress shortcode structure. This means the plugin handles the processing, validation, database storage, and email notifications on its own. Beaver Builder simply provides the visual column or row where the form appears. Because the shortcode renders cleanly inside any content area, you retain full control over your page structure. You can put your form inside a narrow sidebar, place it side-by-side with your office contact details, or center it beneath a bold call to action. The layout stays flexible while your form management remains central in your WordPress admin dashboard.Building Your Form in the WordPress Dashboard
Before you open the page builder, you need to create the actual form fields. Setting up the layout first in the form editor keeps your builder interface tidy and fast. Head to the Divine Forms section in your WordPress dashboard and choose the option to add a new form. This opens the visual form builder interface, where you can assemble your required fields. You can assemble standard fields like a dedicated Name field, an Email field, and an international phone input with a country-flag selector and automatic country-code prefixing. If you need clients to send documents or photos with their enquiry, you can also add a file upload field. After placing your fields, check the form style customizer controls. You can adjust:- Form width and overall alignment to match your intended page layout.
- Background opacity so the form sits naturally on your page backgrounds.
- Input text color and placeholder color for good readability.
- Placeholder transparency to keep your interface clean.
[divismfo_form id="123"]Step-by-Step: Adding the Form to Beaver Builder
Once your form is saved and styled, putting it on a live page takes only a couple of minutes. Here is the step-by-step walkthrough to embed your Beaver builder form properly:- Open the WordPress page or post where you want the form to appear, and launch the Beaver Builder editor.
- Add a row layout that matches your desired design, such as a single column for a focused contact page or a two-column row if you want text on one side.
- Open the modules panel, locate the basic content modules, and drag an HTML module or a Text Editor module into your chosen column.
- Paste your copied shortcode directly into the module content box. For example, paste your specific code formatted like
[divismfo_form id="123"]. - Save the module settings. The builder preview may display the raw shortcode or render the form container depending on your preview settings.
- Click the Done button in the top bar of Beaver Builder and select Publish to make your changes live on the site.
- Visit the published page in a private browser window to confirm the form fields, alignment, and submission button appear as expected.
Spam Protection and Submission Behavior
A live contact form on the web will eventually attract automated spam bots. If you do not filter those submissions, your inbox fills up with garbage and legitimate client requests get overlooked. Diviniket WP Forms includes built-in Honeypot protection. This technique creates a hidden field that visitors never see, but automated scripts usually fill in. When the plugin spots data in that field, it discards the submission quietly. Honeypot works out of the box and requires no external accounts or scripts, though it cannot catch every single human or modern script. If you need stronger verification, you can configure external providers from our form spam protection options. The plugin supports Google reCAPTCHA v2, Cloudflare Turnstile, and hCaptcha. You configure your API credentials globally in the plugin settings and then toggle the protection on or off for individual forms. When enabled, the chosen provider loads its script and verifies the submission token before processing. When visitors click submit, the form processes their message using AJAX. This means the message sends without triggering a full page reload, keeping the experience smooth. If you prefer to send users to a custom confirmation page instead of showing the default success message, you can set a redirect URL in the form settings.Connecting Submissions to Google Sheets
Receiving notification emails is useful, but email can be hard to track when multiple people handle customer requests. In addition, emails occasionally get misdirected by aggressive inbox filters. Diviniket WP Forms writes every form submission directly to plugin-owned database tables in your WordPress installation. You can view, manage, and export these entries at any time by going to Divine Forms > All Entries in your admin menu. This guarantees you have a record stored safely on your own server. If your team works out of spreadsheets, you can also use our Google Sheets spreadsheet integration. To set this up, configure your Google service account credentials in the plugin settings and connect your target spreadsheet. The plugin can validate the spreadsheet headers to confirm everything matches. Once you enable synchronization on your form, every new submission pushes directly to a new row in your spreadsheet, including references to any uploaded files.What to Know First and Limitations
While Diviniket WP Forms handles everyday contact and lead-generation needs well, it is important to be clear about what the plugin does not do. The plugin is not a full-scale booking calendar or appointment reservation platform. You can easily build a booking enquiry form to ask for preferred dates, but it will not manage conflicting time slots or sync with calendar software. The plugin does not include built-in payment processing, PDF generation, or direct WhatsApp messaging. Those features were removed in earlier versions to keep the plugin focused, stable, and lightweight. You will also not find multi-step forms, conditional field branching, or calculation fields in the current version. If your site uses aggressive page caching or JavaScript optimization plugins, test your forms thoroughly after setup. AJAX submissions and external CAPTCHA challenges require standard JavaScript to run in the visitor browser. If an optimization tool delays or breaks those scripts, form submissions can fail.FAQ
Can I put more than one form on the same Beaver Builder page?
Yes, you can place multiple forms on a single page by inserting separate shortcodes into different modules. Make sure each shortcode uses the correct form ID so the plugin processes each set of fields accurately.Does the form automatically match my Beaver Builder theme fonts?
The form inputs inherit general font families from your active WordPress theme or Beaver Builder theme settings. You can adjust colors, placeholder transparency, form alignment, and width using the visual customizer inside the plugin dashboard.Why does my form show the raw shortcode in the Beaver Builder editor?
Some Beaver Builder modules do not fully execute WordPress shortcodes inside the live editor view to keep editing performance fast. Once you publish or preview the actual page, WordPress executes the shortcode and displays the interactive form.What happens if a visitor tries to upload a file through the form?
When you include a file upload field, the visitor can select an attachment, view the filename, or remove the file before sending. The plugin stores the uploaded file reference in your WordPress database entry and can send that reference to your connected Google Sheet.If you prefer a visual walkthrough, you can watch demonstrations on our YouTube tutorial channel. You can also connect with me directly on my developer LinkedIn profile if you have feedback or want to follow ongoing plugin development.