As you already know....I love this template. At the moment I'm using the Switch Checkbox but I have an issue. When I put 'Required' into the class field, up pops the 'This Field is Required' text. I click it and then the checkbox disappears. Is that meant to happen?
Also, is it possible to have the checkbox go red instead of error text?
Hello,
Thank You so much for the Kind Words! :)
For better error message management, please ensure that the Inputs are added within the .form-group DIV. Example:
<div class="form-group">
<div class="switch">
<input id="template-contactform-default-switch" name="template-contactform-default-switch" class="switch-toggle switch-toggle-round required" type="checkbox"> <!-- required -->
<label for="template-contactform-default-switch"></label>
</div>
</div>Then simply use the following code:
.switch + label.error {
display: block !important;
}
.switch input[type="checkbox"].error + label {
border: 1px solid red;
}This will definitely work fine. You can simply choose to use the CSS Block that works best for you. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thanks for the error reply. I really appreciate it.
Can I ask....is there a reason it disappears? When I press the button before checking the checkbox, I get the red error now which is great. But i think check the checkobox and it dosappears. It's not really the end of the world but curious more than anything.
Hello,
The Switch Input is based on the <label> Styling. So, when the .error is added it messes up the Switch functionality. Can you consider using this code instead and see if this works fine for you?
<div class="d-flex align-items-center">
<div class="form-group">
<div class="switch">
<input id="template-contactform-default-switch" name="template-contactform-default-switch" class="switch-toggle switch-toggle-round required" type="checkbox"> <!-- required -->
<label for="template-contactform-default-switch"></label>
</div>
</div>
<label class="media-body text-muted ml-3" for="template-contactform-default-switch">
...
</div>Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Good morning. Thanks for this. It still disappears but that's okay. I'll have to decide whether to hold onto it or choose another one. I just love it's design. That's why I wanted to keep it.
Hello,
Apologies for the Inconveniences caused!
Please wait for it while we check this. It works perfectly for us and the Switch does not disappear when valid. We are not sure what is causing this on your Website. Allow us some time while we check the codes. We want this to work for you. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Hello,
Thanks for your Continued Patience!
We have checked this out and we are not really sure why this doesn't work for you! We have attached a Screencast of the working version with your codes. We have changed literally nothing and using the same codes as provided to you. We are attaching the file: https://drive.google.com/file/d/1aD5Wks9zdQ8A2OFed2YRipCPBBxjDhPT/view?usp=sharing as well for your use.
Thanks for your Patience. Let us know if you are still facing any further issues with this.
I figured out the problem. I removed some code from my form because I needed it to work with Paypal (which I did get working). But for me to do that, I had to remove this line;
<div class="form-widget" data-alert-type="inline">...</div>
Becasue it wouldn't send to PayPal if it was in there. I've noticed now that when i add that line, the button works but PayPal doesn't. Just thought I'd fill you in.
Hello,
Thanks for the Update. It does appears like some conflict with JS PayPal might be using. We will keep track of this and run tests to try blending this together so that the Switch Validation works as expected.
If you are using any specific PayPal resource please let us now so that we can try integrating this and check where the issues are. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
The only PayPal resources I'm using is the IPN.php file they provide when trying to send info to payPal regards the forms. So I have a form and the action on it (process.php) is towards sending those form details to a database. And in the process.php file is the link to the ipn.php file.
I don't see any JavaScript files. If you'd like, I'm more than happy to send you the full file to test.
Hello,
Thanks for more details on this. We will check this out shortly.
Meanwhile, 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