Search
Close this search box.

Alberto Estévez

Automate your sales workflow connecting your WordPress Form with Crmble

+ Elementor form widget

Blog post updated on July 8th 2022

Automating lead card creation in your Trello board by connecting your form with Crmble opens up a whole new and more productive way to stay on top of your leads. With Crmble you can design a sales funnel with stages to follow up on every form entry to boost your conversion rate. You can also use it as your recruitment or your after-sales or support ticketing system. There are many different use cases that apply to this workflow and setting everything up is not that difficult.

If you already know how to connect your form or lead generation service with Google Spreadsheet or you use Google Forms, we recommend you to read our Google Forms & Sheets Topping help page.

Choose your WP Form plugin

There are many form plugins available for WordPress, but there are two that stand out from the rest as the most used ones, Contact Form 7 and WPForms.

Since the Google Form Topping actually connects to a Google Spreadsheet to check for new row entries, as long as your form service of choice is able to write entries on a Google Sheet, Crmble can create a new lead card on every form submission to follow up on with ease. In the case of WPForms writing into a Google Spreadsheet is available out of the box. Contact Form 7 on the other hand relies on an extra plugin called Google Sheet Connector plug-in (29$/year for 1 site).

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 here should serve anyone who uses Contact Form 7. WPForms and CF 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 up to a whopping 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

Set up a professional-looking and reliable form that works seamlessly on your WordPress site and collects all submissions in a Google Sheet (that will be our form submission database). Then automate lead card creation on your Crmble powered Trello board. All 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 for every form field we need to have a  spreadsheet column and for every column, we need to make sure we have created its corresponding contact or lead field in Crmble. This way the data we collect in our form will find its place in Crmble. As a result, we will build a consistent contact and lead cards database to follow up on and generate reports.

Creating your WPForm

To keep it simple and get the idea, 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.

Preparing your Crmble Fields

Contact Fields: Crmble comes with Name and Email fields by default in the Contact Fields section so nothing extra to configure here.

This is the contact set of field in Crmble Settings/Crmble Fields

Lead Fields: For the budget, you can create a currency field or a number field. We advise creating this field in the lead set as this detail is not something that defines the contact but rather applies to what the card represents. Remember that with Crmble you can link your contacts to multiple cards on different boards of your Crmble Team. Each board can be used for different use cases and their cards can represent totally different tasks. to manage. Also, by using a currency or number type of field we will be able to get insights into the total amount of budget we are dealing with, in the Dashboard section.

Watch our Crmble dashboard walk-through video to learn more about Crmble fields and reports working together.

Create a Currency field in the lead set in Crmble Settings/Crmble Fields
Once you’ve got all these pieces in place, the super “Wordpress Form Crmble connection” is only three steps away:

Connecting everything together

  1. Connecting your WPForm to the Google Sheet connector plugin
  2. Connecting the Google Sheet we’ve setup
  3. Connecting Crmble to the Google Sheet
 
Let’s see now how this works in detail.

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.

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.
Google Sheet conector setup
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.

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 map 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 map them to its corresponding spreadsheet column name.
Connect your Google Sheet with Crmble

Select a list to add your leads be default

Default new leads list

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.
  1. Make a new Zap
  2. Setup a Zapier webhook trigger
  3. Configure the webhook trigger in Elementor form Widget
  4. Add an action to create a new Crmble card
  5. Connect Crmble using the Zapier Topping token
  6. Test and Turn Zap “ON”

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!

Make a Zap

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.
Zapier Webhook trigger

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.

Catch Hook Setup

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.

Setup Catch Hook 2

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.
Activate and select Webhook action after submit for Elementor's form widget

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.

Configure your webhook in Elementor's form widget

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.

Zapier test trigger
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.
Search Crmble action in Zapier

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.

Edit Zapier's Crmble creation card action

Connect Crmble using the Zapier Topping token

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

Sign in to Crmble with Zapier
Once you click on the button Zapier will ask you to enter an API key (also known as token).
Crmble board Api Key

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.

Get your Crmble API Token
Click “Yes, continue” and the Crmble connection is ready!
Create a Crmble card
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.
Match form fields with Crmble fields
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”

If everything worked in the previous step,  now it’s time to switch your Zap “ON” using the switch next to your Zap.

Turn you zap "On"

Congratulations, you made it! From now on every submitted form on your page will result in a new lead card ready for you and your team to follow up on.

Share it!

Stay in Touch

Subscribe to get updates on Crmble!

Facebook-f Twitter Instagram
Copyright © 2024 Apps Square SL All rights reserved.