Elementor is a powerful page builder that simplifies WordPress design, but sometimes you may want to use an Elementor Form inside a custom template. Whether you're building a custom theme or creating a special layout, integrating an Elementor Form is straightforward. In this post, I'll walk you through three simple methods to achieve this.
Method 1: Using Elementor Shortcode
The easiest way to insert an Elementor form into a custom template is by using the Elementor template shortcode.
Steps:
- Create Your Form – Design your form using the Elementor Form widget and save it as a template.
- Get the Template Shortcode – Navigate to Templates > Saved Templates in WordPress and copy the shortcode of the saved template.
- Embed the Shortcode in Your Custom Template – Paste the shortcode into your custom template file using the following PHP function
1 | echo do_shortcode( '[elementor-template id="YOUR_TEMPLATE_ID"]' ); |
Replace
YOUR_TEMPLATE_IDwith the actual ID of your saved template.
Method 2: Using Elementor's PHP Function
For better control over the output, you can use Elementor's built-in function to render a template inside your PHP file.
Steps:
- Ensure your form is saved as a template in Elementor.
- Insert the following PHP code in your custom template file:
1 | echo \Elementor\Plugin::instance()->frontend->get_builder_content(YOUR_TEMPLATE_ID); |
his function retrieves and displays the content of the specified Elementor template.
Method 3: Using Elementor’s API for Dynamic Embedding
If you need more flexibility, you can use Elementor’s API to dynamically fetch and display the form template.
Steps:
- Ensure Elementor is active on your site.
- Add this code to your custom template file:
1 2 3 4 | use Elementor\Plugin; $elementor = Plugin::instance(); echo $elementor ->frontend->get_builder_content_for_display(YOUR_TEMPLATE_ID); |
This method allows for more dynamic form rendering.
Final Thoughts
Using Elementor Forms in a custom template can enhance your website’s functionality without relying on additional plugins. Whether you prefer using a shortcode, PHP functions, or Elementor's API, these methods provide a seamless way to integrate forms into your custom layouts.
Do you use Elementor Forms in your custom templates? Let me know in the comments!
No comments:
Post a Comment