hey I'm Sam from Barn two and today we're going to learn how to set up contact form 7 to collect and display User submitted data on your site this is not quite as straightforward as you might expect so I've broken it down into three big Parts each with their own small steps in between we're going to go through everything step by step so follow along with me first we'll create a user submission form with the free contact form 7 plugin then we'll optionally create a custom post type for the data to be stored under and finally we'll connect the dots and add a table plugin that can display the User submitted data on the front end of our site which will be searchable and filterable keeping everything nice and organized so by the end of this video you'll have a form from contact form 7 and you'll have a table which looks something like this now let's go back and begin with part one step one is to install and activate contact form 7 on your website it's free so you can find it on wordpress.org using the link in the description or you can simply search for it in the WordPress plugin directory now being a free plugin you're going to be required to work a little harder to get the same result as if you had a different paid plugin where they do a lot of the work for you it's not too difficult but you have to understand that this plugin uses very specific syntax and you have to write things in a certain way for the plugin to know what you want it to do then before building the form I recommend you make a list of all the data points that you want your form to collect on my demo website I'm going to create a listing for members and in this case it will be for doctors and so for that I'm going to need the following Fields a picture or headshot for the doctor a name email country level of expertise and a short introduction so you can follow along and update or change as many fields as you like now let's dive in and actually build the form navigate to contact and add new and the form Builder will open navigate to the settings and name the form I named my form register as a doctor next you need to write the form Fields using the correct Syntax for the plugin to work properly I'm lazy and I used AI to help me with this it worked like a charm however there are plenty of great tutorials out there and the plugin also has a lot of info on their website about how to format the fields when the form is ready hit save and then also don't forget to enable the captcha protection to prevent Bots from submitting spam information now to see what we've made we need to actually display this form on our website now you can either add the form as a new page or add it to an existing page the choice is yours I created a new page and then on your contact form main page copy the shortcode and paste it in a shortcode block or text field in your page editor like so now that's it your post submission page should look something like this so we have a file entry for the photo we can update the text to make it more friendly for people who are unfamiliar with the form we have the name entry email country level of expertise and a short description now don't forget that before any data can be submitted to this form you need to go back into the form settings and switch it from draft mode into live mode then hit save changes and your form will be live and ready to collect data but this data is not going to get stored on your site that's where we need another plugin so with our form created it's time to consider where and how we're going to store this data there are a few options to choose from depending on what sort of data you're trying to collect for documents or any other type of resource you'll need the document Library Pro plugin this will create a documents post type which you can map to the contact form for e-commerce products make sure you've installed the free woocommerce plugin and this will create a Products Post type and for any other type of content you can store it as either posts Pages or create a separate custom post type trust me you don't want to store all your data as posts or Pages it will just clutter up your website so depending on your needs this next step may be optional but if you need to create a custom post type here's what you need to do download and install the free easy post types and Fields plugin from our website you should see an option called post types in the WordPress admin click there then add new add singular and plural labels all your User submitted data is going to be stored under the plural label I named my singular label as member and the plural one as members select the fields that you need for your custom post type we can also add new ones and edit these later the post type needs a field for each piece of information that you'll be collecting on the form now in our case the title content excerpt and featured image will be enough now we need to add some custom Fields because those do not exist in the typical post type for WordPress going to add new and in this case we need one for email the slug will be email and the type will just be text I also need to do this for the other form fields that I have like the country and experience level at this point you should see the custom post type on the left of the WordPress admin the next step is to link the contact form that you created in part one with the post type where everything is going to be stored to do this search for and install the free post my CF7 plugin on your website then go to contact contact forms and on the form Builder page navigate to the newly created form to post tab for the Post type select existing post and then select the post type that you created or the one that you want to use in our case this is members now you need to map the form fields to our custom Fields so that WordPress will know how to display the information later on under post title use the primary text field in my case this is the name of the person it's a little confusing but the placeholder text is actually what I need for the name now we can leave the post content empty or we can create a new form field to map to this one because we have an excerpt which is good for the excerpt then for the featured image that's going to be our main image and we can leave the slug and author empty and I'm going to add the extra form Fields like email country and expertise as these custom Fields here so I'm going to hit this plus button and I'm going to select a a field and now if you don't have these already preset you can type them in as EPT underscore member that's the singular form underscore and then whatever you need so in this case email which will map to the email and then we need to add some more so country we need this to be apt underscore member underscore country and the same thing with expertise now that's all of our form Fields mapped if we had extra fields we would add them here as custom Fields make sure you scroll to the bottom and save your form then I strongly recommend that you test the form before promoting it simply open the URL in Incognito add fake data and submit the form then come back to your WordPress dashboard and check for new entries by going to the custom post type which in our case today is members you should be able to see the data you just entered as a draft and once published the data can be displayed in the table format which we'll set up next if you don't see any data then double check your form is set to live using this button here and hitting save down at the bottom now finally to clearly display all of the submitted data in a table format let's move on to part three now at Barn 2 we offer three different plugins which will all display these form entries in a searchable table format but depending on the post type you'll need one of the different options post table Pro is for displaying posts pages and custom post types this is what we'll use today but as I mentioned if you want to collect documents use the document Library Pro plugin and for displaying woocommerce products we have the woocommerce product table all of which follow a similar set of steps to this tutorial so you can follow along from here to see how it's set up we've got plenty of other resources and videos to explain how to set up the other tables but in the end the process is very much the same being a premium plugin you'll need to visit our website and pick up a copy of your preferred plugin this will give you a zip file to download and a license key for Activation setup is straightforward and once you've entered your license key you you can start building a table by clicking on tables add new this is going to launch a table generator you can also see all of these same options if you're installing the plugin for the first time it'll be part of the setup wizard we're going to give our table a name so in this case I'm going to call it all doctors and what type of content do we want to display Well normally we could display posts but in this case we want to display our members these are the custom post type do we want it to be all members or just some specific ones let's continue with all and the columns this is where we're actually building our table so I wanted to have the image first so I'm going to have the image add that in and drag it up to the top then the title next which is the name of the uh doctor so I can even edit this and call it what I like then the content we didn't actually include this in our original form so I'm going to get rid of it the summary is the excerpt so we're going to keep that and the next thing we need would be the email which is a custom field so here you can see the column name this is just what appears at the top of the table but this is what actually matters it's the custom field name so that you just enter the slug which in this case is just email and that's very easy and the last thing was the expertise right so another custom field we're going to add and this one is going to be called expertise this is the same thing just with lowercase because it's the slug all right and there are the five things that we want in our table which we have collected using our form now I'm going to go next for filters we can set them up based on columns in the table and we don't want lazy load in this case it's certainly not necessary with so few entries and we're going to sort the members by their title but we can also sort them by the date that they were published so the most recent people will either come up first or you can switch it to last and that is our table created we can either copy this shortcode here or we can add it as a block in the Gutenberg editor on a page so let's go to a page I created this page earlier so I'm going to edit this one and here I can add a block for post table and I'm going to delete this block here because we don't need this one and I'm going to select all doctors this is our new table that we just set up and I can update the page and we will view page now here we have all of the doctors ones that I submitted earlier as well as the new one that I submitted just now and this is the short description email and level of expertise now I strongly recommend you go through the entire process again and test everything before making anything go live now the table also has additional options such as a search filter and you can certainly set this up in many more complex ways I just wanted to show you how to set up the data in the first place well done for making it to the end of this tutorial if it helped you out today I'd really appreciate your support on this channel by liking this video thanks so much and if you need a more complete setup tutorial for the Post table Pro plugin you can check out this video here and of course thanks for watching [Music] foreign