Automate your sales workflow connecting your WordPress Form with Crmble

+ Elementor form widget

If you are reading this you are probably already running a WordPress site that uses some sort of form solutions, whether to generate leads or to give support to your visitors. Or maybe you are thinking about using WordPress forms in the near future. Whatever the case is, this post is going to walk you through the process of connecting two of the most commonly used form solutions for WordPress with Crmble so you can stay on top of all the messages you receive and increase your conversion rate and decrease your response time. If this sounds helpful to you, keep on reading…
Being able to automatically create a new Crmble card in your Trello board for every new form submission opens up a whole new and more productive way to stay on top of your form entries. With Crmble you can design a sales funnel with stages to convert every form submission to a sale, or you can use it as your recruitment system to make sure all your job applicants are guided through the process you’ve designed. There are many different use cases this workflow applies to and setting this up is not that difficult if you have the pieces needed in place.
Soon Crmble will have an out of the box solution to WordPress for the form solution of choice, but for now we think that this guide will help you get the job done while keeping the cost as low as possible and not compromising ease and reliability.
There are many web form plugins available for WordPress, but there are two that stand out from the crowd. Contact Form 7 and WPForms. Apart from being the most used form solution for WordPress, they have another important thing in common: both can be connected to a Google Sheet/G Sheet thanks to the Google Sheet Connector plug-in (29$/year for 1 site) and since the Google Form toppings is actually a Google Spreadsheet integration (technically speaking), the process of connecting both is pretty straightforward.
This time we are going to focus on the process of connecting a WPFrom, but while Contact Form 7 uses the same G Sheet connector plugin, the instructions detailed in here should serve anyone who uses Form 7. The WPForms plugin and Forms 7 are two of the most used WordPress Form solutions out there. The prices range from 70$/Year for 1 Site with unlimited forms and entries to up to 600$/year with unlimited possibilities, but if all you need is 1 form that can be designed and installed with no code writing skills, the basic plan is more than enough and absolutely worth it. If you time it right, you can benefit from extra promotions or flash sales and get a whopping up to 60% discount. There may even be some sort of discount running while you’re reading this post, so feel free to jump over to WPForms prizes page to check it out.
Without further ado, let’s get started.

The goal

Setup a professional looking and reliable form that works seamlessly on our WordPress site, collect all submissions in a Google Sheet that will be our form submission database and ultimately automatically create a new card in our Crmble-Trello board with all the Crmble fields matching that of our form fields. And all this without writing a single line of code while keeping the cost as low as possible. Mission impossible? Not at all. Here’s how to do it.

What we need:

The first thing we need to take into consideration is that our WPForm, the spreadsheet and our Crmble board, must all have the same fields (and columns, for the spreadsheet) in order to match everything up consistently.
In this example we are going to set up a form with the following three fields:
  • Name
  • Email
  • Budget
WPForm configuration screen
This is what our Contact Form example looks like in edit mode
Now we need to make sure that our spreadsheet has the same three columns in place, one for every form field, and we need to make sure that we also have a Crmble field in place for each form field as well.
Google Sheet structure
This is our G Sheet with one column for every form field.
Crmble comes with Name and Email fields by default, so for this example we just need to create one extra Numeric type of field that we will call “Budget”. The benefit of using a Numeric type of field in this case is that we can select that field in our Dashboard report to get a report with the sum of all the budgets we’ve got from our form entries.
Watch our Crmble dashboard walk-through video to learn more on how Crmble fields and reports work together.
Crmble Fields used with your Form integration
This is what our Crmble fields settings looks like with all four Crmble fields we need
Once you’ve got all these pieces in place, the super “Wordpress Form Crmble connection” is only three steps away:

The 3 steps setup

1) Connecting your WPForm to the Google Sheet connector plugin

Now that we created our WPForm in WordPress, let’s install the G Sheet connector plugin. The easiest way is to go to  the plugins section in WordPress and click on the upper left “add new” button. Once there you can search for the plugin we need by entering the keywords  “WPForm Google Sheet” in the search field.
The GSheet Connector plugin will show up among others. Click on install and you can activate the plugin right after the install process has been completed. Now you’ll find the Google Sheet Connector settings as a new option inside the WPForm menu item. First thing you’ll be promoted to do is allow the plugin to access your Google drive where your spreadsheets are stored. The process is quite simple. Just follow the instructions on screen and you are all set up in a minute.

