Need to show your WordPress form entries on the front end of your site?
Showing form entries on the front end lets you showcase important information to your visitors. That means you can use it to show reviews, create directories, display event calendars, and more.
In this video, we’ll show you how to display WordPress form entries on your site.
Top Resources
⚡Use Promo Code WPBVIP⚡
►WPForms https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
So you want to display all the form Entries that happen on your WordPress Website for your visitors on the front End of your website in this video I'm Going to demonstrate exactly how to do That let's go Now before I demonstrate the actual Process let me clarify a couple of Things you might or might have a form Plugin already installed on your site And looking to maybe uh just show the Form entries on the front on the website And I have to clarify that the Functionality or the process of getting This functionality on your website will Heavily depend on the plugin that you've Already chosen so if it's a one-off Thing you might be able to put it off by Putting some something together or Hacking a solution together but this is Something that you'll use regularly it's Much better and much more easier and Much less headache to just get a plugin That supports this one or supports this Functionality out of the box that way You'll not have to mess with code you Won't have to like mess around with code And won't have to make any modifications To your files in WordPress and that way You have peace of mind as well so what I've done is divided this video into two Parts so I can demonstrate both the Different processes in the first method Where I'll demonstrate a form plugin
Which already supports this Functionality and I'll show you how to Actually how much easier it is to just Get a form plugin which supports this Functionality to have a view or have a Front-end display of all the formalities Inside it's very easy and the second one Is where I'm going to be using another Plugin which does not support this Functionality out of the box but I'll be Using some code Snippets and putting Together a solution which can actually Replicate this and depending on the form Plugin you're using already you might be Able to get some inspiration or Understand and if you're not uh have Decided yet on the form plugin to use Then I'll have or I'll be able to give You some information about what you can Expect uh with the form plugins then I'm Going to demonstrate this functionality With now in both cases uh of course I'm Going to demonstrate the process Completely in as detail as much detail As possible but you can decide for Yourself after watching the Demonstration which form plugin is good For you and as I said if you use this Functionality often or if it's business Critical to your website or it's very Important to your website it's better to Choose the form plugin which already Supports this functionality I hope with That clarification you have the right
Mindset to watch this video let's get Started with the first form Plugin or The function Plum form plugin which Already supports this functionality out Of the box which is formidable forms Let's go So I'm inside the admin area of my WordPress website and as I mentioned the First demonstration is going to be with A form plugin that supports this Functionality out of the box called Formidable forms the website is Formidableforms.com this is what the Website looks like and you can check out All the different functionality this is A very very a Powerhouse of a form Plugin and I'd say it's it's much more Than a form plugin so you can check this Out and just to clarify the Functionality that we're going to work With which is displaying the form Entries on the front end is not Available in the free version there's a Free version which is very powerful but This functionality in particular is not Available in the free versions you can Go to the pricing page check out the Different plans that they offer and pick One up whatever suits your needs I Already have the premium and the free Version installed both of them are Required to be active on the site so I'm Just going to get started with creating A form first so what I'm going to do is
Go to the menu entry right here go to Forms And inside the forms a contact form I Already created one or I'd say it's also Included as default with the premium Version let's check out the form plugin How it looks like So it's a very simple form there's a Name there's a last name there's an Email subject and message and a very Similar to what the form building Experience is like you have all these Fields available which you can just drag And drop so I can just drag and drop a Text field anywhere I like I can drag And drop paragraphs so I have the Complete functionality or complete I say Freedom to design the form of whatever I Like so you're not limited to contact Forms you can create any kind of forms And all of those forms will support Those uh front-end interviews that I'm Going to demonstrate so figure this out For yourself whatever you want to Include that information can be included In the form itself just to keep this Simple I'm not going to modify this the Simple contact form is more than enough For me so I'll just update this because I made some changes I don't want to mess This up and what I've done is once this Is updated I'll create a new page to Embed this form on the site so I'll Create click the embed button which is a
Much faster way to do this I can create A new page and I'll just name this I'll Say contact us Create page And now page has been created and the Contact form has been embedded let's Publish the post as well let's publish It and also open it up in a new tab Just to see how it looks so simple Contact form it will work as any other Contact form and what I'm going to do is Just pause the video here right here Make a few entries for this because if You want to demonstrate how it will look Like on the front end when we display it You'll need some entries to work with Right so I'm going to pause the video Right here fill it fill it this form up With a few different trees so that we Can start working on it all right pause The video right here So I've made some entries in the form Already you can see your responses were Successfully submitted let's go back to The website I'll show you how the Entries look like and then they will Start the process of uh creating a page Where we can display these entries on The front end so going back here if you Go to the formative forms and you go Into entries this is where you'll be Able to see all the entries that happen Throughout the forms on your website Since I just have one form you can see
All these entries were made on this Contact us form and you can also view These entries for example if I want to Just see uh what the actual entry was All the details I can click the view Option and I'll see all these options Available or at least all the details Will be visible now of course we want to Displace on the front end so what we'll Do the process to begin this is by going Into the form section And once you're in the forms open the Form that you want to create a view for You want to display the entries for on The front end and one thing you might Not have noticed or you might have Noticed is this views option right here And Views is the functionality that We'll be using to create a front-end View for all the form entries that Happen on the website now you might Notice that this is grayed out because This actually is part of formidable Forms add-ons and what is add-ons Add-ons is like plugins for formidable Forms because not everybody uses all the Functionalities all the different Functionalities that formidable forms Offers so they created a add-on system Where you can just pick and choose for Certain functionality that you want to Use that keeps the plugin size Manageable so if you want to check out All the add-ons you can go into the
Add-on section let me go here And you'll see I have the pro version Already installed I have the active Campaign authorizing it just tons of say Add-ons available for formidable firms You can uh transfer your details to Google Sheets or you have the API you Have geolocation you have uh landing Pages MailChimp all that good stuff uh But it's not possible for me to cover Everything but you can check it out Definitely the extensive or the list of Plugins or add-ons is quite extensive What we are interested in is the views Add-on right here so this is the visual Views add-on which we want to use so What I'll do is activate this and it'll Download download the actual add-on from The formula performs website because my Account is created and my license key is Activated and once it's done when I go Back to the forms and go to that section The views entries will be enabled or not Grayed out so I'll go back to the edit Page And now you see the views is not Actually disabled or it's it's the Regular color or it's enabled right so If I go to the Views option I'll be able To start creating different views for This particular form entries now what Let me clarify what views are views is Just a front-end display of anything That a form captures you can display the
Information on multiple pages in Multiple different ways and different Formats and you can also have some Customization options which I'm going to Talk about when I show you the actual Process but for this example what I'm Going to do is just simply create a Simple simple page show the entries in a Symbol table but as I mentioned the Possibilities are actually endless with This and depending on what your complex Use case you have you can do anything You like so let's create a new view for This form and you have multiple options As I said you can create and use a grid You can use a calendar you can use a Table you can create a new from scratch Or you have application templates as Well which is a whole new feature set Inside uh formidable forms but the table One is that I'm interested in but you Can actually create get one from scratch If you have a custom functionality that You are trying to build on your site you Can actually use this for example let's Say testimonials you're collecting Testimonials for your users and you want To display them in a certain way All is possible with formidable forms so Let's go to the table option because That's the easiest one right now and What I'll just name this table contact a Stable makes sense let's create a view And now this is where some interesting
Functionality comes in of course the Form captures some details that are Entered by the user but it also captures A lot of details which are captured Automatically for example when was the Form submitted so you have all these Details you have the name email message Last name and subject which is of course What the user fills in but you also have The integration date entry updated date Entry key status which is metadata about The form itself you can choose which of These details you want to showcase on The front end so for example I want to Display just the first name the email And just the message let's say that's All I want to include let's also include The subject Just for kicks right I'll Create a view And in just a couple of seconds the view Is now loaded and you can already see The information from the form that I Showed you inside the entries already Showing up here so the forms fields we Selected you have the name the email the Subject and the message showing up Already with some customization options Which I'm going to talk about now Obviously it makes sense to have all This information but the email of course Is a privacy issue because we are going To make this public information so what Do I do if I want to change which Fields I selected well you go to the manage
Columns option and you deselect the Fields that you don't want to have let's Say email and you can also say hey when Was this created maybe this is useful Information so I'll add this field here I'll update the view and now these are All the details that are visible on the Form but let's say I want to have the Integration date as the first field so I'll just click this six dotted menu I'll just drag it to the front end and Leave it there and now I can rearrange The columns as well so just Demonstrating some powerful Functionality inside the views which is Very easy to utilize and understand and Utilize so this is the entry or this is The where the form entry views is Showing up which is very obvious but What is this and this well these are Places where you can add content before Or after the form so let's say I want to Add headings some images some custom Data before the form or before the views Or before the actual entries I can do That I can do that after that as well so Let's say I click this and I type in These are all user responses from Contact form And let's say I make this H4 Let's update The View So now you can see the H4 has been added So this just gives you even more control Over what you want to include on the
Front-end page where this will be Displayed of course you can do that on The page itself as well I'm going to Demonstrate that but this might be Useful because you can also add some Dynamic data here so the same Functionality you can do after the Content and of course there's many other Features that you can utilize you can Add custom CSS classes you have Different styling options you have the Grid option advanced settings I'm not Not going to go into all those details Because again this might become Overwhelming but the the idea here is That formula forms the view Functionality is very very powerful in The form plugin apart from the views is Also very powerful so we've created this View right so but this exists right now Only inside the plugin similar to the How we first created a form and then we Embedded it on a page we also need to Create the view which we already did and Embed it on a page so what we're going To do now embed this on a page and the Method or the way you do it is a little Bit different instead of having a mid Option here what you will do is copy the Shortcode for this particular view which Is right here so you see display form Data ID 11 just click the copy button And of course it's on your clipboard Already let's go back to uh the contact
Form page I'll go back to the dashboard I'll create a new page on the site I'll Create a page add new And I'll just name it uh contact from Entries right And inside the block editor I'm going to Do a block for a shortcode So shortcode block and inside the Shortcode block I'll just paste the Shortcode that I just copied right here Display from this I already have my Clipboard I'll just paste it and leave It at that now publish this page publish This page Done let's open it up in a new tab and We'll see the form entries displayed With all the information that we did so Contact form entries this is the heading Of the post which I added and these are All the user sponsors from the contact Form which is what we added here And you have the form entries displaying Right here on the page this is the Powerful functionality inside uh Formidable forms very easy to utilize Very powerful and very quick to do of Course this demonstration might have Taken me 10 minutes to demonstrate but It's very easy to do it you can just do This in like two three minutes of your Time and have this all this data again I Said this uh this is just the tip of the Iceberg in where it comes to the even The views functionality the entire
Plugin is very powerful you can create Quizzes calculators all that good stuff With formidable forms so make sure to Check it out the link is in the Description of this video and if you're Liking this video this far thus far just Make sure to hit the like button on this Video So this covers the first part of the Video where I mentioned that I'll be Using a plugin which has an inbuilt Functionality to do this now let's go or Switch to the second part of the video Which is using custom functionality or We're creating this functionality using A plugin that does not support it Natively and I'm going to be using a Plugin called WP forms which is again a Fantastic plugin but does not have the Native functionality display form Entries so I'm going to use some code Magic to add that functionality or Create that functionality exclusively to 4wp forms it might not work exactly for Any other form plugin but I'm going to Demonstrate with WP forms all right so I'll pause the video for a second I'll Install WP forms create a contact form Because that's very easy to then we'll Go to the good stuff or how to add this Functionality on the website so I'll see You in a second all right so I've done a Few things to speed up the process of Demonstrating how this is going to work
With WP forms wpforms.com is a website If you want to check out the plugin Itself you can find all the details here There will be a link in the description Of this video as well now just to Clarify this functionality again which We're going to create not use existing Functionality will also be uh we'll be Using the premium version of WP forms It's not available in the free version Of WP forms so if you want to follow Along with WP forms then you can just Use the premium version or let's say if You decide to use WP forms or you're Sold on WP forms you'll need the premium Version to follow along this tutorial What I've done is already installed WP Forms on the site I've created a form Already this is the form I already Created a page and I submit a few Entries already similar to what I did in The previous demo example so if you want To see the entries just let's go on that We'll see the entries right here WP contact form you have three entries Already done now what we need to do to Display these entries is to use a code Snippet so what we'll be doing is adding Some custom functionality to WP forms For to give it the ability to display The form entries on the front end of the Website now you don't need to understand The code snippet you don't need to Understand what's going on you just need
To copy and paste the code snippet and The easiest way to do that is by using Another plugin which helps you manage Code Snippets because let's say for Example you take a code snippet you add It to some of your theme files or WordPress files and you mess up that Means the site goes down that's a risky Way right so if you use a plugin to Manage the code Snippets it's much more Safer and you can enable and disable Code Snippets so let's say uh you're Trying to find a solution that uh the Solution you're finding is a film a few Years ago and you're not sure if that's The right functionality you add it to Your site if it doesn't work you can Always shut it down or delete it right So that's the safe way so what we're Doing uh we'll be doing is adding Another plugin to the site which is Called WP code I'll go to plugin section I'll search for it it's a free plugin Which will help us add code snippets on The site so if we go to the add new Section of the plugin section inside the Website we'll see we can type in WP code Let us search for a second we'll find WP Code here This is the plugin just remember this Blue icon this is very easy to Understand or I say easy to notice let's Install the plugin and once this is done I'll also show you where to find the
Code snippet because of course if I show You on the screen it's not going to be Easy for you to copy it so we have a Blog post on our website where the code Snippet is already embedded so I'll link That in the description as well this is The blog post that I've already opened Up displaying WordPress form entries Using WP forms this is the code snippet Again this might be overwhelming don't Worry you don't need to understand it Just need to copy and paste it I'll show You how it works very simple to Understand so once the plugin is Installed and activated or it's these Installed let's activate the plugin and What I've done is just copied the entire Code snippet to notepad so I can copy And paste without having to switch tabs You can do the same thing of course you Can refer to the original code snippet On the website as well So WP code is now installed let's go to Code Snippets and we'll add a new code Snippet so I'll just go off screen I'll Copy the code snippet on my clipboard Already and what we need to do is add a New custom snippet so I'll click on the Add your custom snippet I can add a Title I can say WP forms Front end which will help me identify uh Why I created this code snippet I'll Switch this to PHP codes a bit because It's a PHP code snippet and I'll paste
The entire code snippet which is also Here I already have it in my clipboard So I'll go here I'll paste the entire Thing Done and this is all of this Functionality now just if you're I'd say Curious what we are doing is creating a Custom shortcode which we can utilize With WP forms that's what we've done and We'll be using a shortcode to display The form entries on the site and this is The code entry that we've done to add That uh shortcode on the site now if you Remember in formidable forms we also use The shortcut but the functionality was Already present here with this code Snippet we are adding that functionality All right so insert method a should be Auto insert shortcode run everywhere Don't change all of this you can add Tags to remember and see let's say you Have a lot of tags you can do this but Uh the important thing is to First Activate this and then save the snippet Right So I've pasted the code snippet just Switched it to PHP code snippet just Saved it and if I go to the code Snippets you will see that the code Snippet is added and activated just make Sure that it's done so WP forms front End which is what we did it's also Activated so now the code snippet Functionality is done now what we need
To do we need to go to create a new page And we'll use a custom shortcode which You can utilize to display the form Entries so first I'll create a new page On the site I'll create add new And I'll just name it WP forms front end Or WP formed entries that's easy Forms entries So now what is the short code that I Want to use on the site or shortcode I Can use to add this so if you go to the Code snippet it's actually displayed There already this is the section basic Usage this is the shortcode that we have To pick up now you might see that okay How will this shortcode help or this is The correct shortcode or should we just Copy and paste it directly on the side Yes and no what I'll do is just paste it On a notepad section of my screen and I'll demonstrate why This shortcode what it does is it Utilizes the wp forms uh forms ID to Understand which form you're referring To when you want to display the Front-end entries for example if I just Type in shortcode You'll see it doesn't have a unique Identifier to understand which form You're referring to and what you need to Do is replace this form ID with the Actual form or the ID of the form that You want to display the entries for so
Right now I'm going to delete this just For a second I'll go back to the site I'll create a New tab I'll go WP forms and I'll see all the Forms that I have created and of course I've created just the one and the firm's ID is 15. so this is what I need to do I Need to go back I need to paste the Shortcode and replace the form ID with 15. Now this shortcode is complete and now This will work on the page on this page Right so just to remind you what I did I Use the shortcode apart from the code Snippet I copied the shortcut from the Snippet itself this is the shortcode I Went to WP forms I found out the Shortcode ID that the W performs plugin Assigned to that particular form and I Use that replaced the form ID section Here with that particular number or the ID and now I'm going to publish this Page and I'm going to view it in a new Tab to see if it actually works so I'm Going to publish this post right now Publish And once it's done let's open it up in a New tab and let's see if the formalities Work And of course it works so WP warm Entries you have the name email comment A message and understand uh dummy Entries that I made now just as an
Example or just as a as a differentiator What you can understand is WP forms does Not allow you to customize the fields it Will display all the fields that are Coming from the form right I just filled In these entries and it's all showing up Right here it's I've definitely merging The first name and last name but common Idea is that you cannot customize or Customize the behavior to a large degree But with formidable forms you had Complete control over what it displayed When it's displayed even the order of Its displayed and you can even create Custom views if you understand HTML and You can customize it to the end degree So that's the basic difference and the Thing that I said in the beginning of The video where you should use a plugin Which supports this out of the box now You might understand why this is Important right and that's it for this Video uh simple waste two different ways I'd say to display form entries on your Website if you like this video make sure To hit the thumbs up subscribe to this Channel if you're interested in easy to Follow along WordPress tutorials of Course I'll catch you in the next video Very soon take care
