Divi Theme Create A Popup Form With No Plugin 👈👈👍👍
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- Divi Theme how to create a popup contact form from a button. Today we will be demonstrating how to create a popup contact form that can be triggered from a button click. First we will create the form and give it fixed positioning so it pops up where we want it. Then we will create a custom button using a script and a function. this button will be used to hide or show the form when clicked.
We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
This is a great feature to have on your website, and very easy to do. There is a little bit of coding involved today to build this feature. Don't let the coding put you off, it is very easy, and any code I write today I will display on the screen for you to copy and use as you wish. CSS is a great thing to learn, so I encourage you to try out some of your own ideas to get familiar with it. You can't break your site with CSS, if something doesn't work simply delete the code to return back to how the site was previously.
So, follow along with the video and see how to create a popup contact form from a button using the Divi theme.
For more information on the Divi theme, check out our Divi playlists below.
Playlist page for more videos on this: / system22net
Divi Supreme Modules Playlist: / watch
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Full Ecommerce Site Build Playlist: / watch
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: • Divi 4 Add A Contact F...
Divi 4 Theme Create An Ecommerce Store In One Hour: • Divi 4 Theme Create An...
Try out the Divi theme: bit.ly/TryDiviNow
Divi Supreme Modules Plugin 10% Off: bit.ly/DiviSup...
Divi Brain Addons Free Plugin: brainaddons.com/
My Blog : web-design-and...
Check out our playlist page for more videos on this: / system22net
--------- RECOMMENDED PLAYLISTS ---------
Elementor Ecommerce Store: • Elementor Ecommerce St...
Divi Snippets: • Divi 4 Snippets Divi T...
Divi 4 Ecommerce Store: • Divi 4 Ecommerce Store...
Bootstrap 4 Basics: • Bootstrap 4 Basics Ind...
Elementor: • Elementor Wordpress Bu...
WordPress Tips: • Wordpress 2020 Theme C...
--------- RECOMMENDED VIDEOS: ---------
Bootstrap 4 Complete One Page Scrolling Website Tutorial : • Bootstrap 4 Complete O...
Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: • Elementor Wordpress Bu...
Bootstrap - How to edit a bootstrap template: • Bootstrap - How to edi...
Divi Add a live facebook feed to your divi or any wordpress website: • Divi Add a live facebo...
Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: • Divi 4 Theme How To Bu...
Elementor Wordpress Builder How To Build A Parallax Section: • Elementor Wordpress Bu...
--------- SOCIAL MEDIA ---------
Follow what I'm doing on:
Facebook: / system22.net
Twitter: / 22itsolutions1
Linkedin: / jamie-henry-546b7377
Support the channel: paypal.me/syst...
Courses I teach: www.udemy.com/...
Subscribe: / @system22
#TH-camTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite
![일상 속 기분 좋음 [Proto disco meme]](http://i.ytimg.com/vi/DwmEIaZ7XGQ/mqdefault.jpg)
Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists
Sub: th-cam.com/channels/Yeyetu9B2QYrHAjJ5umN1Q.html
I did this and it worked!! awesome! thank you.
Fantastic!
This is a great tutorial but complete insanity that we have to go through all of this to have something as simple as a modal form. This is a standard feature in practically every other Wordpress premium theme I've used, why is it not so in Divi?
Might want to suggest that to the Elegant themed team @markn26 - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Awesome Thanks.. Best of luck to you.
Glad to help Shekhor Sarker - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Well done! This is one of the best tutorials you have ever made!
Glad it was helpful!
Can i use this for e commerce site? (using catalog mode) instead of add to card button can use for make an inquiry & popup contact form to collect details? Thank you.
Yes @htkdesigns6478 - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 Thank you.i ll try
Awesome!
Amazing tutorial, thank a lot! 🎉
Glad to help Corinna Eichholz - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
I absolutely LOVED this tutorial!! Thank you!!! I just have one issue. Once I click the button, my pop up module appears at the back of my content. How do I bring it to the front?
Glad to help kitzia salgado - Try changing the z-index, this video may help: th-cam.com/video/cTrtXeHj17c/w-d-xo.html - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
it would be nice if we can dim background and add close button like "X".
I'll look into it when I can Miljko Milanovic - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists
Why can't the form pop up after pressing the button?
Make sre you are using the correct CSS IDs @user-xc8wj3uo1v - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 I followed the video every step of the way and corrected it several times, but still couldn’t achieve it. Click to pop up.
Thank you for the tutorial, help me a lot. but I have one problem, the close button were cropped out, any suggestion
Not sure why that is Suwastama Tumbuemas Sejahtera - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Thank you so much for this tutorial! I would need to make the popup automatically showing on opening my home page, could you suggest how I should do? :) Thanks!!
Glad to help Rina Pizz - Easiest way would be to use Divi supreme plugin as in this video: th-cam.com/video/oEYBxDVgpr8/w-d-xo.html - Check out our Divi hover effects playlist page for more videos on this: th-cam.com/video/5cdjX5x93ss/w-d-xo.html&list=PLqabIl8dx2wpIaNGilkQCdmr9sJiy72X8 - Please like, share and subscribe if you have not done so already - Thanks!
The form submission thank you message does not go away unless you click the button again, which no one will do. Is there code to make that message disappear after a few seconds?
I'll look into it when I can Ryan Buchanan - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
How can i add a little X button on the popup that closes it?
Glad to help @CyrusSlade - Should be one there by default, it is white so if you are using a white background you will need to change the color of it in the CSS code! Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Will this work if there's a separate pop-up, i.e. chatbot, available on the page? I followed the whole tutorial but it's not working. :(
Not sure Cholo D. - Can't think of a reason that it wouldn't! - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
did you check the code:
PREORDER
.pbtn {
background: #ea01c9;
color: #ffffff;
border: none;
padding: 15px 20px;
font-size: 20px;
transition-duration: 0.75s;
}
#popup1 {
display: none;
}
.f1 {
display: block !important;
}
function myFunction() {
var element = document.getElementById("popup1");
element.classList.toggle("f1");
}
Hello!
Great video, one issue is that my contact form doesn't actually ever pop up. I've changed the z axis settings to be the most prominent but can't see why it isn't working.
Not sure why that is Chris C - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Hi Chrisc1428, I have the same problem it doesn't pop-up, did you ever fix yours? Thanks Ann
@@Ann453lovemusic
I had the same problem. Try this code:
PREORDER
.pbtn {
background: #ea01c9;
color: #ffffff;
border: none;
padding: 15px 20px;
font-size: 20px;
transition-duration: 0.75s;
}
#popup1 {
display: none;
}
.f1 {
display: block !important;
}
function myFunction() {
var element = document.getElementById("popup1");
element.classList.toggle("f1");
}
@@novovision4080 Why can't the form pop up after pressing the button? Everything else is fine except that the form disappears and cannot pop up when clicked again.
how can i add a little X on the top of the popup that closes it?
Glad to help @CyrusSlade - Should be one there by default, it is white so if you are using a white background you will need to change the color of it in the CSS code! Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Amazing! Could you provide the code?
Glad to help Marco Fernández - Unfortunately I can't post the code here because of the pointed brackets - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
PREORDER
.pbtn {
background: #ea01c9;
color: #ffffff;
border: none;
padding: 15px 20px;
font-size: 20px;
transition-duration: 0.75s;
}
#popup1 {
display: none;
}
.f1 {
display: block !important;
}
function myFunction() {
var element = document.getElementById("popup1");
element.classList.toggle("f1");
}
@@novovision4080 I followed the video every step of the way and corrected it several times, but still couldn’t achieve it. Click to pop up.