Just another way to collect form data.
Create a post and insert the “Form” widget. Once you do that, edit the form to your heart’s desire. Once you’re happy, select the Content section of the widget. This is where you created your form fields. Make sure that each form field has a label. If you don’t want form field labels, hide them with CSS, but make sure that you still have them. Now take each one of these labels and put them into the first row of a Google Sheet. Name your sheet something recognizable, name your main tab something relevant and return to WordPress.
There’s lots of ways to capture form submissions, but my preferred method is simple and free, so I’ll share it with you here. I’m using a WordPress theme based on Elementor, so that’s what I’m going to provide this example on. If you’re not using Elementor, the concept is still the same, but your exact implementation will be slightly different.
First, Make Your Form
Create a post and insert the “Form” widget. Once you do that, edit the form to your heart’s desire. Once you’re happy, select the Content section of the widget. This is where you created your form fields. Make sure that each form field has a label. If you don’t want form field labels, hide them with CSS, but make sure that you still have them. Now take each one of these labels and put them into the first row of a Google Sheet. Name your sheet something recognizable, name your main tab something relevant and return to WordPress.
In the Content tab of the form widget (while editing in Elementor), select the Settings section. Under “Add Action” select the empty field. You’ll see several options, with one of them being “Webhook.” Select this option. You’ll see a new section named “Webhook” appear. Leave it blank for now. You’ll need a link (webhook) that we need to create elsewhere first.
Create Your Webhook
There are several services you can use for this part, such as Zapier, but most cost money for this particular function. The service I prefer is automate.io because cause the price is right, it works and everything about it is very intuitive (I’m in no way affiliated with them and they do not pay me).
Setup your free account using the gmail account you have your Google Sheet you created earlier in.
Next, select “Create a Bot” in the upper right hand side of the screen. Select “Webhook” from your options presented. You’ll see a new field that says “Select the Trigger Event.” There’s only one option—”Incoming Hook.” Select it.
A new panel will expand on the right. You need to define the action your webhook will take. In this case, find and select the “Google Sheets” widget.
A new browser window will appear where you will name your app and authorize automate.io to access it.
After authorizing, the page should update, showing your app name on the right side of the page. (If it doesn’t refresh, authorize it again. I had to do it twice for this demo)
Add your Action. Select “Add Row”—not the older version.
Select the spreadsheet dropdown and select your form by the name you gave it earlier.
Select your tab by the name you gave it (Sheet1 if you did not name it). You’ll see all the form labels appear.
Over on the left hand side of the screen, select “Setup Webhook.” Select it. This will give the url you need to plug into your WordPress widget. Copy the url into your WordPress widget and save your form. Now go to your actual live form and submit something in each field. automate.io will recognize your submission and put the labels from your fields on the screen under Output fields.
Drag the fields from the left side of the screen to the matching fields on the right.
