How to Add Shortcode in WordPress with Elementor?

Add Shortcode in WordPress with Elementor

Table of Contents

Shortcodes, basically, are small pieces of code that allow you to do diversified things with very small effort. They can be used to embed forms, videos, or any other objects on a page or post without the need to write any code. 

Shortcodes can be really handy for the places where you do not have a particular widget to use with Elementor Page Builder. For example, a contact form that does not require a custom-built design can be displayed on a page built with Elementor Page Builder using a Shortcode.

Read More: How to Display Elementor Template Using a Shortcode

In this tutorial, we will see how you can add Shortcode in WordPress with Elementor.

Adding Shortcode in WordPress with Elementor

Getting the Shortcode

Let us suppose that you have built a Contact Form using Contact Form 7 plugin and want to display that contact form on a page built with Elementor Page Builder. In order to do that, you would first need to get the Shortcode of a particular contact form that you’d like to be displayed.

It is pretty easy to get the shortcode for your contact form. For this, you need to first log into your WordPress Admin dashboard and then go to Contact > Contact Forms.

Go to Contact Form
Go to Contact Form

Here, you will be able to see the Shortcodes for all the Contact Forms. If you are not able to see the shortcodes, check the screen options and check if the shortcodes column is enabled or not.

Copy the Shortcode
Copy the Shortcode

Now, simply copy the shortcode.

Embed Contact Form using Shortcode in Elementor Page Builder

As we discussed above, we want to display the contact form on a page built with Elementor. So, let us now create and edit a new page with Elementor by heading over to WP-Admin > Pages > Add New and click on Edit with Elementor.

Edit the Page with Elementor
Edit the Page with Elementor

Here, we will be using the Shortcode widget of Elementor to embed the Contact Form. So, let us drag and drop the Shortcode widget to the page.

Shortcode Widget
Shortcode Widget

Now, in the Shortcode widget, simply paste the Shortcode that you’d copied in the previous step. 

Paste the Shortcode in Shortcode Widget
Paste the Shortcode in Shortcode Widget

The Contact Form will now be displayed on the page. Finally, publish the page. 

Summing it Up!

That’s it! It is this simple to add Shortcode in WordPress with Elementor Page Builder. Shortcode widget of Elementor can be used to display Twitter Feed, Gallery, Website API and many other things.

Read Next: How to Display Google Maps with Multiple Locations using Elementor?

Let us know how you use the Shortcode widget on your site by sharing your thoughts in the comments section below!

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Kamlesh Vidhani

Kamlesh Vidhani

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Elementor addon

Latest Additions