User Generated Content From A Form (Transcription)
What’s up, everybody, it’s Dave here from Profitable Tools. Now, a couple of days ago, I released a video on FluentForms. It’s my favorite WordPress WP Gridbuilder. I talked about why I liked it so much, but there were two features that were more complex and I said they’d require a dedicated video. Well, a ton of people commented that I should make that video. So guess what? That’s what this is. So without further ado, let’s get into it.
Here’s my WordPress demo right now. I will say right out of the gate, you’re going to need the pro version of Fluent Forms to do everything I’m doing because these are specifically pro features. I’ll have the link in the description. Of course, that’ll be the referral link for the channel. All right. So here we go. We got user registration turned on and post creation turned on as well. To get to this screen, you’re going to go to FluentForms, Modula, and then you can find these three WordPress core modules right here by clicking this tab.
So get at least these two turned on. We’re not going to discuss landing pages, but I did mention that in the review posted a few days ago. So I’ll link to that down below. If you’re interested in checking out the landing page, it’s super cool feature. All right. So let’s get into it. We’re going to do is create a post creation. But you know what? I could just show you that feature, but it wouldn’t really emphasize the coolness factor of what you can do now.
Coolness with, like a big pair of glasses on. So what we’re actually going to do is install a couple of other free plug ins first and then we can really utilize this functionality. So to the WordPress repository, we go plug ins, add new. First one we’re going to do is custom post types. And I like this one right here is custom post type UI from Web Dev Studios. Let’s install this now. What a custom post type is going to do is allow you to have a separate category of post.
So right now we just have all of our posts going into the post category and it’ll be like your blog post. Right? But when we create a custom post type, we could have a post for anything we want. I’m going to set up a custom post type for reviews. So let’s go down to custom post type UI, add a post type, I’ll call it reviews, give it the plural label of reviews and the singular label of review done here.
What has additional labels? I like to just call this review with a capital R, but that’s more OCD. If I don’t do that, you can see it defaults down here to be lowercase R and it’ll show up on the left hand sidebar with that lowercase R, whereas everything else has a capitalized first letter. I’m also going to do a few of these other fields. You’re basically just going to fill in the placeholder text followed by the custom post type name.
So in this case I’ll do all reviews. Add you all right. You definitely don’t need to fill in all these. I would like to just do the first few because they’re the ones that actually tend to use. All right, then let’s hit add post it. All right. So I’ve got this custom post types setup over here called review. Now, what’s this going to do for us right now? Absolutely nothing. But my end goal is to have a custom post types so that users could submit user reviews of software deals.
Sound familiar? All right. Let’s head back to the WordPress repository and add a new plug in plug ins, add new. This time we’re going to add custom fields in advanced custom fields is what you want. If you have the pro version, go ahead, install that. But we don’t really need any of their features right now. I’m going to do the free one and activate. Oh, good. On the bottom here. It says Cut some fields and do a new field group.
Add new. I’m going to call this user review fields. Then I’ll add a new field right here and call this the rating for now. That’s all I really want is the rating. You don’t need to do anything else. I’m going to make this a number and I’ll set a minimum value to one and the maximum value to ten. Before you leave advanced custom fields, make sure you change the post type to display this field group to your newly set post type, which is review.
All right. There it is. Let’s go ahead and update this right now. We’re all set. All right. If you’re confused so far, just hang with me. This will all come together shortly. Now I’m going to go ahead and make a form over and Fluent Forms pro. Now, over in Fluent Forms Pro, what you’re going to do is add a new form. But be careful. You don’t actually want to click this, add a new form button that would be too obvious.
What we want to do is hit this little downward facing carrott right here and we’re to choose, create post form because we’re creating a form that can be turned into a post and let’s go ahead and choose which post type we like to use. And lo and behold, we could choose a poster, a page, the normal WordPress post types. But we have our new custom post types showing up here, reviews. Let’s choose that and it continue. All right.
It pops me into a blank form over and Fluent Forms. Now, I can’t use any of the templates, but that’s OK. I’m going to start from scratch on this one. So remember, I’m seeking to have users submit reviews on my site. Now, the first thing I’m going to do is ask for the name of the person leaving the review. So let’s grab this name field over here under general fields and we’ll drag it over as the first field in our form.
I’ll go ahead and click this button here to edit it. And let’s go ahead and say your name. I’m actually going to turn off the last name functionality here. I don’t really need that. And because I want them to also have an account on my website, I’m gonna go ahead and ask for their email address next. There’s an email address widget over here. I’ll just go and drag this underneath the first name. Now, I want the user review to have a headline.
So it’s really obvious and eye-catching whether I want to read the review or not. So to do this, I’m actually going to go up to. Here as post fields and drag in the post title as the headline. Now what I’m going to do is actually change this text instead of saying post title, I’m going to go ahead and change it to your review headline. All right. Remember, we created that custom field for a rating. Let’s go ahead and add that into our form.
Let’s do that as just a general feel down here and we’ll do a number. I’ll set the same minimum and maximum value that I did when I created the post hype. And let’s give this a good label. And finally, we want them to leave a full length review. So let’s go over here to post fields and we’ll make that the post content and I’ll put that right underneath the starfield. Let’s go ahead and give this a name as well.
Your review. All right. This is all looking really good. I’m gonna go ahead and save this form now in order to get this all set up. We actually have to map these fields to different fields in the post. So let’s go over here to where it says settings and integrations and let’s go down to post creation will add a new post feed and I’ll call this user review submission. Now, notice, I have the ability to set a submission as published right away as in draft mode, as in pending or private.
So if you wanted to go through in screen reviews before they go live, you know, certain places like to do that. So you’d be able to do that right here. All right. Down here, we can do our post fields mapping. We can do a post title. I’m going to map that to, of course, our field called your review headline post content. I’m going to map that to your review and post excerpt. I’m going to map that to your review as well.
All right. So down here, we have the ability to map advanced custom fields to FluentForms. So remember, at the beginning of the video, I installed advanced custom fields. I didn’t really tell you much about what we are doing. I just set up one custom field called user rating. Now, the idea is that when someone fills out a FluentForms to review some software, they could give that software a score. So you can get an idea of how much they liked.
It could be a scale of one to five stars. It could be thumbs up, thumbs down. You get the point however you decide you want to do your ratings. I do a scale of one through ten. So a user fills out that form. It maps to a custom field inside of a post, which is our custom post type two complex. And then that custom post type can display on the front end so that users can see it.
So this is a lot of trickery going on, a lot of complexity that you normally need to be a developer in order to set this all up with just a few simple and mostly free plug ins, were able to do some really cool stuff without any code at all. So down here where it says Advance Custom Field, I’m going to choose a rating. And then for my form field, I’m going to choose your score from one to ten. All right, let’s save this.
Now we’re almost done. The last thing we have to do is actually set up the user creation. So to do this, we’re going to go to marketing and CRM integrations. We’ll add a new integration. And the only one I have turned on right now is the user registration integration. Let’s give this thing a name. We’ll call it user review submission. Now we just have to map our field. So the only one that’s required is the email address.
Of course, I added that to my form and it shows up right here. You could add in the first name as well. I’m going to do that. I think that makes a lot of sense. That’s the author name for last name. I didn’t request one. You certainly could if you want. And for password, I won’t leave that blank and just have the password emailed to them down here. This is a very important section. This is what type of user that will be once their form is submitted by default.
It uses subscriber. That is a very safe choice. If you’re confused about user roles. I do have a dedicated video to WordPress user roles. For now. I’m going to leave it as subscriber and I recommend you do unless you know what you’re doing. You know better otherwise than down here. I’m going to turn on auto login and email notifications so that they get an email to notify them. They have to set up their password in order to be able to edit and view their posts.
All right. Let’s create this user registration fee. All right. We’re all set up. We got our form completed. But how do we test it and make sure that everything is working properly? Well, I’m inside of Elementor here. I’m using Elementor pro for most of the rest of this video. And if you don’t have that already, you will need it to do some of the more advanced features I’m going to show you so you can grab that in the link below.
That’ll be the referral link for this channel. All right. So I’m looking at my page set up with just a single video embedded. This is the FluentForms review from earlier last week. I’m going to go ahead and create a new section here just to kind of separate things right now. And here’s my new section. Let’s go ahead and add in our form for user review submissions on the left hand sidebar. I’m just going to type in fluent so I can find it quickly.
There is a FluentForms widget for Elementor. If you were not aware of that, you can drop that in right here and then I’m going to select the form. I don’t think I gave this a name is just post form nine. Yep. Here it is. Maybe I’ll add a headline in here to make it clear what this is. All right. There we go. We got a headline added in. Now, I’ll admit that I’ve given no effort to the style of this form or this page.
So, you know, if you want this to look good on the front end, definitely spend a little time working on design. I’m focused on functionality right now. So we’ve got this form all set up. And if I go ahead and fill it out, it should create both a new user as well as a new post. So let’s try that and then we’ll figure out how to display the posts on the front end so that people can actually read user reviews, which is, I assume, something that you’d want to do.
All right. So here’s our page with the forum on it. I’ve opened it up in an incognito window so that I’m not logged in when I fill out the form. Let’s go ahead and do that right now. All right. I’ve got the form filled in now. When I hit the submit button, I should have two things happen. I should have a user review created as a custom post in the back end. And I should also have a new user created with the email address mail at Dave’s with Dotcom.
Let’s see if that works. All right. Now, I did get a thank you message saying that we’ll get in touch with you shortly. I probably want to update that, but for now, that is just fine. I be easy to do in the back end. FluentForms. All right. Let’s go ahead and check that functionality in the back end here. Let’s go over to reviews. And there we go. Here is our new post. Let’s go ahead and check on it.
Edit this. Here is the content. The title is the correct headline, and my rating is displaying down here correctly. All right, great. So the next thing we want to do is get that displaying on the front end so users can read it. But let’s go ahead and check and see if my user account was created as well. Twitter users, all users. And sure enough, here we go. I’ve got my new user account set up.
So if I want to check that email address, I should have an email as to how to create my WordPress password. Now, there are two likely ways that people are going to want to display the posts created by their users right on the same page that they created the post as in this case where you’re generating reviews. Or you might want to have a dedicated post page created for it. So I’m going to show you how to do both right now.
Let’s go ahead and edit this page with Elementor. Then let’s scroll down below our form here. That’s just where I’m choosing to do it. I’m going to search for the post widget. Let’s go ahead and drag this in and out here. I can see a list of all of the recent WordPress posts, but I don’t want those. I simply want to have posts that were user generated. So how do we do that? Let’s scroll down to the bottom here where it says query and we’ll choose our reviews.
And here it is. Here is the review that I submitted. Now, it’s not very beautiful, but I can change that. It’s going to make this full content. I need to display comments. I’ll just display the data here. Of course, we can display multiple posts by default. We have six per page here. You could increase that as high as you like. And you can also have pagination so that people can easily go to the next set of reviews.
If you had dozens and dozens of reviews, it’s very easy to add that which can add in the numbers previous next or numbers and previous next buttons that would show up down below the post. Now, I’ve only got one here, so it’s going to be a little vanilla looking and I didn’t exactly give the most detailed review either. Of course, all of the Elementor styling still works. I can go up to style and I could maybe give this a border and add a little padding in.
Why don’t we add a title here as well? And of course, you could continue styling this until it looked exactly as you liked. Let’s go ahead and hit update and view this on the front end. All right. Here it is. And remember, this is just a post grid of recent posts. If I were to click it, it would actually open up this review in its own separate window where you could have people reply to it. Now, you can turn off the commenting if you’d like.
So how can we make this page look a little bit more stylish? In fact, you might not even want that previous step where you display the content in line with your form. So to do this, what we’re going to need to do is create a new single post template using Elementor Pro. All right, let’s get right to it. Back to the WordPress dashboard. We’ll go under Elementor team builder, add new choose a post template we’re in do single on her post type.
She’s review and we’ll give the template a name of user review. We’ll create the template. Now, you could of course, start from scratch here and design your page out exactly as you like it. But Elementor has a ton of templates and so for the sake of time, I’m just going to start with one of their templates. Beginner pages. I’ll choose this blog post and insert this. I’ll write our template is loaded. Now, what we need to do is connect it up to our custom post type.
This section up here is going to be my review title. Let’s click on that. And then instead of using this title right here, I’m going to click this dynamic takes option. Well, choose post title. If you would ask for someone’s Twitter handle in your form, you could actually link it up to you. Whatever social media you want, you could go ahead and choose the custom tag here. Maybe it’s a advanced custom field. You could link that right up because I didn’t do that.
I’m just going to go ahead and get rid of this element. In fact, I don’t need this text element here either. So let’s go ahead and remove that and we’ll get rid of this author photo and this author name here. Now, of course, you probably want to display these things, but for the sake of this video, I’m not going to do that. Now, what I am going to do is use this TextField over here to display the user ratings.
Let’s go ahead and click on the pencil icon over here and we’ll go over to the dynamic tags and we’ll slide all the way down until we see the advanced custom fields. And here’s where it gets a little bit tricky. If you’ve never used advanced custom fields inside of Elementor is you actually click on this again, it doesn’t look like you would. There’s no kind of user prompting that you would click right there and then we’ll go under key and choose our rating.
You’d see ten shows up here, but that’s not very helpful. So let’s go to Advanced and afterwards we’ll do ten. Now I can see I’ve got a ten out of ten rating at least gives me some context before I’ll say rating. All right. Now it says rating ten out of ten. Let’s center this up. We’ll change the weight and get rid of these other fields. I’m not going to need them now if you ask someone to upload.
Image in their form, of course, you can make images dynamic as well. Same process, you would just click on the pencil icon, go over here where it says dynamic tags, and then you can choose the advanced custom field where they uploaded your image to you. There’s a file upload option right inside of FluentForms. Now, what I do need is the actual post content. So for that, I’m just going to choose this widget over here that says post content drag and drop it right in.
And it says, hey, mom, look, I’m on the Internet. All right, great. So let’s go ahead and publish this. We will display it under all reviews. Let’s save and close. Now, let’s test it out again by entering a second review and I’ll add some lorem ipsum this time to give us a little bit more data to work with. And I’ll submit the form. All right. I get the message that my form was received.
Let’s go and refresh this page. And here is the user review. Now, of course, you could go ahead and customize this further being to you that I can display quite a long review right on this page. And if I click on it, it fills in our template that we set up before. Again, I’m not saying this looks good, but you get the idea. The customization is there. I didn’t have to create an all new Elementor Aidaform for this to be populated with a specific design.
We can check the other one as well. And there we go. We have that same template being filled in by that form. All right. So that’s going to do it. I hope you can see that this is a super powerful feature. You no longer require both a designer and a developer every time you want to do something a little bit more complex on your WordPress website. Now, if you have any questions that definitely feel free to hit me up in the comments down below.
But I will admit I am not a developer and you can probably stump me on this one. But you know who will know? The answer is the Facebook group. So head on over to the Facebook group. If you have questions about this, I am sure someone over there, it will be able to help you out. And that’s going to do it for this video. I’ll see you in the next review.
