Conditional Logic Elementor Forms - No Plugin - Element.How - Elementor Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- This code will change the way that you use forms especially when you need Conditional Logic.
Pick an option to make others appear.
Code: element.how/elementor-pro-add...
Conditional Logic Elementor Forms - No Plugin - Element.How - Elementor Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
👕 Get our Merchandise: websquadron.co.uk/merchandise
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: trk.elementor.com/25741
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
Should be standard with Elementor
What an absolute Elementor legend you are, just when i thought i knew all i needed to know i found your channel and it opened up a whole need world of options - keep up the great work dude
Wow, thanks!
THANK YOU not only for the code, also for the time you give to create and share it. God Bless you.
Thanks for this! I would like to add that if you set a hidden required field, just place a deafult value so the form can be submitted.
Brilliant and very easy to follow! Well done! 🌟🌟🌟🌟🌟
This is downright wicked! Thank you for sharing this!
This video made my day. Really helpful. Thanks a lot for this!
Excellent - Thank you!! Going to have some fun with this 🙂
This is a real outstanding tip! Thank you so much! 😀
I need this yesterday. Hello Elementor. Thanks for the work-around tutorial Imran!
Is it working for you on the updated version of elementor?
Just got the link to this in my inbox! Your hard work is appreciated, friend!
DID YOU SUCCEED IN COPYIING THE CODE? I'M FINDING IT DIFFICULT TO DO SO
My guy! Absolutely brilliant again!
Bro you're amazing 🔥
Please keep up with your work.
It's extremely valuable
Thankyou, For me, another plugin bites the dust 😊
Thank you so much! Your tutorial is amazing!
Thanks man! I was looking for something like this :)
Epic explanation! Thank you for your help
... the Force is Strong with You... Thanks Master!
Awesome !!! Thanks to Maxime too 💯🙏
Excelent!, Works great, Thanks!!!
Super helpful, thank you.
Great video! helped me a lot my man (: 🔥
Awesome video!
Genius!!!! thanks a lot!
Very helpful. One thing you got wrong is adding conditional logic to a text area would not be illogical, it would just be extremely complex. That's basically what chat GPT is doing :) But I get your point.
Thx for the code. I would like to show up 4 text fields when selecting a radio field. Your code works with two fields. But not with three or more fields. Any idea how to solve this one?
Hey there, thanks for the amaizing Video. Helped me a lot. Is it possible to extend the code so that for certain selection boxes only one answer option can be selected and what would the code for that? cheers
Thank you very much!
Indeed, it is super super awesome ❤️.
I'm wondering soon you will appear with quiz form
Hi could you please do a video on how to play around with dates field like if we are building a booking website if select the check-in date all the previous dates to be disabled on the checkout date field
Is it possible
Nice. Does it cause any issues if you're putting a required field into one of the additional questions and they don't choose that option? (ie will it tell you its required when they hit submit but as its not visible they can't?)
This is where you can decide if you really need it to be required or not.
definitely useful
Neato! Do consider always keeping form labels tho - removing labels is a big accessibility problem.
Good point
I have a question, if I want the initial question to be a radio button, and then based on which radio button they choose, they are offered a different set of text fields to complete (all required), is that possible or does every condition have to be related to another radio, select or checkbox field? Also, based on the initial radio button chosen, when they submit the form, can you have it go to a different department?
Better to use something like WSForms instead for that
Honestly 💪🙏 Thank you so much!
Any time!
Brilliant tutorial, just what I was after! So frustrating Elementor don't have this as a feature already.
I've managed to get this working on desktop, any idea why the same form and html block on tablet and mobile don't show the conditional fields when the checkbox is clicked on? Thanks
I hope they introduce it one day
Thank you very much - A small question, is it possible to implement so that if a user selects a certain field (for example "No") he receives a certain message and then the submit form button is not active?
That would need some thinking and some automation for the email side.
Great video and easy to follow thank you. Have a question, if you wanted more than one field to show after a radio selection has been clicked is it possible to modify the script to display 3 hidden fields? Thank you
Indeed you can :)
@@websquadron Hi, Thanks for your reply, can you help me with the changes to this script?
@@mslcreative Did you click the link for the code, as that will show an example of allowing extra items to appear based on clicking one item's option. We could help but we charge for 1-2-1 site support.
Thank you so much for this great video.... It worked for me perfectly in one place of the website, but refused to work in other place in the same web, it did just the same steps and everything, does it work only once for a website?
I have a bad feeling that yes - but check where the code came from - as the Developer may have some tips.
hi there! Brilliant code! Is there a limit on how may you can add? I added 31 radio inputs with a snippet for each, but now it's not working. Is the no underscore thing essential? I am using them as it's normally ok for IDs
Not sure about the limits.
Just implemented this tutorial on a website I'm working on for my son - he's a young Jazz musician. Anyhow, I'm a beginner in web design & your tutorials are awesome! Question: I've placed my conditional form in the footer. When the conditional field is activated, it stretches beyond the viewport (i.e. below bottom of page). Is there a way to fix this so that the bottom of the page/container stretches as the conditional content is revealed. In effect the entire form would be in view. Thanks in advance & keep putting out amazing content that is easy to follow for us beginners!
Thanks and I wish your son all the best! May need to add some additional padding, or it may need further inspection to sort that out.
Hi Imran, great video, but when I went to get the code it is locked behind a login where I have to first create an Elementhow account to get access to the code?
If you access via your Google login then it should be fine.
I want to use this but if I was wondering if you could set it up once and if someone marks no as an answer if pops up under that question with a text box for them to answer why
See the code link as there’s some further examples about how you can use an array. It might work.
Very nifty. Thanks for sharing.
DID YOU SUCCEED IN COPYIING THE CODE? I'M FINDING IT DIFFICULT TO DO SO
@@hackathongames I just checked it again... You can copy it... Not sure where you're having a challenge
Is it possible to let it show like 2 Elements/Fields by just checking on button in the first step wich in your Video allows u to show one field by checking one of these boxes?
That would take some working out
Hello thanks for this awesome video. I have a challenge, once i add the codes, the form underneath does not show at all after publishing. Everything looks blank once the page is published. What should I do?
Depends on the form and content but would need a consultation to investigate.
TOP!
thanks a lot
I have a case where when the customers want to upload a product photo with its quantity, i tried the code and it a success for one upload,
but if customers want to upload more than one product photo with its quantity
what do you think, is there any solution?
You could add the option to update multiple images, but I suppose you need to allocate a quantity field per image. Do you have a URL for your form?
i have a small question , what if the condition for displying the field is a Date (date picker) ?
Hmmmmm... that would need some thought. Try adding the code into ChatGPT and see if it can rework for you.
Can this be done with the elementor form steps? Say I choose website and click next, it opens things about website
Maybe… but would need some funky code
awesome. only if we also do conditional redirect
Ok this is great, but how to display only the fields chosen in the form upon sending ? Is there "hidden" option for the "how can we help" list?
Not that I know of.
Great tutorial as always.Thank Imran.
However, if the "hidden fields" are required the form fails to submit. 😥
Indeed. I would only make the very 1st question required, or none at all.
Put a default value for the hidden required field
Hi @websquadron
Thanks for this tutorial, it works perfectly fine for me but I have issue with my submission configuration. Since I used the id for radio configuration, I can’t use it for my email 2 submissions email confirmation again. I’ve been struggling with this for days. Kindly help out. Thank you very much🙏🏾
So instead of sending confirmation message to the person filling the form, it’s sending it back to my email NB: I used [field id=“email”] in email 2 while I referenced the JS ID in my form field
Hi @websquadron
does this also work with Metform radio buttons? It doesnt seem like it does.
Don’t think it would
do you think this will also work for gutenberg form?
Not tried that
How did you change the color of your check box background?
Try this.... maybe...
CSS Code for the Form:
selector .elementor-field-option{
display: flex:;
gap:10px;
accent-color: #ff0050;
line-height: 25px;}
input {display: inline-block;
vertical-align: middle;
width: 25px;
height: 15px;}
I can't get it to activate or appear, do we need the bottom part of the script as well ?
Where can I copy the code ? :D .. Not sure if this is for free or paid ?
Hi web squadron. I have an issue with long labels view it in phone screens. In stead of show the phrase in other line the end of the phrase is over in the same line. How can i fix it? thank you so much for any help.
This is a tricky one, so let me check. I think you can inspect to get the id for that label and then set it to wrap.
@@websquadron thanks,
I copied all your steps and write the code till 15 number but I have an issue that there are showing all of the sections and its not working. What code did you write under function?
It’s the same code that’s pasted
Awesome...! How can we do this in Multistep form? is there any specific plugins needed for multistep form?
Not sure it will work for the Multistep. May need a completely separate Plugin for that.
@@websquadron can you tell me that plugin as I really need this form
@@AsifIqbal-zo5gp Have you tried Google?
@@websquadron well I have build my multistep form thank you.
I have a question, by mistake I lost my projects databases after re-installing my windows 10 but I have save my htdocs (xampp) folder and I forget to save database folder name mysql now when I load my project, it says can't select database so is it possible to recover those databases on local host? or I have to rebuild my all projects? please help
@@AsifIqbal-zo5gp hi, can you tell how you could create a multistep form with conditional logic?
Would love to know!
Hello! I did everything but it does not show me the conditional options. I have a form with steps, could that be the reason why my form doesn't work?
That could be the reason. It's built to only work with non-step forms.
Can you make the shown field REQUIRED or NOT REQUIRED, depending on whether they are shown? As making a hidden field required would make the form impossible to complete! Any idea Web Squadron? 🤓
Good point
Hi, I need some help here. As you know that element does not support Microsoft edge now, so most of its widgets & modules don't work in the edge. I was wondering what you do to tackle this issue?
I always work in Edge and my videos are recorded in Edge.
DID YOU SUCCEED IN COPYIING THE CODE? I'M FINDING IT DIFFICULT TO DO SO
the elementskit megamenu does not load up to the wordpress. what to do with this please?
Not sure as I don't use the EKit Mega Menu.
I am facing a Server Error (403 error) by using the code that paste it on my html code tag
could you please tell me whats the problem?
I don’t get that issue
Really great video. It is possible to do something similar with the action after submit the form. Example: Lets say that we have a form for download any type of template. When user select an option and send the form this have to show something specifically about the option user made, this have to work for any option that the user make. Of course the final result depends of the user option.
I suppose yes but would take a fair amount of conditional logic
@@websquadron would be the same logic that your use in your video. or would be something totally different?
@@kaiserobaldia1426 Most likely the same logic but you'll need to test it out
Thanks for the tutorial it was really helpful, however I'm having issues when the form is submitted, some of the hidden fields does not show on the email. How can I fix that????
I'll have to check that. Are you selecting for those fields to be shown in the HTML of the Email?
@@websquadron yes I am.
can you provide bottom part code snippet from document.add eventlister
Not sure
This isn't working for select fields. For the radio button, it's perfect. Any idea what could be the issue?
It should do as I tested this again on Saturday
@@websquadron yes you are right. it is working on other websites but the website I'm working on right now has a different theme and the theme has inserted some extra codes due to which the select fields option value isn't there where it should be.
@@websquadron Now, I don't know how should I make the code work.
bro i make same as u step by step with radio but its not working? same code everything same with select too or check boxes is not working?
Not sure as I don't work on your site? Can't help further unless it's a 1-2-1 Consultation.
@@websquadron Bro sorry I didn't reply quickly I tried for 3 days it didn't work then I commented then straight away after 5 minutes it worked? I don't know where the magic lies?
@@websquadron Is it possible to create a Logic Step Form with images using elementor Pro? Is it possible? Would you make a tutorial?
What would be nice is if you could use conditions to limit character/word count in the text area. Also to not accept links to control the manual spam that comes form the forms as with Formidable Forms.
I’ll check with the coder
@@websquadron Thank you, this is one of the biggest problems with Elementor forms that they seem to not care about and should. Manual contact form spam is a real problem, especially with Elementor
@@Website-Developer My tip (works 90% of the time) is to add 4 x Honeypot fields and name them like City, Country, Browser, Agree to Terms, etc.
Ive tried this, but my conditional fields always seem to be displayed and not hidden. Any help please?
let showThisFieldIf = {
feedback: {
reason: [10],
},
}
I have my main radio selection which has the ID of feedback and then its supposed to open a text box when someone selects the "Other" option which is the 10 item in my radio selection
Best to check with the code developer
thanks this is work
Thanks for this! is there an update for the code? is not working for me even though I followed the tutorial step by step. Thanks!
Are you using Containers?
@@websquadron yes I am
Hey Thank you for sharing this video 💌
Iam facing small issue in this code I am creating services drop down
select Mobile brand
select Mobile model
select service Type these are the 3 select boxes I have if I select any one of the mobile model from select box then only select service type visible
How to achieve this ???
Have you added your comment onto the page with the code?
Best to check there.
I dont know if there was an update or something that may have broke this, but I can't seem to get it to work
Really? And you're following the video's steps?
@@websquadron no, it was me. The tutorial worked fine. Typical coding thing though. I had a typo in the code
@@websquadron FYI you're tutorials are amazing, I've been following for a while
Well, the problem is - when you are trying to add some "require' option to the second level of choice. While the fields are hidden - they are still required then :/
Good point
Hello! As soon as I add the HTML to my form the submit button no longer works. I cannot simply submit the form. I have followed the video from beginning to end. Is this a common issue? / Any advice please?
I am getting some issue like - An invalid form control with name='form_fields[specifyshape]' is not focusable. when i checked the console
Do you get the issue on a fresh installation as it could be other codes/JS etc. Let's assume their is no other code affecting it, then I may need to see thew URL. Reply with the page URL. Also are you using any Elementor Addons?
@@websquadron Hi! Thanks for your reply. I just figured out the solution 5 mins ago. It happened because I set the conditional fields as a 'required field'. I made it unrequired and it works now. Pretty weird?
Do you have a tutorial how to add autocomplete to elementor pro form fields? they dont have it. big bummer
Not yet.
@@websquadron is it possible?
@@smallgainz3459 I haven't checked or looked into it.
register for the code snippet and then never recieve the conformation email.... still waiting..... when oh when will it come ....
Register? Just click and get the code for free
can you please drop the code in th comments i couldnt find the code in that link you've attached in the description : |
When you go to the link, the code is at the bottom.
Is there any way to use Elementor Forms to make a quiz where the result is based on the given answers? And without needing to install any plugin? That would be GOLD
Hmmmm need to think about that
@@websquadron Ff anyone can it's you Mr Elementor wizard, I've been spending one week trying to figure it out but always end up facing I need a plugin. Hope you have better success than me!
can someone please provide me with the js code for this
it isn't there is the website as of the moment
Did you click the link?
@@websquadron yes I did check the link but I can't find the all the code in the function ()
@@websquadron I watch all your videos .. I'm a big fan of your work
Keep clicking on 2:03 to hear a nice song. 😂
I did the test but it does not send the data and it does not reach the thank you page
Sorry to hear that, but I've not had any issues.
It's best not to follow those TH-camrs in the middle of the season. Once you add code to your website, and you're not a programmer, it can be very dangerous if something goes wrong. And the person in this video, who's trying to make money from random lines of code instead of teaching you any specific basic knowledge about coding, won't be able to save you. By that time, even if you comment and post everywhere, no one will be able to save your website.
It's best to learn the basics of coding and write it yourself or hire a reputable programmer, or buy tools with professional support. Otherwise, these random lines of code will eventually become a disaster for your website. It's truly ridiculous.
A friend of mine, after watching this person's video and following their advice, had to seek my help. I have to speak out against these heartless money-makers. Their appearance is quite feminine. Truly, their character is questionable.
code not worked showing server error 403
Works for me still
I was under the impression conditional logic was already part of Elementor??
Not in forms
Could you copy exact code from your bar please?
The code is in the link
everything work for me just fine, But I want choose 1 or 2 or 3 give me same result - I mean I choose 1 or 2 or 3 give me websites options - your video build on AND not OR I need OR give same result
You can still add the combinations that you need. See the link for more examples as that explains it.
@@websquadron I saw all examples in that link none of them have code for OR all of them explain if " you pick for example 3.4 you get result" I need code for if I pick 1 OR 2 OR 3 give me same result I have clothe niche I want customer if he pick color red or yellow or blue what ever color he pick show him size fields I hope I you understand me. sry for my English
You'll need bespoke code and we charge for 1-2-1 support like that.
@@websquadron how can I contact you?
info@websquadron.co.uk
It doesn't work with select. And the radio is fine :(
Have you tried with Checkbox as well?
I'll double check but it was fine when I was testing last week.
@@websquadron Checkbox is active and select is not. Don't know if I have misconfigured anything.
@@buiduchanh99tb Should work fine with Select, Checkbox and Radio fields, as you can see from the example in the written tutorial.
@@elementhow691 I agree
DID YOU SUCCEED IN COPYIING THE CODE? I'M FINDING IT DIFFICULT TO DO SO
The code requires sign in
Yes to your Facebook or Google.
Doesn't work on popups :(
I’ll ask the coder to check
@@websquadron Hey 😀Any news on this? This would be so useful to use in a popup form too.
@@websquadron Hey any news on this one? still doesn't work unfortunately :(
@@tifanylevinson Seems like adding it to the pop-up is an issue, that's not resolved yet.
I'M FINDING IT DIFFICULT TO DO SEE THE CODE
okay
the code dont work
i made all like you
Works for me
anyone with the code 2024
The link is there
Hello, Thanks for your excellent videos, I have a question, I hope you can help me, the "number" fields of a form only allow you to enter integers, how can I make the "number" field accept decimal numbers, (0, 0056789...) in Elementor PRO. I've been looking for this answer for days on the web, and I haven't found an answer yet, I hope to find it with you. Thanks.
If you enter 0.00000001 etc for how many Decimal Places are allowed that will allow DP places.
Enter this in the MIN Value for the Field.
Leave the MAX Value blank.
@@websquadron Thanks for your answer, I already tried that option, I can enter the number, but when I go to send the form, it doesn't send, because it tells me that the number is not allowed. I created a form where customers must enter a decimal number, when submitting the form the error appears, it does not let me move forward. Any other option? Thanks ☺
Hi could you please do a video on how to play around with dates field like if we are building a booking website if select the check-in date all the previous dates to be disabled on the checkout date field
Is it possible
Good question I’ll have a look
@@websquadron Thanks ❤️