Increase Leads & Conversions With a 2-Step Opt-in Funnel Using WSForm & Bricks Builder
Vložit
- čas přidán 1. 11. 2023
- WSForm remains the undisputed heavyweight champion of WordPress forms plugins, and it's been too long since I've done a WSForm tutorial.
So, I'm going to do one today, and I'll use the opportunity to teach you a tactic I often use to increase conversions: a 2-step opt-in process.
Get WSForm: geni.us/1sRNnyX
The 2-step process leverages the concept of "micro-conversions" and the psychological benefit of forward momentum to increase conversions. It's a little more technical to implement, but once you know how to do it, it's quite easy!
In this video, you'll learn the most efficient method to implement this tactic with WSForm and Bricks, including setting conditional logic, redirections, dynamic data, and URL parameters.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
I just watched the entire video and i have to say! WE NEED MORE VIDEOS LIKE THIS! so good!!!
Love this 2-Step Opt-in form, thank you Kevin 👍
Great video Kevin, practical as always.
GREAT video! have been using WS Form a lot but learned some new stuff here - thanks!
Wonderful tutorial! There is so much to learn - Kevin is a great teacher! I also recommend his Inner Circle. Thank you!!
Really cool video Kevin.
Been on WS Form for a lot of this year and it's amazing. It's a hidden gem!!
It really is!
Awsome video as always.
I watched another video where the dev created a rental calculator, booking and payment all from a single WS Form. It included Google Maps fields to calculate the distance between pickup and drop off, applied logic, calculated the price, and then took the payment with Stripe.. Allon the one form !!
This is one exceptional form builder.
Yep!
Can you share the link for that video ?
Somehow, I missed the video when it first came out. I'm glad I finally watched. As a funnel & WS Forms beginner, this was pure gold.
Another one laden with gold nuggets. I have been using WSForm for nearly a year and still havent scratched the surface of all of the nuances. Thanks and cant wait for more.
Even when you can do already almost all things shown in the video, that last 10% of missing knowledge is so valuable, takes you to the next level
Great video, very useful. Thanks Kevin!!
Incredible tutorial 🤯
Great lesson!
Really awsome stuff. Works really smooth. Thx from Brazil 🏖
You are just amazing Kevin. Your information goes 1.2 Million Gold nuggets per second. I can never skip a single second in your video. Much love
🙏
Thanks for your always helpful tutorials! I actually paid a freelancer to handle the pre-selection fields on certain pages with a lot of complex custom codes. LOL, it really wasn't needed since, as you demonstrated, WS Form can handle it with the hidden page ID field. WS Form is more powerful than I realized, and now I'm truly seeing what it can do! :D
Thanks for sharing!
As always, very Nicely done and just a great lesson all the way around!
Anyone serious about Bricks, web design, and building needs to be a member of your Inner Circle, the value you provide people like us is immeasurable (Thank You!)
I Look forward to more WSform lessons while inside and outside The Circle.
Thanks for that!
I only recently learned about the bricks url parameter dynamic data and Love it in combination with wsform. It is so powerful - im currently building a quiz with it that shows a dynamic bar chart at the end for the score page.
Would love to see more tutorials and nuggets for wsform.
Will use a lot more sections now.
oh my that sounds so interesting! a quiz! would love to know the thought proces!
@@sophiemulders its on hold right now, cause the Content is not ready yet. I can share it in the inner circle when it’s finished. 🙂
@@philipplunch8526 yes please!!!
I've been using WS Form for roughly two years and love it. It's a game changer in correlation with Wordpress, Bricks and Automatic CSS. Until your video I thought my forms were doing everything possible in terms of conditional logic, field mapping, re-directs etc. You just opened my eyes to a world of new possibilities. I hope you can present more new use-case scenarios with WS Form and Bricks.
Quick question. I'm trying to map an image upload from WS Form/ Google Drive/ Google Sheets; my objective is to organize each image in a Drive Folder, then add the image URL to the Google Sheet and then display the image on my AppSheet CRM. I've had some issues and curious if you have a process you can share.
Cheers to countless nights of revising all of my forms. ; )
Hmm, haven’t done that before, but ws form support is stellar. I’m sure mark can help you.
Thanks for this! Nice way to do it and removes the clutter if having a newsletter form in the footer. Any ideas how you can add spam protection? I tried adding a condition to disable section one - but it does not disable the Turnstile. Would be amazing to learn how to hook up to mailchimp too (but I think thats outside your remit)
Great tutorial as always. From where the WS Form styler element is coming from? Is it part of Bricks' default or ACSS? Is such an element available for Gravity Forms as well?
ACSS. WS and Fluent right now.
Video idea: How to properly do section dividers like tilt, curve etc.. and those should work with section background images and properly compensate the lost padding due to the shape. Using variables and calc makes it easier but getting the bg image to work.. well. Think multiple sections using bg images that got curved top and bottoms
How can you combine the 2 different columns for phone numbers? Wonder if that's possible.
Great video! 👌👌 I was just wondering if you could combine/update the submissions based on whether, in this case, the number is the same. So if the number already exists in the database, it just updates the rest of the information instead of creating a duplicate. Is that possible?
Not sure, something to investigate!
At least I would also prefill the first phone field in step 2 also with the query paramater value. Not sure if there's an way to not save the second field inside the UI
You don't need the field in the UI if you dont' want it. I mentioned I like to display it to let people know they already filled it out, but it's up to you whether to include it or not. Either way it's not a big deal. In a CRM, the records get combined. Theyr'e only separate records in WSForm.@@56k-web
Can you build this 2-step forms natively inside Bricks builder without a plugin?
I don’t know. I don’t use page builder forms because they’re too limited. I use WS Form for everything.
I was wondering about step 1. If I out in my number and I then don't finish with step 2, what privacy issues can come up? I mean I could ask why you saved my number when I did not complete the form. Just being an ambulance chaser.
They're submitting a form regardless. They're sending their info. It's outlined in your privacy policy. Never been an issue.
First of all, thank you for this clear explanation!
2 questions:
1. Why is wsforms better than gravity? I now use gravity but am also always looking at wsforms because of acss, but I am curious if there are more advantages of wsforms.
2. Why not update the telephone number already entered in the database in step 2? Or is this not possible with wsform? For example, if the number was entered in step 1, fill in the remainder
hard to explain why WS over GF in a youtube comment. Would probably take a multi-thousand word write-up.
@@Gearycothat alone is a very good reasen to look at WS :)
what do you think of fluent forms? Is that chumpville compared to this? What do you you use for a wordpress crm plugin?
Fluent is okay but WSForm is better
Can you do the WS Form tutorial on creating a new user registration form with the email address validation? I cannot seem to succeed... thx
Hi @gearyco , Is it possible to use this method on a modal popup form rather than on a new page. I.e, there is an email field on homepage, you click it, a modal pops up with the full form and the email is auto inserted?
With JS probably. I haven’t tried.
Is there a way to post the variables in the form, so they do not appear in the url as variables?
Maybe! Ping their support. They are super helpful.
Hey Kevin, can/should I skip WSForm and just use ConvertKit?
No
Can it be built this 2-step forms inside fluent form plugin?
I don’t use fluent so I’m not sure. Probably.
why do you choose to do it on multiple pages instead of using a multistep form on a single page? is there a idea behind it? or is multistep not possible with this form plugin?
For one it makes split testing way easier. I also mentioned the ability to send people to either flow vs forcing a single flow. Also the page layout change is important when the next step has many fields.
There’s a lot of reasons…
Also, this was one tiny example. I wanted to teach how to carry data from page to page because it’s an essential skill. What I teach is designed to work beyond the single concept I’m using as an example.
@@Gearyco yes very nice! Also a great that i now have seen wsform. I have been looking for a good form plugin. Just wondered because i do it on a multistep -> if that is chump like behavior 😊
For most use cases multi-step doesn't work as well because multi-step usually involves tabs. The microconversion doesn't work as well when people can see the additional steps.@@sophiemulders
You can create an A + B testing. Will people do step 1 + step 2 or just step 2. I do the same concept for a client, an accountant, who needs more info, we have a two step, 4 simple fields (soft lead) then/or the 14 field with more specific questions (hard lead) .. Kevin created a really simple example but its valuable content
Thanks. One request though. Is it an option to show what exactly it is that we're creating at the beginning of the video?
That means I have to build every concept twice.
@@Gearyco why, you simply add it to the beginning after you build it 😇
@@Joe-ss9cr okay I’ll see
@@Gearyco tnx, it's really useful to have a clear picture what the end goal is. And tnx for this video it was really helpfull.
@@Gearyco thru the magic of video editing! Tho I feel that you record it “live” in a sense and later post the resulting video. Subbed to the inner circle!
I got a question about height, what you think about using vh in height?
Only makes sense in rare circumstances.
i see, when do we need to use vh?@@Gearyco
Make a script that auto deletes the first submission if the same phone number is in the submission after
I know there’s more than one way to skin a cat…. But why not just have the initial PHONE field auto populate the main PHONE field and set initial phone field to not be saved in the backend.
Then add another button for your Step 1 that saves the form, hence phone number saved.
Then on step 2 section, phone should auto populate (no url field needed) and you have also saved the phone. Then crack on and have the second button do the actual form save and entry save (update) etc…
Then, you can also automate an email saying “seems you didn’t finish signing up” with a link back to finish the process if they had only hit the first Sign Me Up (save) button.
Not sure what you’re saying or why it’s better. How can the “first form field autopopulate the main form field?”
@@Gearyco When you fill in the phone in step 1, it can automatically set fill in the phone in step 2. Then you can set step 1 phone to never save - to save you from having duplicate phone fields.
To fill the step 2 phone with an action - as I type in step 1 phone, fill in step 2 phone with this information.
Then I'd have a button in step 1 that also says "sign me up" but set that to only SAVE the form.
Then, when you load the page on step 2, the phone number will already be in there, no URL parameter needed - or if the person comes back to the page later to finish signing up, the phone number will be in there... WS Forms Save and Continue feature.
Personally, i have my forms SAVE after any key input (name, email, phone) has been entered (onblur). So even if they never hit SUBMIT, you have their name and email also.
@@SamFrysteenwhere to set the first field not to save? I'am interested.
@@56k-web sorry. I think I got confused with the “exclude from emails” checkbox. Prob still saves it as its own field in the backend.
@@SamFrysteen no worries. I was thinking the same at first
"...Goes to this person.. or goes to this person..."
What happened to Bev and Becky? Are they out of jobs now?
They were on vacation.