Shortcodes are a great way to output dynamic and complex content on WordPress posts and pages.
Shortcodes don’t come built-into WP. Rather, they are added to your site by plugins (and sometimes themes). For instance, a contact form plugin like WPForms provides you with a new interface to create forms. Each form then has a shortcode you can copy and paste into a page to output the form.
When it comes to content like a contact form, it has only been possible to add to a page with shortcodes. That said, the new Gutenberg editor is changing all of that, but we’ll cover that in a future video!
What are shortcodes and how do you use them on your site? That will be the subject of today's video. Now, when you have a fresh install of WordPress, you won't have any shortcodes already added to your site. Shortcodes are always added by plugins and sometimes by themes. The reason for a shortcode is to output some sort of complex content within a post or page. For instance, here you can see I've got a basic contact form displayed on my contact page. To add this contact form into this page, I'm using a shortcode, so I'll show you how to do this in a moment. But first it's important to understand that when you're editing a post or a page, you can output paragraphs with the post editor. You can add images, Youtube embeds, all sorts of content. But for something more complex, you often need to use a shortcode.
So I think a contact form is a great example. So in this video, I'm using the contact form plugin called WPForms. And if you do need a plugin to add a contact form to your site, I definitely recommend WPForms. It's my favorite, uh, form plugin. It's really, um, feature rich and you can use it for all sorts of stuff. So I highly, highly recommend this one. It's got a huge amount of great reviews. So I'm not going to show you the ins-and-outs of this plugin in this video. I'm just going to use it as an example. Um, you can see with WPForms installed, I have a new WPForms menu and I have one simple contact form created. WPForms is used to create this form, but then the question remains, how do I add this form to my contact page?
And that's why each form has a shortcode included. Now whenever you see a shortcode, it's going to have, uh, a bracket on the left and a bracket on the right. Inside you'll see usually the name of the plugin and then a series of attributes. In this case, I see WPForms and an id of 819 which refers to this form which happens to have an id of 819. Now you never ever need to edit this text in anyway, so if this seems like you know some weird code to you, it's okay. All you ever have to do is copy and paste the shortcode provided by the plugin. So just to give you a preview of this form and what it looks like, this is the way the form is supposed to display on my site. Okay, so this shortcode is my way of outputting it on any post or page as I want and I could output it on multiple pages if I wanted to.
Now to add it to a page, I've got this simple contact page set up and I'm going to press enter and now I'm creating a new block with the Gutenberg post editor. I could just copy and paste the shortcode, but what I want to do is click this "add block" button and I'll search for the shortcode option and you'll see it pops right up. And once I click it, I'll have the new shortcode block inserted. Now all I have to do is press command V or control V on a Windows machine to paste the shortcode into this block. Once I update my post and view it, you'll now see the form being output. Furthermore, if I make any updates to this contact form, this shortcode will immediately display those changes because it's tied to this contact form. So there are lots of WordPress plugins out there that add multiple ways to output content on your site. Usually if it's a well-made plugin, you'll have both a widget and a shortcode to add to your site. So I hope this clears up why you would use shortcodes and how to use them on your site. And as usual, if you have any questions remaining, please post in the comments section below. Thanks for watching.