Contact Form 7 Multi-Step Forms Setup Step-by-Step + Save Results To The WordPress Database
Vložit
- čas přidán 3. 04. 2018
- Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: wplearninglab.com/17-point-wp...
Contact Form 7 Multi-Step Forms Setup Step-by-Step + Save Results To The WordPress Database • Contact Form 7 Multi-S...
Join our private Facebook group today! / wplearninglab
Multi-step plugin in the repo: wordpress.org/plugins/contact...
Submission plugin in the repo: en-ca.wordpress.org/plugins/c...
Backup plugin tutorial:
CF7 CSS tutorial part 1: • Contact Form 7 CSS to ...
CF7 CSS tutorial part 2: • Contact Form 7 CSS Sty...
A Contact Form 7 multi-step form is created using a plugin. To be honest, it's a painful process. But if CF7 is your only option then I'll show you how to make it happen. If you are not set on using Contact Form 7, then other form builders like Gravity Forms make multi-page forms WAY easier.
Exclusive for WPLearningLab viewers, up to 50% off hosting: wplearninglab.com/wordpress-h...
Stop brute force attacks before they happen with this workshop: wplearninglab.com/brute-force...
Grab your free 17-Point WordPress Pre-Launch PDF Checklist: vid.io/xqRL
Download your exclusive 10-Point WP Security Checklist: bit.ly/10point-wordpress-harde...
Subscribe to this awesome channel here: czcams.com/users/subscription_c...
If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist about doing nearly everything with Contact Form 7: czcams.com/video/wy70WGCjMY4/video.html
Thanks for the video. Can You help with creation Previous button? Doesn't work to previous page...
Is there an easy way to do exactly this but instead of going to multiple pages you just keep going down the same page? Any help on this would be awesome, a video would be great! Just subbed. Really good content.
is it possible to create multistep in one form? I have plugin named - send to pdf cf7. how to work with it?
Applied the same (2 steps) on my site and all looks great. Hoping to see good results from this plugin. Awesome video Bjorn...
Thanks for this tutorial!
Question: can you use the Conditional Fields add-on with this plugin to make different logical paths? Like, if someone selects a radio button, can the next step be different than the default? Thanks for any help. I need to do it this way because my payment page (last step) has it's own submit button and is optional.
Hi from Perú. Great video....I got a question, if the client filled some field in the second or first step....Can I set up them (call them) in the mail configuration of the 3rd step?. thank you very much Bjorn
That is a brilliant step through and a little hasty, I would wait to watch it as I am looking for a multi-step plugin for WP, thank you and yes liked and subscribed :)
Thanks for liking and subbing Malcolm, I appreciate it! And thanks for watching!
Hi.
Thank you for all the content you are providing.
I would like to use Elementor pro and contact forms 7 (or just Elementor forms) to capture data in fields and send to mailchimp and to upload files and send to drop box. How would you advice to achieve that? Should I do two forms in same page or just one form that does both actions?
Your help is greatly appreciated.
Excellent video! It was exactly what i need
very clear description. I like the way you talk.
Thanks Shuai and thanks for watching! Let me know if you have any questions :)
May I ask how to move the contact form to the top of the fold?
Very good! Thanks.
You're welcome, thanks for watching!
Hey thanks for the tutorial!
Is it possibly to make an http post action to get the data to, lets say, a crm?
Hi Bjorn, thanks for the priceless work you are doing.
I have followed your advice to create a hiring process on my website, everything works perfect but when I request an attachment at an intermediate step, this file is not sent.
If this attachment is requested in the final step, then it arrives.
Is it possible to make these files are not lost along the way?
Thank you very much from Spain.
Hi Bjorn! Grate video. Will this plug-in work with Elementor?
Thanks for that great tutorial.
Is there a way to combine multi-step forms with conditional fields (to show results at the last step) - used for answering a quiz?
Hi Karmel,
There is, but I believe you need the pro version of the multi-step forms plugin to be able to use conditional fields with it.
I hope that helps and thanks for watching!
P.S. If you haven't yet, check out the WPLearningLab Facebook Group: facebook.com/groups/wplearninglab See you there!
FormCraft does it for me...
Hello
I like lots of your videos because it shows me you are a real expert.
About CF7 a simple question.
If I have a table of datas, is it possible to fill one specific row of this datas into a CF7 form?
Kind regards Harald
great work, is there a way of saving first step, send data to a recipient, approve and send bank to me?
Basically can we use contact form 7 for workflows?
Can this work on select items? The next step form page is dependent on what item is chosen on the select field? Thanks!!
Thanks for sharing information
You're welcome, thanks for watching!
Great tutorial!
On a related topic, have you done a video showing how to pass input values from Contact 7 Forms to a page? I am searching for such a feature. Thank you so much.
Hi Ovande,
I don’t for that application, but you could possibly do it what’s called session data. Sessions hold data like a cookie does, but it’s not a cookie. I’ll look into making a tutorial for it. In the meantime, you’ll find lots of information on this if you Google it.
You are the BEST
I know it's been a while since you released this video, but I was wondering if there's a way so once the user fills out the first form, it populates that information on a larger form on the second page. So the (potential) customer fills out their "url" and "email" in the first page on a CTA. But the second page is just a full contact form asking for their url, email, name, phone number, and topic they're asking about. On the second page, the "url" and "email" they already entered already populates those fields on page 2. Does that make sense?
Amazing.. Life saver :)
Saving lives is what this channel is all about :)
Dawood, if you use Facebook you should consider joining the private WPLearningLab Facebook. I just started it, but soon there'll be lots of us there to help each other and learn from each other. Here's the link: facebook.com/groups/wplearninglab/
WordPress Tutorials - WPLearningLab thanks for the invitation.. i just joined :)
WordPress Tutorials - WPLearningLab .. Approve me there.. i sent joining request.
If I want to add a wizard form for the "same page"
what should I use?
thank you soo much you saved my day
thank you so much from the bottom of m heart.
You're welcome, I'm happy to help. Thanks for watching!
🥔🥔🥔
Thanks a lot.
I have a query. If I have a File Upload option in my form and if someone uploads something then how to receive the file in my email?
hi, Do you know how to save data form into a external mysql database using php code behind ?
Are the conditional fields working across the steps?
So can I display different content on Step 2, based on the choice I made on step 1?
Thank you for the great tutorial btw :)
Hi Felix,
That wouldn't work with the plugin as it is. But it is possible with custom Javascript code. It would be quite involved, but you can have Javascript detect the entries on Step 1 and then hide/display the appropriate options on Step 2 and then do the same on Step 3 and so on.
I hope that helps :) Let me know if you have any questions. Thanks for watching!
@@wplearninglab Thanks Felix! Where would you put the javascript? On the page or somewhere in the form settings. Thanks!
Hello please, it is the WordPress plugin for customizing the dashboard of my clients, ie when a client user connects to my site he accesses his dashboard, clear that I have personalized while she is this plugin there ?? I'm counting on you thanks for your videos
Hi, please can you help me? Is possible to create contact form in CF7 with field which can eliminate marked choices after submission? Thank you.
Hi Vladimír,
Do you mean that the next person who fills out the form will see different form options based on what the previous person selected? Or do you mean someone filling out the form will see different options appear after they select specific options? Or do you mean something else?
It's Really Helpful for me to develop the multi step contact form..
Thanks u help me so much... :D
You're welcome, I'm glad I could help :) Thanks for watching and let me know if you have any questions.
Is there a way to save a partial sign up.
So step 1: capture email (save to database and send Admin a notification)
Step 2 : capture all the other information (save and send to Admin)
IF anyone find answer then please let me now. Thankyou
Hello.
That "submissions" feature is nice, but is there any way to select submissions by fields informations?... Say I want to see only the submissions where people have selected a particular age, a particular city etc... Whatever fields my form has.
hii thanks for the video but one question. What about the previous button?
Thank You So Match
You're welcome, thanks for watching!
@@wplearninglab ♥
whats the best mulilanguage free plugn for elementor
Have you got any video that will help me to develop a page where I need customers to input their personal details such as name, email and phone number which then is stored in a database which if needed i can highlight phone number column of all customers and copy them externally to send out text, email and so forth for my business use. basically stored like an excel sheet internally. please help me if possible
hi men, nice video. I can use conditional fields using the multi step form plugin ?
I haven't tried them together but I can't think of a reason it wouldn't work.
I say cuz.. i do a multi step form and put the conditional field.. and i dont receive any data of the form, i only receive the body message empty, thanks 4 reply !!
I can read this in the features of multi step form, it is the reason of my question:
"Note: If you need a form that saves entries or needs conditional fields consider using Formidable. I have used this plugin to build a multi-step application form."
That's interesting, I'm surprised you can't combine it with conditional fields. We all learned something new today!
Thank you for such a nice tutorial. I have one question, if some one leave the form after submitting step 1. Is there any way to collect the data, which he entered in the step-1?
Good question, there is, but it's not built into this plugin. I'll have to look into create a tutorial for getting partial data.
@@wplearninglab bundle of thanks. I ll wait for this video
@@highinspiration9988 If you install flamingo you can see the data that has been entered in the form even if it has not been finalized.
@@estebanip6760 yes, i have installed it.
thank you
Thanks..
You’re welcome Kamaldip, thanks for watching!
Is there a multi step form that can be done on elementor directly?
Is is possible to save and continue later for a registered users ?
I've got 2 questions for you. I can't send the form. But I think its because of my checkbox which one I added. How do I fill the message body at the last form when I'm also using checkboxes. My second question is: can you have an error because you filled not everything from the form in de body message?
is there a way to add progress bar
Is it possible to do this on the same page, one section?
Progress bar is possible?
Hey is there any way to do the multi step in one page
is there a plugin so user don't have to redirect to another page. Multi-step in same page.
hi can you suggest me how to insert the multi step contact form on a Divi theme slider, my problem is that the Next button must change the slide and not point to a url of another page please help me
Hello, and how to see the results on all the steps? On-comes only the latest step with data, but on 1 step I have radio-button and this information there is no.
Dear Moderator, I have my multi-form up and running in 4 steps. I have one problem, I need to configure Reply-To: and Auto-Responder but it is showing some syntax error when I am trying to use email Id captured in Step-1 of user in Step-4 where the form finally gets submitted. Can you please help me with this.
Ayooo, how would I pass data from one form to another other? I want to use the data in another form to add some conditional rendering before the last step where the email gets fired?
Good question. I use JavaScript (JS) to store the information I need in a cookie. You can also use PHP "sessions", but I find JS easier. Google this "get data from a form into a cookie using javascript" and the page by "the-art-of-web" has a great walkthrough.
I hope that helps and thanks for watching!
hi when i make a change to the form like add a new field how come it deletes all data on my database :(
The only subject is showing on the message body. What about the first two page. The message must be sent with all data. Right? But It's only showing the last one. Is there any solution.
Good job, otherwise i thik that here sending data of only the third step but the others (1&2) no. Is not it ?
You got, no data is sent until the third step in the case of this video. The data is sent on whatever step the final send button is on.
I hope that helps that helps and thanks for watching!
I have the same problem. I checked all the submit buttons and everything seems to be okey but still, It only sends the third step data. Did you find a way to solve the problem? Help, I need somebody!!!
Is there any way to have the same multi step form but all on one page?
There is, but not easily with CF7. The only plugin I've created a single page, multi-step form with is Gravity Forms. I'm sure there are others that can do it, I just haven't used them.
Use typeform - www.typeform.com/ its way better
is there a way to have back button on step 2 and step 3 well as submit and next button
Hi Mohammed,
The plugin doesn't have a setting for that. But you could manually add a "back" link in the form builder for step 2 and step 3. I don't know if the info the visitor submitted in previous steps would automatically load into the fields when you go backwards.
@@wplearninglab doesnt have a back button?! Is this a joke ?
@@wplearninglab Your answer [back "back"]
@@ikamy [back "back"]
Hi , I need your help, I have 4 forms in which 1st form have 2 radio button that is Window Ac and other is Split AC ,
When i click on Window AC it and click on next it redirects to a page in which I have a form which shows form with installation price of window ac and other form is of installation price of split ac and 4th one I have is basic contact page which include name,email ,contact no etc .Now how can I redirect on two different pages in that is of window price form and split ac form as on multiform I can enter only one url of the page .Please do reply awaiting for it
Hi Hussain,
I don't know if what you're describing is possible with CF7. What you're describing goes by many names like Branching Survey or Branching Logic. The only plugin that I've ever used that can do something like this is Gravity Forms. You can use Conditional Logic in that form builder to create different paths.
You could maybe use the conditional logic add-on for CF7 to show the different prices right after they make a selection. Then you don't need to send them to different pages.
I hope that helps and thanks for watching!
Thanks for the help ...I need one more help from your end .. Suppose I have two radio buttons or checkboxes and two of them have different prices like for split ac service I have price Rs 249 and for window ac serivice I have 399 so How can I retrieve this price from radio button or checkbox and show at payment step ..please reply as soon as possible awaiting for it
how can i use the step form on a single page, if i dont want to change the page url ?
Hi, i got an issue. my previous form fields not coming, it is just received the way it is written like Name: [your-name]
Hi Hamza,
In the form builder please check that the shortcodes on the "Mail" tab match the shortcodes from the form builder tab. You can copy/paste the shortcodes from the top of the Mail tab too.
I hope that helps and thanks for watching!
Is it possible to save or submit the data of page 1 while being redirected to page 2? This is a very important function for me
did you find any solution for this?
@@karan_346 Not with Contact Form 7 ... We use other plugins now
hi, need to make multipage form on a popup, Is it posible?
\ok yes it is possible with elementor pupup plugin
Sr
How to add back button in second step to first step
[previous "Go Back"]
How to setup wordpress that "hidden content/ Link/ download-content" to be shown only when a visitor reply to my post. Please help me.
When you say "reply to your post" do you mean leave a comment?
If so, most WordPress setups put a parameter in the URL after a comment is left. You could just Javascript/jQuery to detect when that parameter is present.
When the parameter is not present your hidden content can have a CSS rule of display:none. When the parameter is present you can have the CSS rule change to display:inline or display:block to make the content appear.
I have a tutorial for detecting parameters in the URL being published soon. You can adapt the code from that tutorial to make this work on your site.
I hope that helps and thanks for watching!
I'm no brainy regarding any coding, but i'd like to learn. Thanks for reply.
I am trying to create a form where in step 1 I gather info about a problem (but NO personal info) ... then when the person clicks on the button (Search for a Solution) they are taken to a new page saying "We are looking for a program that can help you. Please wait." And a little hourglass spinning around for a few seconds. Then I want the website to continue to another form page where we announce we have found some programs that could help them ... but we need more info ... and a form to capture their personal info. When they fill in the second form I want the system to save/email ALL the info collected on both forms. From your video I believe I can do this with Contact Form 7 ... but I can't figure out how to automatically get the site to move from the second page to the third page ... and how to create a form on the second page that doesn't collect anything (or do I need a form on that page at all). Can you help ... or maybe do a video demonstrating how? I believe this technique of getting a visitor to fill in info about their problem first will cause them to become more invested in the process and much more willing to provide their contact info ... while giving us the info for our follow up call.
That sounds like a pretty solid process. I think you're right, the visitor will be much more likely to follow through.
Is the second step actually searching through a database?
If you have a second page you do need a page created by the plugin or else the sequence will be broken. That's an assumption that I haven't tested. You may not need a form there and be send to the third page.
What you could try is:
1. Create the form on the first page.
2. Send them to a second page that has an HTML meta refresh redirect which is not instant. On that page you have text saying "We are looking for a program that can help you. Please wait." and an animated hour glass. Here's a meta refresh tutorial: czcams.com/video/n_g4r0XIhDI/video.html
3. Have the second part of the form on the third page.
I have a feeling that it would work with a non-form page on step 2, but I haven't tested it.
I hope that helps and thanks for watching!
No search will actually be done ... the ONLY purpose of the pause between continuing to the personal information form is to hook the visitor into wanting to find out what we "found"
I like your idea to use a delayed redirect moving from form 1 to form 2. I tried doing this with another multipart form plugin ... dont remember which one ... but couldn't control what page the firm system went to when the visitor pressed the submit button .
Thanks for the delayed redirect code help.
Hi! When I click on NEXT i can't get redirected - all it does its loading endlessly; could you help me out?
Hi Vaïda,
It sounds like a plugin conflict. The first thing I would do is make sure all your plugins, your theme and your core files are up-to-date. If that doesn't help then I would turn off all plugins except CF7 and CF7 multi-year. Then see if it works. If it does work then there's a plugin conflict.
I don't know too much more about the plugin. The best place to get support is from the plugin developer
I hope they https and thanks for watching!
@@wplearninglab Hi my problem is solved about this. BUT I got another one: can't display the entry of a conditional fields in my email. I want the visitor to choose his income out of 3 groups of income according to number of persons in his family - if he clicks 1, group1 shows up from which he chosses a, b, or c. If he clicks 2, the group2 shows to choose from d, e or f. Would you have an answer about which email tag I should insert? none of them works
Hi, I did the same but i am not getting the mail from the last form.
Hello Sir,
i have a contact form in which i enter 5 players name and emails randomly. i want to send on picture to all of 5 player emails. once click on submit button e.g
player name1 player email1
player name2 player email2
player name3 player emai3 etc
image to be upload
once the all players emails enter randomly and click on submit button then send that picture to all the player email how it is possible,, if possible please guide me.
Thanks
Hi Zubair,
If I understand correctly you want to send the uploaded picture to all the email addresses entered into the form.
If I got that right you should be able to set up Mail 2 in the Mail tab of the form builder to send a BBC email to all the email addresses and hopefully attach the uploaded image to that email as well. Does that make sense?
Hi, the result by email is wrong cause i've the following text
From: [your-name]
Message:
[your-message]
Where I was wrong?
Did the plugin give you an error saying the email is wrong or the email you received is wrong?
Is there an easy way to do exactly this but instead of going to multiple pages you just keep going down the same page? Any help on this would be awesome, a video would be great!
Its way less time consuming as well I created a 23step visually impressive form in like 30mins
Why create 3 new pages??? If i be using a single popup.....
how to customized gmail like you
i'm having a problem while submitting the form.
I followed all your steps but dint work.
"There was an error trying to send your message. Please try again later."
this error appears.
I fixed it by putting the proper data in the email tab
@@losingmyreligion23 even after putting proper data.. it dint work.
did you then win, facing same problem
I usually have an insane amount of tabs opened, but this made me so mad! Pulled half my hair out and had a temper tantrum. Thanks for the video, though!
Update: There's a much simpler way to make this now. There is a plugin Multi Step Form For Contact 7
It's not working
can you explain about the field: "From: [your-name] ?? Is this your wordpress email id??
have anyone noticed this guy his gmail picture is customized 9:48
hi i want to add image checkboxes in cf7. is it possible? thank you (Like this examples : czcams.com/video/OMvn741EB-U/video.html - czcams.com/video/XCnE34-h3Eg/video.html)
Sorry. Doesn't work. Looking for something else.
1 MINUTE VIDEO IN 13 MINUTES....
True, for someone with experience almost any video can be condense to a minute or two. But people who don't have a lot of experience appreciate more of a 'how to'
Idiotic way to do a multi step. AJAX is the ONLY way.