How to Create a Multi-Step Form with a Progress Bar in WordPress | JetFormBuilder
Вставка
- Опубліковано 21 лип 2024
- Welcome to another #JetFormBuilder tutorial! In this video, Andrew demonstrates how to create a multi-step form complete with a #progressbar in #WordPress. He covers setting up #conditional blocks and advanced validation, ensuring a seamless user experience. This tutorial is perfect for those using the free JetFormBuilder plugin.
📄 WordPress Multi-Step Form with Step Indicator and Conditional Blocks
👉 out.crocoblock.com/3RSftTz
If you enjoy this tutorial, don't forget to like and subscribe for more Crocoblock content. Let's dive into the settings and start building an intuitive form that enhances user experience!
-------------
► TIMESTAMPS
00:00 Introduction
00:32 Form accessibility toggles
01:03 Creating the form
01:18 Enabling form pages progress toggle
02:30 Building the first form page
05:05 Using a conditional block
07:15 Example of an advanced validation rule
08:19 Inserting the form on a page
08:48 Using the form on a front end
---------------
►Get JetFormBuilder: out.crocoblock.com/3XSQjYC
►Choose Crocoblock subscription: out.crocoblock.com/3XH4W1i
-------------
Watch related videos:
◎ JetFormBuilder | Tutorials
👉 • JetFormBuilder | Tutor...
◎ JetFormBuilder Features Overview
👉 • JetFormBuilder Feature...
---------------
#WebDesign #WebDevelopment #WordPress
Join us here:
► FB Community: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► LinkedIn: / crocoblock - Розваги
I haven't used crockblock for almost a year now, did you guys stop supporting elementor? Because all the new tutorials are on the Gutenberg editor...
Its just the Form Builder. You have to create it with Gutenberg. Thats why I never used it. 😃
well, you need to create a form itself in the Gutenberg editor and then display it on the front-end in Elementor with the help of the JetForms widget
Andrew Shevchenko, our CTO, has told about it in the stream - ua-cam.com/users/live2jM926i4RoM?si=PBeXSssLMMBWT4v_&t=3271
the question was about integrating the JetFormBuilder into the Bricks Builder and the core response was that as for right now the way how JetFormBuilder is built (we mean here the basic settings which are performed in Gutenberg) allows us to integrate it into any builder
well, that's really a pity that this stopped you from implementing the power of JetFormBuilder into your projects :(
at the same time, I will pass it to our team :)
My form is able to submit for logged in users but producing validation error when logged out users submit. What could be the problem?
kindly try to enable the debug in the form settings and then make it work based on AJAX type, and then look at the network what it will show by submit action - it will show the detailed message about the issue itself
it looks like as it pulls sth from the user meta
Is the progress bar block new to JetForm Builder? And does it work separately to the form page start / form page break blocks? It is not clear when or when not to use the different blocks in multi step forms... 😕
the progress bar was added in the 1.4.0 version - i.imgur.com/KTvqtRu.png
while the latest one is 3.3.4.1
so, it hasn't been added recently - it's one if the core functionality which was present from the very beginning
how exactly do you want the progress bar to work? as it's not clear enough what do you mean
@@Crocoblock Thanks for your reply. I am working on a long, complex form with conditional logic, sometimes with nested conditions, and these conditions need to influence the way the user progresses through the form from the beginning to the end.
I need the form to progress, so whichever method is the most suitable for a complex form is the one I will use...
What I was implying in my previous question, is that it is not clear if the old progress bar is necessary anymore if you are using the form page start / form page break blocks. Does this make more sense?
Thanks :)
I wish I could be helpful for you
but, unfortunately, I don't understand what exactly you mean
could you please be more specific?
@@Crocoblock So, my question is: what is the best approach for creating a multi-step form that has extensive conditional logic from start to finish? By best approach I mean - using the progress bar & form page break method - or the form page start & form page break method?
well, with Crocoblock functionality, you can use the conditional block where you need it
our conditional block can't hide the whole step (like if there's section A chosen - there will be 2 steps, if section B - there will be 3 steps, etc)
this can't be done as for now, unfortunately
When will we have form editing directly in the Elementor editor?
unfortunately, it looks like it can't be realized
you can learn more about it from the stream with our CTO
ua-cam.com/users/live2jM926i4RoM?si=p81oRfCREL6gAcqI&t=3273
Can I add username duplication? How can I add it? Thank you
why do you need to duplicate the username field?
as the other one is Last name - which is quite popular order while having such kind of forms, isn't it? :)
you can add them as it's described in the video ua-cam.com/video/FvYW3gHaems/v-deo.htmlsi=y7mbbtgmjJx5BvIQ&t=151
Its funny, no advance options such as Images as a option in radio.
Select Your Shape
Circle ⭕
Diamond 💎
.....
you can follow these guides to know how exactly it can be achieved :)
jetformbuilder.com/features/how-to-customize-default-checkboxes-form-fields/
jetformbuilder.com/features/advanced-choices-field-block-overview/
if you then have troubles, kindly proceed to our support team :)
crocoblock.com/help-center/
Need Conversational forms
what exactly do you mean by talking about conversational forms?
maybe these solutions could help you
Build Support Ticketing System in Wordpress ua-cam.com/video/E2zfYqinqFQ/v-deo.html&ab_channel=MoxetKhan
[Part 03] Ticketing System | Create Agents | Add User from Front-end in JetEngine ua-cam.com/video/73hxY2GkwGA/v-deo.htmlsi=BxD3zbPWOPlXOmjx
Wordpress messages between users [chats] ua-cam.com/video/v3QR3824F4Y/v-deo.htmlsi=gInNPc5LDNzp6OvH
Like fluentforms. c o m/conversational-forms/
thanks for clarification, I will pass it to the team :)
at the moment, you can try solutions which I have sent above, if they suit you :)