Integrate a Form in a Page
Embed your forms into pages using shortcodes or the Gutenberg block.
Seamlessly Embedding Forms into Your Web Pages: A Step-by-Step Guide
Learn how to easily integrate your cost estimation forms into any WordPress page with simple shortcodes and various display options.
Basic Shortcode Integration
Seamlessly incorporate a form into a WordPress page by simply pasting its shortcode into the desired location within the page content:
Generating the Shortcode
To expedite the shortcode generation, click on the "Shortcode" button corresponding to your target form within the forms list panel:
Display Mode Options
Explore the options within the Shortcode modal for a tailored embedding experience:
Display Mode
Choose how the form should appear—within the page content, in fullscreen, or as a popup. For modal display, paste the form shortcode with the popup attribute, then append the CSS class shown in the Shortcode modal to the button or link designated to trigger the popup.
Example of CSS class added to a link to open the form popup:
Initial Step
Utilize this dropdown to specify a different starting step other than the default one. This facilitates the use of the same form with varying start steps across different pages on your website.
Advanced Integration Options
Beyond the basic shortcode, there are several advanced options for integrating your forms:
Embedding in Templates
You can also embed forms directly in your theme templates using the PHP function:
Fullscreen Mode
Display the form in fullscreen mode, which is perfect for complex forms:
Pre-filled Values
You can pre-fill form fields using URL parameters:
Where item_123 is the ID of the form field.
Multiple Forms
You can embed multiple forms on the same page by using different shortcodes:
Best Practices
- •Always test your forms after embedding them to ensure they display and function correctly.
- •Consider the page layout when choosing between inline, popup, or fullscreen display modes.
- •For complex forms, the popup or fullscreen mode often provides a better user experience.
- •If using the popup mode, make sure the trigger button or link is prominently displayed.
- •When embedding multiple forms on the same page, ensure they don't conflict with each other.
Pro Tip: Use the popup display mode for forms that are complementary to your page content, allowing users to focus on the form when they're ready to engage with it.