How to return customized registration confirmation and payment button page?

This topic has 12 replies, 2 voices, and was last updated 6 years, 1 month ago by Anonymous.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
Sat 13 Oct 2018 at 21:40 #58547

Anonymous
Inactive

By default when someone submits an RSVP form the “Your registration has been initiated!” and payment button and information appear in place of the form, with rest of page content the same.

How do I set it up so that they appear in a custom page (e.g. a page without all the other content around the form, or whatever custom content I want after submit is processed)?

Can’t find anything in the docs.
Is it the “booking recorded html format” in RSVP settings tab?

If so, I need to know what shortcodes and/or placeholders I would use in a custom template to display the payment form (div-eme-payment-form) and other default response elements. Again, can’t find or don’t know where else to look.

If that’s not it, then how does one do this?

thanks,
John

Sat 13 Oct 2018 at 21:56 #58548

Franky
Keymaster

That is not possible, the form indeed gets replaced by the payment form. Of course the text above/below the payment info can be changed to your liking setting “RSVP Payment form header format” and similar), but the rest of the page will always surround it. The placeholders you can use in there can be found in the doc: https://www.e-dynamics.be/wordpress/category/documentation/7-placeholders/7-4-rsvp-mails/
What you *can* do is hide other parts of your page (using jquery or plain js) by setting the code to hide it also in “RSVP Payment form header format”.

Sat 13 Oct 2018 at 22:42 #58549

Anonymous
Inactive

Thanks for the quick response.

This use case is an event page where due to content layout and length, the payment form is outside the visible page area when the page refreshes after submitting the form. User cannot see message or payment button in most cases.

I will submit a feature request. It is very useful (and commonly implemented) for a form submission system to be able to return some other page/URL, or to modify any/all content of the returned page via templates.

thanks,
John

Sat 13 Oct 2018 at 23:11 #58550

Anonymous
Inactive

PS – beyond just complaining… 🙂

A seemingly simple idea for a fix that ought to work in most situations:
Confirmation and payment form code inserted in page has anchor at top, ex:

URL used for refresh adds that anchor to event URL:
http://domain.tld/events/17/some-event-name/#payment-top

Then the submission confirmation text and payment button will appear at top of whatever the visible window area is.
Solves the basic problem of response visibility in window without needing ability to return different page/URL or different template.

Still would be good to have the latter but this tweak would be “good enough” for now.
I will even test the hack if you can tell me where in the EME fileset I would find the code that handles form submission and refresh (assuming it’s easy to add anchor to URL, maybe it’s not…).

thanks,
John

Sat 13 Oct 2018 at 23:45 #58551

Franky
Keymaster

EME had a separate return page in the past, and the general request was for ajax form submission. So no going back on that one (and as a result the anchor won’t work either).
However, in the js code I already return to the result of form submission on a page. But I took a look at that code and while I do force the page to go to the return content of form submission, it might not happen when the payment form shows: look in eme.js for
$(document).scrollTop( $(‘#eme-rsvp-form’).offset().top – $(window).height()/2 );

I’ll take a look at that …

Sun 14 Oct 2018 at 00:05 #58552

Franky
Keymaster

This change should work:
https://plugins.trac.wordpress.org/changeset/1956346/
(or download and replace the referenced eme.js file)

Sun 14 Oct 2018 at 00:27 #58553

Anonymous
Inactive

Just replaced eme.js with your change on my server and did a couple quick tests.

Works better on regular laptop screen with reasonably wide browser window – appears mid-window.

On a narrow window it appears near bottom and only notice and upper part of payment handling text appears, button and other text is below the fold.
The narrower the window, the lower it appears.

From my quick test, if you made it 1/5 or at most 1/4 down the window it would probably be better on any window size. People start scanning from top of window whenever content refreshes (eye-tracking research).

thanks,
John

Sun 14 Oct 2018 at 00:39 #58554

Franky
Keymaster

Did you test on small screens, and not just by resizing the screen after the message shows? Because that makes a difference … in my test here the message shows just fine even on extremely small screens.
Or maybe try
$(document).scrollTop( $(‘div#eme-rsvp-addmessage-ok’).offset().top – $(window).height()/2 + $(‘div#eme-rsvp-addmessage-ok’).height()/2);
And not just
$(document).scrollTop( $(‘div#eme-rsvp-addmessage-ok’).offset().top – $(window).height()/2 );

Sun 14 Oct 2018 at 00:50 #58555

Anonymous
Inactive

I just tried 1/5 and then 1/7 instead of 1/2 (page offset from top) in your new code.
Much better, especially on narrow windows. 1/9 probably even better, close to top but not hard against it.

From eye-tracking research though I would say it should be at top, with some margin or padding on top of the OK message element so it is not hard against the top of the window.
If it is in CSS then user can always tweak it.
Or can you specify a fixed offset in the js instead of a fraction of window height?
Could still be tweaked in CSS.

Also would be nice to have a div around both OK message and payment form divs, so one could style the whole section at once to make it stand out as a unit against whatever else is on the page.

thanks
John

Sun 14 Oct 2018 at 01:02 #58556

Anonymous
Inactive

One last thing for now…the element div_eme-payment-form cannot be styled in a way that makes it visible when empty, because it displays before submission as well.

Looks like the rsvp submission Ok and error messages are hidden when form is unfilled, but the div_eme-payment-form is not. So if I apply any styles to it that I want for when the payment amount and button are shown (e.g. background color, border, etc.), the div becomes visible also (just above the form itself) before the form is filled & submitted.

Should div_eme-payment-form be hidden also like the OK and error elements? Seems to make sense it would be.

thanks,
John

Sun 14 Oct 2018 at 01:13 #58557

Anonymous
Inactive

Missed your question about testing…yes I sized the windows first.
There was one issue with cached code on the main browser I had been using but I eliminated that so otherwise the fix does put the OK and payment elements mid-window (using your code of 1/2 height), or near top with my hack of 1/7 or 1/9.

So I’m just advocating for it to be higher in your code, since people look to the top first when a page refreshes.

Also being able to style the div_eme-payment-form element without it being visible before submission will help one bring visual focus to the element if desired.

thanks,
John

Sun 14 Oct 2018 at 01:29 #58558

Franky
Keymaster

The js is fixed, but I need to take into account people with large screens/small screens but also some with extra’s on top like a non-moving menu etc …
Currently half is the best fit imho … feel free to demonstrate several scenarios.
Concerning the payment-form being shown on the initial form: you’re correct, it should be hidden by default and shown when needed. This change should fix that:
https://plugins.trac.wordpress.org/changeset/1956390/
Concerning a div surrounding both: there are already too much divs to my liking 🙂 So currently I’m gonna keep that as is.

Sun 14 Oct 2018 at 01:38 #58559

Anonymous
Inactive

Ok, thanks…will wait for next published upgrade for the payment form hide fix.
Forgot about troubles like non-moving overlays…
Ok about too many divs, I can at least style the payment form div now.
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The forum ‘How do I …’ is closed to new topics and replies.