Page 1 of 1

Custom success message when mail sent

Posted: 05 Nov 2016, 11:57
by Kat
Hi Karl,
How can i customize the  message when mail form is  sent like "your message has been sent successfully"   or  a "thank you" page. When send, the text still show like this ;
Image
I can change in the css, the content which is now a little square for the checkmark,   but there not much more i can do :
Code
.fa-check::before, div.form-success::before, .x-list-check li::before {
    content: "your message has been sent successfully";
}
or  customize this div, if so,  where  to add in contact custom content ? ;
Code
<div class="form-success" style="opacity: 1; transform: translateY(0px);"> your message was sent.....</div>
Also, when the mail is sent one need to refresh the page to see again the contact page, instead of just clic in the nav menu. Is it possible to change that somehow ?

Thank you for your help,

Kati

Re: Custom success message when mail sent

Posted: 05 Nov 2016, 13:54
by mjau-mjau
Kat wrote:Hi Karl,
How can i customize the  message when mail form is  sent like "your message has been sent successfully"   or  a "thank you" page.
Currently not possible. I wanted to keep it simple ... but I will add options for this in a near-future release. It will likely be part of our plans to create language/translation files for frontend.
Kat wrote:I can change in the css, the content which is now a little square for the checkmark,   but there not much more i can do :
Code
.fa-check::before, div.form-success::before, .x-list-check li::before {
    content: "your message has been sent successfully";
}
Sorry, did you actually try this? It could work, but I would expect the font size to be enormous, and you would likely need to change the font of that element also, since it's styled for a large ICON using font-awesome font. Actually, better you do this instead:
Code
.form-success:after {
  content: "Thank you blah blah ...";
}
You will probably need to assign a font-size and even a font, since it inherits the icon. Perhaps you need to hide the icon also ... Assuming you know a bit CSS ...
Kat wrote:or  customize this div, if so,  where  to add in contact custom content ? ;
Code
<div class="form-success" style="opacity: 1; transform: translateY(0px);"> your message was sent.....</div>
That is injected by JS dynamically, so not a solution.
Kat wrote:Also, when the mail is sent one need to refresh the page to see again the contact page, instead of just clic in the nav menu. Is it possible to change that somehow ?
Is it really necessary for the visitor to reload the contact form right after sending an email? Seems unproductive. Fixing this would require us to change logic so that visitors can click links for the same page they are already on.

Re: Custom success message when mail sent

Posted: 07 Nov 2016, 05:19
by Kat
mjau-mjau wrote:Currently not possible. I wanted to keep it simple ... but I will add options for this in a near-future release. It will likely be part of our plans to create language/translation files for frontend.
Thank you for this future improvement !
mjau-mjau wrote:Sorry, did you actually try this? It could work, but I would expect the font size to be enormous, and you would likely need to change the font of that element also, since it's styled for a large ICON using font-awesome font. Actually, better you do this instead:
Code
.form-success:after {
  content: "Thank you blah blah ...";
}
Yes, but then i ended with a little square before the text, so i just leaved this way and it's work ok;
Code
div.form-success::before {
    content: "Message sent successfully ! Thank you for your visit";
mjau-mjau wrote:You will probably need to assign a font-size and even a font, since it inherits the icon. Perhaps you need to hide the icon also ... Assuming you know a bit CSS ...
It's what i did in custom css > div.form-success { adjusting the margin-top so it's show in the middle of the page and the height so my background image show entirely, font size, family, color; deleted the icon. It's work fine. I send you the result by pm.  
mjau-mjau wrote:Is it really necessary for the visitor to reload the contact form right after sending an email? Seems unproductive. Fixing this would require us to change logic so that visitors can click links for the same page they are already on.
I did it cause i had to test the sent page several time. It would be easier to just click back on contact, than go to another page, click on contact again or reload the page. But i understand the way you did as the visitor don't need to come back to the form once sended, unless they want use it again.

Thanks

Kati

Re: Custom success message when mail sent

Posted: 07 Nov 2016, 10:43
by mjau-mjau
Good job!
Kat wrote:I did it cause i had to test the sent page several time. It would be easier to just click back on contact, than go to another page, click on contact again or reload the page. But i understand the way you did as the visitor don't need to come back to the form once sended, unless they want use it again.
I guess we could have an [OK] button below the success msg/icon, which would simply show the contact form again. This way we achieve a win-win situation without confusion for the visitor. Everything noted down for future tasks ...

Re: Custom success message when mail sent

Posted: 07 Nov 2016, 10:45
by mjau-mjau
Btw, in the coming release later this week, you can add custom forms to X3. Basically, with a little html, you can add ANY form items (inputs, checkboxes, radiobuttons etc) to the contact form, and they will render in the sent email.

Re: Custom success message when mail sent

Posted: 07 Nov 2016, 15:35
by Kat
mjau-mjau wrote: I guess we could have an [OK] button below the success msg/icon, which would simply show the contact form again. This way we achieve a win-win situation without confusion for the visitor. Everything noted down for future tasks ...
I was thinking about this, like adding a link "back" to form. So thank you for your given solution.

Re: Custom success message when mail sent

Posted: 07 Nov 2016, 15:52
by Kat
mjau-mjau wrote:Btw, in the coming release later this week, you can add custom forms to X3. Basically, with a little html, you can add ANY form items (inputs, checkboxes, radiobuttons etc) to the contact form, and they will render in the sent email.
Cool ! I tried add a <select> drop-down menu to the form, but i will wait for the next release.
I will add some other proposals in features.