Booking form in a lightbox?

[Anonymous]

I try to realize a booking form in a lightbox (Easy FancyBox). The customized booking form works fine on an event page, but not in the lightbox.

Here is the code for calling the booking form in the Fancybox:

<div class="fancybox-hidden" style="display: none;">
<div id="fancyboxID-#URL_EVENTID" class="hentry" style="width: 460px; max-width: 100%;">[eme_add_booking_form id=#_EVENTID]</div></div>
<a class="fancybox-inline" href="#fancyboxID-#URL_EVENTID">#_STARTDATE{H:i} - #_ENDDATE{H:i}</a>

And here is the simple customized booking form:

Nachname*:
#_LASTNAME
Vorname:
#_FIRSTNAME
E-Mail-Adresse*:
#_EMAIL
Telefonnummer:
#_PHONE

#_SEATS
#_SUBMIT{Anmelden}

Any hints how to make the booking form working in the FancyBox or any other lightbox?

[Franky]

Maybe because the form is generated via a shortcode in your case? Why not just use #_ADDBOOKINGFORM and not “[eme_add_booking_form id=#_EVENTID]” ? I won’t try it here though 🙂

[Anonymous]

Hi Franky,

same behaviour when using #_ADDBOOKINGFORM. When clicking “SUBMIT” the lightbox closes but the booking is not registered.

Any further idea?

[Franky]

the submit happens via an ajax call. I guess the lightbox needs to be made aware of that, maybe it intercepts that call …

[Anonymous]

Meanwhile I found out that the booking form in a lightbox works fine when there is only one link to a booking per page.

The problem obviously appears when I have two or more links to the bookings of different events. In that case eme seems to create problems. E.g. it requests to fill in mandatory fields, which are filled in already.

So I have to find a less elegant way for booking.

[Author]

Posts