Man, you flew through that quickly! I'm brand new to Divi though. I think what would have helped me to understand why you were doing the steps would have been to see the final product fully explained (not just a splash screen) at the 'beginning' of the video. I love all of your Divi videos. Keep up the great work. It's going to be fun learning this powerful theme. :)
Thanks for the detailed tutorial. Appreciate it. However I feel that elegant theme team should add a dedicated module for pop-up. Actually you need guys to move a bit faster to add new modules and not leave your loyal clients look for third party divi plugins for essential features. Regards
I really enjoy watching your video, easy to understand (even for French people ^^), clear, straight to the point ! Thank you for you work, It's a big help in the Divi journey !
This would be a lot more useful If you simply showed us how to make a general section pop-up and close. For those of us that don't want to copy your contact form exactly we have to sift through this video/the documentation for the bits that we need.
Great video and blog post. I followed it exactly and it works great...now the client wants to do that PLUS have a file upload feature. I bought the PeeayeCreative Divi Contact Form Helper, installed, activated, and added a file upload option...but now the contact form nested in the toggle shows an error re: naming conventions...can you direct me to a solution? Thanks
Well, this tutorial was helpful. I´t made me realise the possibilitys in Divi if on knows a bit of CSS an Java. I do not, - I´m an old scool Art Director skilled in design. Writing code is kind of new to me. Fortunately I have a son who knows a bit about these things. I implemented the tutorial to the webpage I´m building and got a bit frustrated when I realised that clicking outside the form didn´t close the form.So my son came to rescue and added a bit to the script in this tutorial, so now the form closes when one clicks outside the form area. Here´s the script with the function close on click outside the form: ============================ jQuery(function($){ jQuery('.offertknapp').click(function() { jQuery('.popup').css('display', 'block'); }); jQuery('.close').click(function() { jQuery('.popup').css('display', 'none'); }); jQuery('.popup').click(function(e) { jQuery(e.target).hasClass("popup") && jQuery(e.target).css("display", "none") }); }); ============================ And hey guys, youre doing a great job over at ET, I´m having a lot of fun learning WP/Divi way to build webpages..:)
Hello, I particularly appreciate your tutorials, even if I don't understand English, I learn a lot! You have a mastery that makes you dizzy! I looked and tried to reproduce your presentation on "How to Create a Contact Form on Click with Divi", unfortunately it dates from 2017 and I did not succeed in making it. The version is different and I'm a little confused ... Very precisely, at 2 minutes and 43 seconds in your tutorial, the do not have the same options; in your tutorial, we see "Row Settings - Background and Admin labels" only and on my version I have the two columns, one above the other that we can configure and then I have the Link options , Background and Admin Label. Would you be so kind as to tell me how to configure this part, please?
Hi Mark, I love your tutorials and always learn something new. My popup works perfectly, but I want to apply it to more then one button on the same page. Can you maybe advice on this?
This was a great tutorial. Thank you for making it. I have it up and running just as it should on a test page. However, When I attempted to duplicate this for each of my team members it overlapped each of the popup windows with each person I created it for. Is there a way to do it in several instances on the same page?
Hello Dear. Love this tutorial!!! How could I save this page with the button or save sections to insert this button inside other pages in specific places?
Hi Alexandre! 👋 You can copy the Button/Contact Form in the Module Settings or save them to the Modules to the Divi Library, but then you also will have to adjust the Button and the Contact Form 👍 If you have any further questions, please, get in contact with our Support Team for assistance: www.elegantthemes.com/members-area/
Hello :) Your video is exactly what I need to create a contact form from click. Thank you so much! Can you please tell me where you got the stuff that you pasted on the 'Before' and 'Main Element' fields under Custom CSS? Thanks again!
Hi, that's really great. How to modify this popping up different contact form depending on which of two buttons a customer clicked on: contact form 1 (email message) popping up when clicking on button 1, and contact form 2 (Telefon) popping up when clicking on button 2?
Appreciate the work you put in, but I can't agree this to be called a 'tutorial' as nothing was learnt about why things were being done. It would also maybe helpful to actually 'teach' how to create in this case the plain form popup first, that way we 'learn the basics'? After that, can move onto the styling options if you wish. Hope you are OK with this suggestion?
The DIVI contact form is showing mixed results when my customer receives it. On the form itself, the Comments/description is on the bottom. When he gets the results, it's on the TOP. He does not like that. Thanks for any help.
Hello, Good Day! How to create a video popup similar to this one? Because if I use this style, the video still playing after clicking the close icon. :)
Are you able to do a contact click video with 2x buttons? Example; If you have two different contact options, 1 for a specific person and 2 the other specific person.
I was able to use this tutorial to create my pop up form so thanks for that. However, it was way too rushed and required way too much back and forth. I had to keep pausing the video and going back and forth so that I could use my own font sizes, colors, button sizes, colors, background colors and literally every other detail. It was also WAY too rushed. It was hard enough keeping up much less understanding everything that was happening due to lack of explanation. A popup form feature will DEFINITELY make this whole process alot easier.
Hi guys. Thanks for a very good topic. But some modules depress me. For example, contact form. Such a weak set of options. Very disappointed with this work :( - You cannot change the distance between the fields. - You cannot change the location of the button. - It is impossible to make the whole form in one line without problems. - no checkbox for privacy policy - etc Only the simplest style changes. This I myself can correct in CSS styles. The contact form is one of the most important modules on the site, and you do not pay due attention to this. We have to stack some kind of third-party plugins to look for stupid solutions. Be real guys make a well-customizable contact form. From Russia with love ;)
I followed this tutorial, and it is working great. I used the display:none; code in the section where the text boxes and contact form module are located. Now when I view the page in the visual builder, that section doesn't appear when I hover over the area, and am not able to edit it. How can I get to it so that I can edit it?
The problem with this guys tutorial is he is just doing stuff w/o even explain why it needs to be done. It's like, we just need to follow it w/o understanding why things are being done.
Thanks for the tutorial Mak Its very helpful, However i followed all the step your made in this tutorial and it worked perfectly only that the popup close just after seconds The page refreshes and close automatically, which means visitors can't really use it.. Please help me out .what could be wrong?
Fixed it. You can style the button however you want but you have to make sure that the button URL starts with ‘#’ followed by something else. You can’t just leave it blank or use the ‘#’ character only. By adding ‘#’ and some text, the page will not move once you click on the button. If you leave it blank, the page will refresh on click. And if you only use ‘#’, you’ll get sent to the top of the page.
Hello, very cool this tuto and tank you for all of your tuto, but i have probleme, we can't scroll in the pop up, and for the mobile i have no access to the send button at the bottom and the X button at the top :( . Do you have a idea?
Hey, your popup looks great, however after engaging the button the popup window appears for 5 or so seconds and then disappears. Can anyone suggest how to fix it?
Hey Giovanni! I'm afraid it's not possible as of the moment. However, I will forward this feature request to our development team for consideration. Can you let me know a little more about why this feature would be helpful to you? The more information I can pass on the better. 😃
@@elegantthemes Ohh yes for sure, this feature would be great for online store purpose, imagine you´ve already bought your new brand camera but you haven´t receive any information or confirmation after that your purchase... Well with automatic response noreply@ or at least an email from your company, you are ensuring to your client security and comfort, that you have the information about the purchase, and that should be inmediately after the payment. This will help a lot of people who work with ecommerce stores.
make the menu link a custom link and add the class .button as in a cta button as you can see in my menu link Contact in desktop version graphicdesignireland.com/website-design-clare/
You could have taught this in much better way ...I'm not a beginner to code but even to me this seems a bit daunting....this tutorial needs to be redesigned....It can solve the specific purpose but it isn't good enough to understand the concept behind it
I have seen the worst of divi when it comes to forms. There is no easy way to connect a form to a database, there is no easy way to change the button size and position, there is no easy way to change the positions of the form elements.
This is a very bad tutorial, you created the form AFTER making it invisible instead of doing it first so we could all see how it is turning out and changing it to our likes.
Man, you flew through that quickly! I'm brand new to Divi though. I think what would have helped me to understand why you were doing the steps would have been to see the final product fully explained (not just a splash screen) at the 'beginning' of the video. I love all of your Divi videos. Keep up the great work. It's going to be fun learning this powerful theme. :)
Thanks for the detailed tutorial. Appreciate it.
However I feel that elegant theme team should add a dedicated module for pop-up. Actually you need guys to move a bit faster to add new modules and not leave your loyal clients look for third party divi plugins for essential features.
Regards
I agree. I have been looking for popups but many plugins conflict with DIVI. There should be a POPUP MODULE.
This is funny if you think about it..."using nothing else than Divi, some jQuery code and CSS code" Nothing else? :)
Agreed!
True mostly for a pop from a call to action button
I really enjoy watching your video, easy to understand (even for French people ^^), clear, straight to the point ! Thank you for you work, It's a big help in the Divi journey !
I love all of your Divi videos. I love your enthusiasm.
ALL THIS work is required just to make a form appear? There has to be a better way.
This would be a lot more useful If you simply showed us how to make a general section pop-up and close. For those of us that don't want to copy your contact form exactly we have to sift through this video/the documentation for the bits that we need.
It does just stop at the moudles and put in your own and style them as you please it works very fine
A contact form with an upload function would be very nice.
Thanks a lot!!!! Have been struggling to do this. Your video made it possible. More power to you!!
Great video and blog post. I followed it exactly and it works great...now the client wants to do that PLUS have a file upload feature. I bought the PeeayeCreative Divi Contact Form Helper, installed, activated, and added a file upload option...but now the contact form nested in the toggle shows an error re: naming conventions...can you direct me to a solution? Thanks
Well, this tutorial was helpful. I´t made me realise the possibilitys in Divi if on knows a bit of CSS an Java. I do not, - I´m an old scool Art Director skilled in design. Writing code is kind of new to me. Fortunately I have a son who knows a bit about these things.
I implemented the tutorial to the webpage I´m building and got a bit frustrated when I realised that clicking outside the form didn´t close the form.So my son came to rescue and added a bit to the script in this tutorial, so now the form closes when one clicks outside the form area.
Here´s the script with the function close on click outside the form:
============================
jQuery(function($){
jQuery('.offertknapp').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});
jQuery('.popup').click(function(e) {
jQuery(e.target).hasClass("popup") && jQuery(e.target).css("display", "none")
});
});
============================
And hey guys, youre doing a great job over at ET, I´m having a lot of fun learning WP/Divi way to build webpages..:)
Thanks! That's a really useful improvement, thanks for sharing!
Hello, I particularly appreciate your tutorials, even if I don't understand English, I learn a lot! You have a mastery that makes you dizzy!
I looked and tried to reproduce your presentation on "How to Create a Contact Form on Click with Divi", unfortunately it dates from 2017 and I did not succeed in making it. The version is different and I'm a little confused ...
Very precisely, at 2 minutes and 43 seconds in your tutorial, the do not have the same options; in your tutorial, we see "Row Settings - Background and Admin labels" only and on my version I have the two columns, one above the other that we can configure and then I have the Link options , Background and Admin Label.
Would you be so kind as to tell me how to configure this part, please?
Hi Mark, I love your tutorials and always learn something new. My popup works perfectly, but I want to apply it to more then one button on the same page. Can you maybe advice on this?
x2
This was a great tutorial. Thank you for making it. I have it up and running just as it should on a test page. However, When I attempted to duplicate this for each of my team members it overlapped each of the popup windows with each person I created it for. Is there a way to do it in several instances on the same page?
Thanks. How do I have multiple buttons on a single page for the same form or for multiple forms.
Hello Dear. Love this tutorial!!!
How could I save this page with the button or save sections to insert this button inside other pages in specific places?
Hi Alexandre! 👋
You can copy the Button/Contact Form in the Module Settings or save them to the Modules to the Divi Library, but then you also will have to adjust the Button and the Contact Form 👍
If you have any further questions, please, get in contact with our Support Team for assistance:
www.elegantthemes.com/members-area/
How do you make the large X close button on form smaller or adjust colors and sizing?
It's really helpful tutorial, I like it & thank you so much!
Hello :) Your video is exactly what I need to create a contact form from click. Thank you so much! Can you please tell me where you got the stuff that you pasted on the 'Before' and 'Main Element' fields under Custom CSS? Thanks again!
Our support team might be able to assist you with that. Head out to www.elegantthemes.com/members-area/help/ to open a chat. 😊
Hi, that's really great. How to modify this popping up different contact form depending on which of two buttons a customer clicked on: contact form 1 (email message) popping up when clicking on button 1, and contact form 2 (Telefon) popping up when clicking on button 2?
Hi Lucie! 👋
Feel free to get into contact with our Support Team for further assistance:
www.elegantthemes.com/members-area/
@@elegantthemes so sorry, am no developer, just doing this once for my new homepage, thus I am not a member. Still thanks for the advice
Appreciate the work you put in, but I can't agree this to be called a 'tutorial' as nothing was learnt about why things were being done. It would also maybe helpful to actually 'teach' how to create in this case the plain form popup first, that way we 'learn the basics'? After that, can move onto the styling options if you wish. Hope you are OK with this suggestion?
The DIVI contact form is showing mixed results when my customer receives it. On the form itself, the Comments/description is on the bottom. When he gets the results, it's on the TOP. He does not like that. Thanks for any help.
Can i use the same Method from a Menupoint to open a Contact Formr and not from a button
Hello, Good Day! How to create a video popup similar to this one? Because if I use this style, the video still playing after clicking the close icon. :)
Are you able to do a contact click video with 2x buttons? Example; If you have two different contact options, 1 for a specific person and 2 the other specific person.
Hello David. Fo that I would use conditional logic, it will work much better.
I was able to use this tutorial to create my pop up form so thanks for that. However, it was way too rushed and required way too much back and forth. I had to keep pausing the video and going back and forth so that I could use my own font sizes, colors, button sizes, colors, background colors and literally every other detail. It was also WAY too rushed. It was hard enough keeping up much less understanding everything that was happening due to lack of explanation. A popup form feature will DEFINITELY make this whole process alot easier.
I have designed the form like this but it not looks good in mobile.. do you provide the mobile setting
Hi guys.
Thanks for a very good topic. But some modules depress me. For example, contact form. Such a weak set of options. Very disappointed with this work :(
- You cannot change the distance between the fields.
- You cannot change the location of the button.
- It is impossible to make the whole form in one line without problems.
- no checkbox for privacy policy
- etc
Only the simplest style changes. This I myself can correct in CSS styles.
The contact form is one of the most important modules on the site, and you do not pay due attention to this. We have to stack some kind of third-party plugins to look for stupid solutions.
Be real guys make a well-customizable contact form.
From Russia with love ;)
It's not for the new divi. Where can I find the updated tutorial?
Agree! I would also like a new tutorial on this!
Would like to know as well
I followed this tutorial, and it is working great. I used the display:none; code in the section where the text boxes and contact form module are located. Now when I view the page in the visual builder, that section doesn't appear when I hover over the area, and am not able to edit it. How can I get to it so that I can edit it?
Well, I discovered the answer myself... I found the "wireframe view" which reveals the hidden section. :-)
Glad you found it out! Feel free to open a chat with our Support team if you have any other concerns. 😊
@@elegantthemes Can you help me with resizing this X button. I've tried with blurb-design-icon width- but nothing helps?
I attempted to save this to the library but when I add it to a new page the functionality stops working and the pop up will not open. Any advice?
The problem with this guys tutorial is he is just doing stuff w/o even explain why it needs to be done. It's like, we just need to follow it w/o understanding why things are being done.
well, you are using a drag & drop builder
very lovely tutorial but the pop up disappears as 5secs later... please kindly assist with a fix for this.
This doesn't work at all on mobile. Any feedback on this?
Thanks for the tutorial Mak
Its very helpful, However i followed all the step your made in this tutorial and it worked perfectly only that the popup close just after seconds
The page refreshes and close automatically, which means visitors can't really use it..
Please help me out .what could be wrong?
I am having the same issue. Did you find a way to fix it?
Fixed it.
You can style the button however you want but you have to make sure that the button URL starts with ‘#’ followed by something else. You can’t just leave it blank or use the ‘#’ character only. By adding ‘#’ and some text, the page will not move once you click on the button. If you leave it blank, the page will refresh on click. And if you only use ‘#’, you’ll get sent to the top of the page.
Hello, very cool this tuto and tank you for all of your tuto, but i have probleme, we can't scroll in the pop up, and for the mobile i have no access to the send button at the bottom and the X button at the top :( . Do you have a idea?
Hello, Delphine. I have contacted our support team regarding this, will let you know as soon as I get a response.
Oh! Great, thank you.
Hey Delfine, did you got response from ET? I got the same issue on mobile. Maybe you found a workaround, didn't you/
Hey, your popup looks great, however after engaging the button the popup window appears for 5 or so seconds and then disappears. Can anyone suggest how to fix it?
I'm having the same problem on mine
Hello, The present captcha system doesn't protect from spamming. What about a reCaptcha option (without having to use third party) ?
Yes, you can use Google reCaptcha for our Divi Contact Form. 😄 Here's an article that can help: bestwebsoft.com/recaptcha-and-divi-compatibility/
I followed this step by step and my form looks nothing like this and the x - icon to close it is not there, either.
:( no work for me...i do step by step and when press botton only change url with more # but dont show the form.
it won't work on mobile if you use menu link to display the popup
Hello there, it is possible to automatic Send Confirmation Emails to Users after click the Form Submission button?
Hey Giovanni! I'm afraid it's not possible as of the moment. However, I will forward this feature request to our development team for consideration.
Can you let me know a little more about why this feature would be helpful to you? The more information I can pass on the better. 😃
@@elegantthemes Thank you very much, that would be great :)
@@elegantthemes Ohh yes for sure, this feature would be great for online store purpose, imagine you´ve already bought your new brand camera but you haven´t receive any information or confirmation after that your purchase...
Well with automatic response noreply@ or at least an email from your company, you are ensuring to your client security and comfort, that you have the information about the purchase, and that should be inmediately after the payment.
This will help a lot of people who work with ecommerce stores.
@@elegantthemes Hello again :) i was wondering if you got any answer about the issue we were talking about a few weeks ago, thank you again!
Still having problem getting the scroll to work on mobile...can't get to submit button
Sorry to hear that. Our Support Team would be happy to assist you on this. You can head out to ow.ly/JGUc30oOfwH and open a chat. 😊
How do I use this with the full width header buttons?
make the menu link a custom link and add the class .button as in a cta button as you can see in my menu link Contact in desktop version graphicdesignireland.com/website-design-clare/
ty
how to make form divi to chat whatsapp
It doesnt work in my end :/
Doesn't work 😒
OMG ES HAT DOCH FUNKTIONIERT
seids trotzdem opfer
This guy make things complex so you hate wordpress ..
You could have taught this in much better way ...I'm not a beginner to code but even to me this seems a bit daunting....this tutorial needs to be redesigned....It can solve the specific purpose but it isn't good enough to understand the concept behind it
I have seen the worst of divi when it comes to forms. There is no easy way to connect a form to a database, there is no easy way to change the button size and position, there is no easy way to change the positions of the form elements.
Hey Ankush! If you need further help, our Support Team would be happy to assist you . You can head out to ow.ly/JGUc30oOfwH and open a chat. 😊
This is a very bad tutorial, you created the form AFTER making it invisible instead of doing it first so we could all see how it is turning out and changing it to our likes.
Ich hab kb mehr Elegant Themes ist so ein bs
Was lachst du so das funktioniert auch nicht
That was an hour of my life wasted. Didn't work. Do you think its because I added it to a button on a global footer?
Our support team would be happy to help you with that! Just open a chat and the help is on its way. www.elegantthemes.com/members-area/help