Forms: Event form placed on the Event list layout

CMS > Content Modules Forms
1

The event form does not work properly when is placed on the Event list layout, because {{this[‘id’]}} will not work. Event ID will need to be hard-coded manually or added via an alternative Liquid variable. Does anyone knows how to make that work (i.e., Have an event form work on the event list layout)? Thanks.

2

Welcome to the forum @Actualizado!
That should work just fine as {{this[id]}} should render the ID of that Event, even in list layout. Unless you are listing these via a collection, in which case you can still reference the ID, just with your specific collection variable.

If you can post your list layout code I can take a closer look.

1 Like
3

Thanks.
The thing is that when you press the Book Now button of a course listed on the list lay out, the “Booking Form Events” always gets the information (name, price, etc.) of the first course listed only even if you are pressing the Book Now button of the second course listed on the list lay out.

I am trying to post my list layout code, but the system does not allow me to (i.e., “Sorry, new users can only put 2 links in a post.”)

Here is the book now button and what I have at the bottom of the list lay out code:

Book Now

×

{{this['Name']}}

Costo: ${{this['Price']}}

Fecha: {{this['EventDateStart'] | date: "%v"}}

Hora: {{this['EventDateStart'] | date: "%l.%M %P"}} - {{this['EventDateEnd'] | date: "%l.%M %P"}}

{% component type: "form", alias: "booking_form_events", eventId: "{{this['id']}}" %}
4

Thanks for posting that @Actualizado.
Hmm, it’s a bit hard to tell what’s happening here.

So the ‘Book now’ button is the submit button of the form correct?
And if so, is it within the <form> element?

Posting a link to the site would also help if possible, or you can private message me the link.
(click on my profile image and click ‘Message’)

1 Like
5

Thanks. Link to the site: https://abogadoactualizado.treepl.co/events

(I was unable to direct message you.) Regards.

6

I see now. You are using a modal/pop-up to house the forms (which is actually working correctly), but all your modals and modal buttons have the same ID, so all buttons are just opening the same modal.
You need to use the Event ID to customise each modal and button.
eg:

<a href="#" class="button button-danger" data-open="book-event-{{this['id']}}" .... >Book now</a>

and same for the modal:

<div class="reveal modal-form" id="book-event-{{this['id']}}" .... >
   ...
</div>
1 Like
7

Hi Adam, thanks for your help. It worked. Thank you very much. Regards.

8

Hi Adam, could you please direct message me so that I can reply(sent you a message). I am unable to direct message you. Thanks. Regards.