Customizing Frontend Booking Form

at the moment you can use custom css styling using the booking form css class or id name to modify the frontend booking form.

*you can use browser inspect elements to get the css class or id name

Okay. Can you tell me the right template to work with? I need a custom template but couldn’t locate the right one that displays the frontend booking form.

I got the form to style just as I want by using flexbox. I want the fields to arrange in 2 columns instead of default stacked one column. Here is my flex CSS in case it becomes useful for anyone:

.em-booking-form-details {
display: flex;
flex-flow: row wrap;

}
.em-booking-form p { 
clear:left;
flex-basis: 100px;
margin-left: 55px; 
}

I would still like to modify the template’s HTML if I know the template used for the frontend booking form.

Hello,

You could check the link https://wp-events-plugin.com/documentation/using-template-files/ to know how to properly use template files on your theme. Depending on which part you want to modify, The file you’re looking is probably located under: events-manager\templates\forms

Thanks @timrv. I just modified the Single location page format by simply adding the Google map iframe.

<div style="float:right; margin:0px 0px 15px 15px;">#_LOCATIONMAP <br>
iframe {map code here} </iframe>
</div>

While it works, I am not sure if it’s acceptable. If it will not interfere with the plugin. Please advice.

Oops! Sorry this is a reply to a wrong post. My apology.