2) Connecting the Google Sheet we’ve setup

Google Sheet connector radon menu item inside WPForm
Inside WPForms menu you’ll find the new menu option to configure the Google Sheet connector.
Once authorized, you can follow to the next tab where you will select the WPForm you want to connect to your Google Sheet.
Just pick the recently created form of our example or any from you already have and look for the Google Sheet details to fill out the form. You have a link to the instruction on where to find each value needed.

Here is a small breakdown of Google sheet URL’s to get the info we are asked for:

Google Sheet example URL

https://docs.google.com/spreadsheets/d/1CxZexDFlxHiUyfb4xbAcMFXvccpiSAftdrWf0pmmA1k/edit#gid=0

Standard first part:
https://docs.google.com/spreadsheets/d/

Sheet Unique ID:
1CxZexDFlxHiUyfb4xbAcMFXvccpiSAftdrWf0pmmA1k

Worksheet ID:
/edit#gid=0

Time for a test! Just publish your newly created form using the shortcode available in the WPForms overview section in the corresponding section of your page of choice. WPForm offers Elementor widgets as well in case you use this as your primary page builder in WP. After submitting the form you should see that a new row has been created in your spreadsheet. From now on for every new entry a new row will be created. Now you’re ready to connect Crmble.

3) Connecting Crmble to the Google Sheet

Now all we need to do is head over to our Crmble board and open Crmble. In the main menu toggle the Toppings menu item and choose Google Form. There you’ll have to basically go through the same type of process as you did for connecting the G Sheet to your WPForm inside WordPress, but in this case the process is even easier and more user friendly.
  1. From the Google Forms topping section, sign in with the Google account that owns the G Sheet. Follow the on screen authorization process to grant Crmble access to your spreadsheets.
  2. Your connected Google Account will show up. Now click on the upper right green “+ Add new Google Form” button. Fill out the dropdown fields to select the desired G Sheet.
  3. One last step to match your G Sheet columns with your Crmble Fields and you are done. Click on the little black arrows next to each Name, Email and Budget field to link each one to its corresponding G Sheet column name.
Crmble Google Form Topping
Once done, finish clicking the Update button and you're good to go. Now for every form entry you’ll see a new card show up in your board.

Time for a test! Fill out a new form in your WordPress page and check your default Crmble list for new entries.

Crmble automatically assigns a creation date for every new form entry and also assigns the “Google form” source. This way you can check in reports how many submissions you’ve received in a specific time span thanks to the TimeLine chart and the Bars Chart (when you select “Source”).
To reactivate Google Sheet based automations due to any action mentioned above. Please delete the integration that stopped working in Crmble’s Google Form Topping and reconnect again following the form field and Crmble field matching process. If the problem remains after that, please contact our support team via the chat bubble you’ll find in the lower right corner at crmble.com or by opening Crmble on your Trello board.
The same applies to Google Sheet based automations with Zapier.
Do not delete rows in your spreadsheet while your Zap is on, and don’t add rows in the middle of data your Zap has already recognized. This can cause errors with your Zap. If you need to delete any rows, ensure the Zap is turned off as you make your amendments. Once you’ve finished deleting your rows, you can then turn your Zap back on.

Connecting the Elementor form widget with Crmble

In this last bit of our blog post we are going to focus on Elementor. Even though it’s only been around for a couple of years, Elementor has become the most used page builder for WordPress. With a staggering 5% of all websites in the world built with Elementor, it’s no wonder their out of the box form widget is also a widely used form solution for WordPress. We use Elementor at Crmble and we love the way it works and how they are constantly adding new features and improving with every new update. If you use WordPress but haven’t heard of Elementor before, we encourage you to visit their recently published facts and stats page that will walk you through the milestones they’ve achieved in these 5 years. Congratulations Elementor!

