7 replies · opened Nov 29, 2021
Hey I saw a recent post on this and it said I needed to put custom js code to make a modal show up.
What I want to have happen is that when the user puts their name and email into my form, they are shown a modal that pops up and congratulates them on their purchase while also having a playable video.
Is this possible, and if so, what would the custom js code to open this modal look like?
thank you
Hello,
Absolutely Possible!
You can easily use jQuery Events to display Modals. Example consider using the following code:
[ch_pre type="js"]jQuery('#template-contactform').on( 'formSubmitSuccess', function(){
// Your JS Codes here to open the Modal
});[/ch_pre]
Replace #template-contactform with your actual Form ID. You can find more Documentation here: http://docs.semicolonweb.com/docs/forms/alerts/ .
You can consider using the Modals from here: http://themes.semicolonweb.com/html/canvas/modal-popovers.html .
Finally, you can use this Code:
[ch_pre type="js"]jQuery('#template-contactform').on( 'formSubmitSuccess', function(){
var modalToggle = document.getElementById('#my-modal')
myModal.show(modalToggle)
});[/ch_pre]
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you for the help. As for the JS code, do I add it to the bottom of my HTML page under the js/functions.js file?
Hello,
The Modal HTML Codes can be added anywhere within the #wrapper DIV. For the JS Codes, yes, after the js/functions.js JS File Linking.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I was able to put the code together, however I'm having some errors. I suspect this is because for some reason the form isn't registering as being a success when I press submit(even though my Mailchimp account is receiving the emails). Attached are some screenshots of my code.
Notice that on the PHP file, I made the alert show up even on failure. This is because for some reason it wasn't showing up as a success even though Mailchimp was getting my contact info.
also thank you for the quick support!
Hello,
Thanks for your Kind Patience!
Currently, only the Standard Forms support JS Events, not the Subscription Forms. Custom JS Codes will be required to make this work. We have attached the Updated js/plugins.min.js File, so you can simply replace it with the existing one.
This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
wow thank you guys so much, you even went out of your way to make the custom code for me.
Canva is simply the BEST
Hello,
Thanks so much for the Kind Words! Very Happy to Help! :)
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard