Save WordPress Form Entries – Contact Form 7 Database, Elementor DB, WPForms, Forminator

Contact Form 7 + Tablesome: Better than CFDB7 (Contact Form 7 DB)

Step 1: Install Contact Form 7 and Tablesome plugin in your WordPress Dashboard

Go to your WordPress Dashboard -> Plugins -> Add New

Search for Contact Form 7. You will see the Contact Form 7 plugin as shown below. Click Install and Activate the plugin.

To Install Tablesome, you need to go to the same Plugins section -> Add New.

Search for Tablesome. Install and Activate it. This free plugin helps you create datatables with multiple data formats in WordPress.

We’ll need to download and install the Tablesome Pro plugin to save contact form submissions to the database. This link will take you to our official Tablesome website where you can start the free trial for the Pro version.

Click the option “Start Free Trial”.

You must enter your login credentials and payment details on this page. After you’ve entered all of your information, review your order and click ‘Start Trial.’

Once done, you’ll receive an email with the plugin zip file and the license key. Simply download the plugin’s pro version from the provided link.

Once downloaded, go to site Dashboard → Plugins → Add New and upload the plugin file that you just downloaded. Activate the plugin using the License key that was sent to your email.

Step 2: Create a Contact Form and embed it  on your WordPress Page

Once the CF7 plugin is installed and activated, you will see a Menu called “Contact” in your WordPress dashboard. Select that option and click the “Contact Forms” option.

By default, Contact Form 7 will come with a sample form called “Contact form 1”. You can also see the shortcode generated for that form in the “Shortcodes” section.

Using that shortcode, we’ll embed this form on a WordPress page.

Just copy the shortcode and go to Pages → Add New. You can give the page title anything that you wish. Now paste the shortcode that you copied inside the block and publish it.

Now our Contact Form is ready. You can view the form in the front-end by just selecting the “View page” option.

Step 3: Create a new table that will store your form submissions data.

First, create a new table in which your form submissions data should be stored. 

Once you have installed and activated the Tablesome pro plugin, you will see a new menu called “Tablesome” in your dashboard. Go to Tablesome -> Create New Table to create a new table.

Give a suitable title for your table and add rows using the + symbol that you could see in the tables section.

You can add rows according to the number of fields in your contact form. If you are having 4 fields in your CF7 form, you can create 4 rows and have the column names that matches with the form fields (anything that you wish).

You can also set the format type of the columns that matches the form fields. For eg, if your form will return a number, you can set the Column format type as “Number”.

To do that, just click the column header and change the format type to “Number”.

Step 4: Configure your form submissions to be saved in Database (Tablesome tables)

Now let’s see how to configure where all the form submissions data will be automatically saved in our Tablesome tables. 

To save contact form submissions, Tablesome Pro has a simple but attractive Triggers and Actions interface.

In the left end of your table, you could see an Action interface with a trigger in it.

Triggers determine “when” an action is performed. Actions determine “what” action will be performed.

So you’re configuring it as : When “this” happens, do “this”.(Eg: When a form is submitted, a new row should be added in the table).

In this tutorial, we are going to set the trigger and action as “When a new form is submitted, add the content to the table as a new row”.

Trigger: When a new form is submitted 

Action: Add the content as a new row in the table

Let’s go ahead and create our first Trigger.

In the integrations tab, you will have three different forms to choose. In this example, we are using the Contact Form 7, so let’s choose that.

Once selected, you will see a new tab called “Type of actions” below. It’s “On Form Submit” here.

Once done, you will see a list of forms that you have created using the CF7 plugin. You can choose the ‘Form’ from which you want to collect the responses. The names of the forms will be listed below.

Now, let’s select the action.

Tablesome actions can be carried out within the plugin or on external sources like MailChimp. To save form submissions as a new row in the table, select ‘Tablesome’ and then ‘Add Row.’

Now, you will get an option to match columns to fields as shown below. The fields section will display all your form fields and the columns section will display all your table columns. 

Match the fields to columns and save the table.

That’s it! Now, all your form submissions will be saved in the table automatically. You can also add multiple actions for the same Trigger, allowing you to perform secondary actions like forwarding the data to Mailchimp, etc…

Before that, let’s verify if all our form submissions are getting stored in our table automatically.

Step 5: Submit the Form

To do that, let’s go to the page where we have embedded the form (In Step 2) in our pages section.

View the page in the front-end. Fill the data and submit the Form.

Step 6: Verify the Form Submission in our tables.

Once the form is submitted, go to the Tablesome -> All tables section. Edit or view the table on which you have configured the form submissions.

You should be able to see a new row created at the bottom with all the data that you submitted in the form.

Step 7: Display the Contact Form Entries on WordPress posts or pages.

Besides saving the form submissions, You can also display the form entries on the WordPress frontend on posts and pages.

To do this, just go to the Dashboard -> Tablesome -> All Tables section. In that you will find the table that you created in the previous steps and a shortcode generated for that particular table. Just copy the shortcode that is displayed there.

Go to Pages → Add New. You can give the page title anything that you wish. Paste the shortcode that you copied inside the block and publish it. Now, view the page on your front-end.

You could see all your form submissions are nicely organized in a table on this page. Your users can also make use of the search and sorting options provided by the Tablesome plugin.

Tablesome also allows you to customize your table display using our settings. We have options to change the background color, font, and font size of the table and much more. You can check it out in our table settings.

Tablesome also has advanced filters that may be used to filter table content. When you have hundreds of thousands of form entries, it will come in handy.

Finally, you could export the form entries in our tables as CSV and XLSX files.

Step 8: Save the Form Entries from WP Forms and Elementor forms.

Tablesome also supports WP Forms which is another popular WordPress Contact Form plugin and also the Elementor Forms which is a widget that comes with the Elementor Pro plugin.

All the previous steps will remain the same, except that you create your form using WP Forms or Elementor forms (from their widget section) and change the forms in the “On Form Submit” Trigger (that you could see in Step 4).

For WP Forms, we will select the WPForms integration in the “On Form Submit” trigger section.

For Elementor forms, we will select the Elementor Form integration in the “On Form Submit” trigger.

Apart from this, we will just follow the previous steps that will set up the same for both these forms also.

I hope this article gives you a clear idea on how to Save your Form submissions to our database and display them as tables in the front-end using our Tablesome Pro plugin.

If you have any questions or doubts, feel free to ask it in our comments section below.