Before we start you need to know that Elementor’s form widget is only available on its Pro plan (starting at $49 per year for 1 site) and while Crmble doesn’t offer a specific Topping to connect Elementor forms out of the box, we can take advantage of Crmble’s integration with Zapier.
For those who have never heard about Zapier, in a nutshell we can define it as a great service that lets you connect apps to automate workflows without writing a single line of code. It is based on a very simple trigger/action concept. In this case the trigger would be a submitted form and the action would be a new Crmble card creation. Another advantage worth mentioning while using Zapier, is that you are not only limited to one action like card creations, but you’ll also be able to extend your workflow adding more actions like automatic replies or adding new subscribers to your Mailchimp account, just to mention a few.

While Zapier is not free, they offer a free plan that covers 100 tasks/month to check it out. In our example though we will need a paid plan since we need to use webhooks (more about webhooks in a minute). Check out Zapier’s price plans here starting as low as $19.99/month billed annually for 750 tasks a month including multi step automations and with up to 3 premium apps integrations and webhooks.

So, what the heck are webhooks, you might ask?

Well, while webhooks might sound a bit intimidating at first and only reserved to developers, the truth is that Zapier makes it very easy to set one up to act as the trigger of our whole automation.

Webhooks are basically notifiers that will let you know whenever something happens in an app. In our case we will create a webhook in Zapier. We’ll put it in Elementor’s form widget to get a notification whenever a new form has been submitted to automatically create a card with Crmble fields filled out with the data submitted. Cool! Let’s see how we achieve this in detail step by step.

Make a new Zap

First thing we’ll need to do is to access our Zapier account to create a new automation. (automations are called “Zap’s”).
As soon as zapier.com loads, you’ll see a button at the left top corner called “MAKE A ZAP”. Let’s go!

Setup a Zapier webhook Trigger

Give your new Zap a recognizable name.
Search for Webhook and you’ll see the “Webhook by Zapier” as the first option.

Once selected you’ll get a couple of options. In this case we need to select the Catch Hook type one. By doing so, Zapier will create a so-called end point that will be entered later in Elementor’s Form widget.

Click continue and Zapier will show us the url of our newly created webhook. You can leave the rest as is and go on and copy the Webhook URL and click continue.

Configure the webhook trigger in Elementor form Widget

Before we go any further with Zapier it’s best to head over to your WordPress administration panel and configure your webhook in Elementor’s form widget to be able to test it with Zapier. Before we can add the webhook though, we need to tell our form widget that we want to actually use Webhooks as an “Action After Submit”. To do so, open the page where you are using Elementor’s form widget and select it there. Then click the “Actions After Submit” section and click the plus to add the “Webhook” action.

At this point you should see a new section in your widget settings called “Webhook” where you can now paste the Webhook url we just copied from Zapier.

Now save your configuration and visit your live form page and submit a quick example that will come in handy to finish our Zap configuration.

And now back to Zapier to quickly test out our webhook.

Open the “Test trigger” and hit that “Test trigger” button. If everything went fine you should see a “We found a request” message followed by the details the webhook has gathered from our previous test form.Now time for some action!

Add an action to create a new Crmble card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Once you’ve selected Crmble Zapier will ask you to define the action. Click on the action selection button and pick the only one available at the moment called “Create a Trello Crmble card” and click continue.

Connect Crmble using the Zapier Topping token

Now it’s time to “Sign in to Crmble”.

Once you click on the button Zapier will ask you to enter an API key (also known as token).

Go back to your Trello board where Crmble is installed and open the Zapier Topping you find in Crmble’s main menu Toppings section. Once there, click on the “Generate Board Api Token” button and copy the long string and paste it where you left it at Zapier.

Click “Yes, continue” and the Crmble connection is ready!
Next we will setup the action. We will basically tell Zapier which field of our form should be matched with each of our Crmble fields. Zapier will show you every Crmble field available and let you pick the form field you would like to match it with. In our example we only have three fields to match. Name, Email and Message. Match your field accordingly one by one.
Once all our form fields have been matched with our Crmble fields, we can click continue and test our Zap out before turning it “ON”.If everything worked, you should get a new card in the “New leads” default list in your Crmble board with the last submitted form.

Turn your Zap “ON”

Congratulations, You made it! From now on every submitted form on your page will result in a new card ready for you or your team to work on in the way you’ve designed your sales funnel.

Share it!

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Thanks
for signing up!

Check your inbox and confirm your Email address to make sure you don’t miss any future Crmble updates!