You write a detailed service page or a clear contact page, hit publish, and leave an unlinked email address in the footer. A few days pass, and messages either end up lost in a spam folder, or people copy the address incorrectly and never reach you. Visitors usually prefer typing their details into an on-page form right where they are reading, rather than switching over to their mail app.
When you edit your pages in WordPress, you are working directly with Gutenberg. Dropping a working form into that layout does not require complex template editing or custom code. With Diviniket WP Forms, you can build your form visually, grab its unique shortcode, and paste it into the core WordPress editor in under two minutes.
Why Use a Shortcode Block for Your WordPress Block Editor Form?
When WordPress introduced the block editor, many people assumed every single tool needed a dedicated block with twenty nested sub-panels. Dedicated blocks can be handy, but they also risk slowing down the editor screen or breaking when WordPress core updates its block markup APIs.
Using a shortcode block form keeps things simple and predictable. WordPress provides a native Shortcode block by default. It has one job: receive a shortcode string and let the plugin render the output on the front of your website. Diviniket WP Forms relies on this clean shortcode pattern, which means the editor remains fast, and your layout will not fall apart when you rearrange blocks on the page.
This approach also means you can move your form anywhere Gutenberg allows. You can drop it inside a single column, nest it within a two-column layout next to your office hours, or place it inside a group block with a custom background. The editor handles your page layout, while the plugin handles field rendering, validation, and submission processing.
Building Your Form Before Opening the Editor
Before you insert anything into a page, you need a saved form in your dashboard. You do not design form fields inside Gutenberg itself. Instead, you set up the structure through the visual form builder interface provided by Diviniket WP Forms.
To get started, open the Divine Forms section in your WordPress dashboard and select the option to add a new form. From there, you can configure your fields according to what you actually need from your visitors. If you only need a simple enquiry form, add the dedicated Name field, the Email field, and a message box. If you run a support desk or gather project specifications, you can also include the international phone input or the file upload field.
The international phone input displays a country flag selector and adds the country code prefix automatically, which helps prevent malformed phone numbers from international clients. If you enable file uploads, the interface displays the selected filename and gives the user a clear remove-file button if they change their mind. Once your fields are arranged, save the form to generate its unique shortcode.
Step-by-Step Walkthrough: Adding the Form to Gutenberg
Once you have built and saved your form, placing it on a page or post takes only a few clicks. Follow these exact steps:
- Open the Divine Forms section in your WordPress dashboard, locate your saved form, and copy its generated shortcode. The shortcode looks like this:
Keep in mind that 123 is only an example ID. Your actual shortcode will use your form's specific numerical ID.[divismfo_form id="123"] - Navigate to Pages or Posts in your WordPress dashboard and open the page where you want the form to appear.
- Click the plus icon (+) in the Gutenberg editor to open the block inserter.
- Search for Shortcode and click the core Shortcode block to add it to your page layout.
- Click into the text box of the Shortcode block and paste your copied shortcode directly into it.
- Click Update or Publish in the top right corner of the block editor.
- Open the published page in a new browser tab to view your live form and run a test submission.
Because the plugin processes entries through AJAX form submission, the page will not undergo a full reload when your visitor hits submit. Instead, the submission processes immediately in place, showing the confirmation message or triggering a URL redirect if you have configured one in the form settings.
Styling Your Form to Match Your Block Layout
A common complaint with Gutenberg form embeds is that the form looks out of place compared to the rest of the text and columns. Some forms stretch awkwardly across wide desktop screens or show cramped input fields on mobile screens.
Diviniket WP Forms includes a built-in style customizer so you do not need to write raw CSS to fix basic spacing. Within the form settings, you can adjust the form width, form height, and form alignment. For instance, if you insert your shortcode block into a centered Gutenberg column, you can set the form alignment to center and define a custom width that matches your text margins.
You can also adjust visual details like background opacity, input text color, placeholder color, and placeholder transparency. This helps keep form placeholders legible without clashing against your site's color scheme. The forms are responsive out of the box, meaning they adjust down for mobile screens without breaking your page boundaries.
Handling Submissions, Spam, and External Data
Adding the form to your page layout is only the front-facing half of the job. Once visitors start filling it out, you need to know where that information goes and how to keep automated junk out of your database.
For spam defence, the plugin provides built-in Honeypot protection that works right away without external accounts. If your site receives higher volumes of automated junk, you can set up third-party spam protection options including Google reCAPTCHA v2, Cloudflare Turnstile, or hCaptcha. You enter your API credentials in the global settings, and then turn protection on or off for that individual form. When active, verification requests are sent to the respective provider during submission.
Every valid entry is saved in your WordPress database. You can review them anytime by going to Divine Forms > All Entries in your dashboard, where you can inspect user inputs, view uploaded file references, and export entries. If you prefer to review enquiries alongside your team without granting them WordPress dashboard access, you can connect the plugin to a Google spreadsheet through our Google Sheets integration. After setting up a Google service account, the plugin synchronizes form entries directly into your spreadsheet rows as submissions come in.
What to Know First: Practical Limitations
I believe in being completely straightforward about what Diviniket WP Forms does and does not do. Knowing these boundaries in advance saves you time during site builds.
First, the plugin does not include a dedicated native Gutenberg block. You add forms using the native Shortcode block. This means that inside the Gutenberg editor, you will see the shortcode text rather than an interactive visual preview of the form fields. To see how your styling adjustments look, you preview or view the actual page.
Second, this is a clean, standard form builder. It does not support conditional logic, multi-step wizards, or dynamic field calculations. Furthermore, built-in WhatsApp notifications, PDF generation, and payment gateway integrations were intentionally removed in version 1.2.1 to keep the core codebase lean. If you need complex checkout funnels or conditional branching, you will need an alternative setup. For general contact enquiries, feedback collection, support requests, and lead generation, the current feature set handles the job reliably.
FAQ
Can I add more than one form to the same Gutenberg page?
Yes, you can place multiple Shortcode blocks on a single page and insert different form shortcodes into each one. Each form handles its own submissions independently using its specific form ID. Be sure to test both forms on the live page to verify their layout spacing.
Why is my form showing as text instead of an actual form?
This usually happens if you paste the shortcode into a regular Paragraph block instead of a core Shortcode block, or if the form ID in the shortcode is mistyped. Make sure you use the dedicated Shortcode block and verify that the numeric ID matches the form you created under Divine Forms.
Can I redirect visitors to a custom thank-you page after they submit?
Yes, the plugin supports redirect-enabled forms. You can configure a destination URL in the form settings so visitors are redirected to an onboarding or thank-you page instead of seeing the default inline confirmation message.
Does the form work if I place it inside Gutenberg column blocks?
Yes, the Shortcode block functions normally inside Gutenberg Column blocks, Group blocks, or Cover blocks. You can use the form width and alignment controls in the form style settings to ensure the inputs fit neatly within the column width you selected.
Do I have to install an SMTP plugin to receive email alerts?
Diviniket WP Forms includes email notification settings for administrators and visitors, but it relies on your standard WordPress mailing setup to send them. If your hosting server does not deliver PHP mail reliably, configuring a standard WordPress SMTP tool is a general WordPress best practice that solves deliverability issues across your whole site.
If you prefer watching a visual walkthrough of the setup process, check out our step-by-step guides on the Diviniket YouTube channel. If you have questions about form building or want to connect directly, you can find me on my Aditya Singh LinkedIn profile.