X3Photo Gallery Forums

Kat · 05 Nov 2016, 11:57

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 ;

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 :

.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 ? ;

<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

05 Nov 2016, 13:54

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:

.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.

Kat · 07 Nov 2016, 05:19

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;

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

07 Nov 2016, 10:43

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 ...

07 Nov 2016, 10:45

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.

Kat · 07 Nov 2016, 15:35

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.

Kat · 07 Nov 2016, 15:52

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.

X3Photo Gallery Forums

Custom success message when mail sent7 posts

Custom success message when mail sent

Re: Custom success message when mail sent

Re: Custom success message when mail sent

Re: Custom success message when mail sent

Re: Custom success message when mail sent

Re: Custom success message when mail sent

Re: Custom success message when mail sent