Canvas Support

MESSAGE FORM ALERT (FOR JS and CSS)

3 replies · opened Sep 22, 2023

Jjavjav2014Sep 22, 2023

Thank you so much for your reply. The only problem I have now is that the form messages are not displayed in their entirety.

I refer to these messages:

/—-—-—-—-—-—-—-—-—-— Form Messages —-—-—-—-—-—-—-—-—-——/

$message = array( ‘success’ => ‘test We have successfully received your Message and will get Back to you as soon as possible.’, ‘error’ => ‘Email could not be sent due to some Unexpected Error. Please Try Again later.’, ‘error_bot’ => ‘Bot Detected! Form could not be processed! Please Try Again!’, ‘error_unexpected’ => ‘An unexpected error occured. Please Try Again later.’, ‘captcha_invalid’ => ‘Captcha not Validated! Please Try Again!’, ‘captcha_error’ => ‘Captcha not Submitted! Please Try Again.’ );

The only message that appears is success. But located on the right side up and it doesn't look good there. Place the body codes indicated in the tutorial and also put the JS codes. and I verified that the js/functions directory was there.

I would very much like you to tell me the steps to correct and I can do it and thus know what the problem was. We both save time by avoiding asking you again.

Also I tried enabling messages in JS but they don't work. I take this opportunity to ask what is the correct way to update your template to the latest version.

Thank you so much
Thank you so much

SSemicolon WebSTAFFSep 22, 2023

Hello,

The Messages are displayed according to the Status of the Processing on the Page. So, if the Form Submission is a success, the Success Message will be displayed, and if there is an Error, the Error Message will be displayed. Currently, the Messages are displayed as Toast Notifications.

If you would like to Display an Inline Message, simply add the data-alert-type="inline" Attribute to the .form-widget DIV. Example:
[ch_pre][/ch_pre]

More Documentation on Alert Types and Advanced Alerts can be found here: https://docs.semicolonweb.com/docs/forms/alerts/ .

Once we release updates, we add lists of all the Changed Files in the Changelog, you will need to simply Update the specific Files according to the File/Code Changes mentioned in the Changelog: http://docs.semicolonweb.com/docs/changelog for the Latest Version.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjavjav2014Sep 24, 2023

Thank you very much for your quick reply. I tried to solve the problem by following your instructions. There was an improvement since the form message was better positioned. But it only shows the success message, it doesn't show the others.
At the bottom of the page I also have the JS link placed. <script src="js/functions.js"></script>

I'm going to leave you the form code so you can see if there is any error there.

FORM CODE:
<div class="content-wrap pb-0">
<div class="container">
<div class="row justify-content-center" style="margin-bottom: 51px;">
<div class="col-md-7">
<h2 class="display-4 text-dark fw-semibold ls--2 mb-3" style="text-align: center;">Consulta tu caso</h2>
<p class="text-dark" style="text-align: center;">¿Necesitas una solución lo antes posible?<br>Pronto te llamaremos.</p> 

                       &lt;div class="form-widget mt-5" data-alert-type="inline"&gt; 
&lt;div class="template-contactform-ready"&gt;

<div class="template-contactform-processing">
<div class="template-contactform-complete">
<div class="template-contactform-complete template-contactform-success">
<div class="template-contactform-complete template-contactform-error">

                                    &lt;div class="form-result"&gt; 
                              &lt;form class="mb-0" id="template-contactform" name="template-contactform" action="form.php" method="post"&gt; 
                                    
                                        &lt;div class="form-process"&gt; 
                                        
                                            &lt;div class="css3-spinner"&gt; 
                                                &lt;div class="css3-spinner-scaler"&gt;&lt;/div&gt;                                                     
                                            &lt;/div&gt;                                                 
                                        &lt;/div&gt;                                             
                                        &lt;div class="row"&gt; 
                                            &lt;div class="col-md-12 form-group"&gt; 
                                                &lt;input type="hidden" id="template-contactform-autodespido" name="template-contactform-autodespido" value="CONSULTA AUTODESPIDO" class="form-control required" checked="checked"&gt; 
                                            &lt;/div&gt;                                                 
                                            &lt;div class="col-md-4 form-group"&gt; 
                                                &lt;label for="template-contactform-name"&gt;Nombre
                                                    &lt;small class="text-danger"&gt;*&lt;/small&gt;
                                                &lt;/label&gt;                                                     
                                                &lt;input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="form-control required"&gt; 
                                            &lt;/div&gt;                                                 
                                            &lt;div class="col-md-4 form-group"&gt; 
                                                &lt;label for="template-contactform-email"&gt;Correo
                                                    &lt;small class="text-danger"&gt;*&lt;/small&gt;
                                                &lt;/label&gt;                                                     
                                                &lt;input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email form-control"&gt; 
                                            &lt;/div&gt;                                                 
                                            &lt;div class="col-md-4 form-group"&gt; 
                                                &lt;label for="template-contactform-phone"&gt;Teléfono
                                                    &lt;small class="text-danger"&gt;*&lt;/small&gt;
                                                &lt;/label&gt;                                                     
                                                &lt;input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="required form-control"&gt; 
                                            &lt;/div&gt;                                                 
                                            &lt;div class="w-100"&gt;&lt;/div&gt;                                                 
                                            &lt;div class="w-100"&gt;&lt;/div&gt;                                                 
                                            &lt;div class="col-12 form-group"&gt; 
                                                &lt;label for="template-contactform-message"&gt;Mensaje
                                                    &lt;small class="text-danger"&gt;*&lt;/small&gt;
                                                &lt;/label&gt;                                                     
                                                &lt;textarea class="required form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"&gt;&lt;/textarea&gt; 
                                            &lt;/div&gt;                                                 
                                            &lt;div class="col-12 form-group d-none"&gt; 
                                                &lt;input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="form-control"&gt; 
                                            &lt;/div&gt;                                                 
                                            &lt;div class="col-12 form-group"&gt; 
                                                &lt;button class="button button-rounded button-xlarge m-0 text-center fw-medium text-transform-none ls-0 fw-normal" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit"&gt;Enviar Mensaje&lt;/button&gt;          
                                            &lt;/div&gt;                                                 
                                        &lt;/div&gt;                                             
                                        &lt;input type="hidden" name="prefix" value="template-contactform-"&gt; 
										&lt;input type="hidden" name="subject" value="Message from Contact Form test"&gt;
										&lt;input type="hidden" name="replyto" value="template-contactform-email"&gt;
                                    &lt;/form&gt;                                         
                                &lt;/div&gt;                                     
                            &lt;/div&gt;                                 
                        &lt;/div&gt;                             
                    &lt;/div&gt;                         
                &lt;/div&gt;
SSemicolon WebSTAFFSep 24, 2023

Hello,

The Codes you are using is incorrect! The .template-contactform-ready and other similar Classes are added automatically to the `` Tag by JS Codes and you should not be adding them manually. Make sure that only the Structure provided with the Package Files are followed. An example of using the JS Events can be found here: https://canvastemplate.com/forms-feedback-fixed.html .

Not all the Messages can be displayed at once. The messages will only be displayed based on the Status of the Form as we have explained in our earlier reply. Try removing the template-contactform-botcheck Field from the Form and then submit the Form, an Error Message will be displayed based on what is set in the include/form.php File.

We could be misunderstanding what you are trying to achieve here, so would be great if you can provide us with more examples of your use case. 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.

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