Support

Home Forums Event Espresso Premium Styling each registration form field

Styling each registration form field

Posted: September 16, 2017 at 10:33 am

Viewing 7 reply threads


jacl

September 16, 2017 at 10:33 am

Hi
I’m trying to style the registration form.

Frustratingly the IDs of the Divs changed each page load such as qstn-195-31… and the class for these Divs are too generic such as ee-select-input-dv so makes it imspossible to latch on to styles each field and its container.

<div id="ee_reg_qstn-195-31-input-dv" class="ee-select-input-dv">

You do add a unique class to the actual input element so how come you dont do this for its container div so we can style them please?

<select id="ee_reg_qstn-195-31" name="ee_reg_qstn[195][31]" class="ee-required ee-reg-qstn ee-reg-qstn-31"

Then I can style my form in to two columns and also use onpageload javascript to add unique placeholder text to each field and hide labels to make it all a bit more modern

thanks so much for any ideas.

Jonathan


Tony

  • Support Staff

September 18, 2017 at 5:12 am

Hi Jonathan,

Which version of Event Espresso 4 are you using?

There was a change made within code that removed the classes we add to the question div’s however those were re-introduced with version 4.9.46.p so I’m guessing you are using an older version?

If so can you update and retest this.


jacl

September 18, 2017 at 6:26 am

Hi Tony

Ahh thanks for that I was using the version before that. 4.9.45.p. Have updated and can see the classes again so that makes my life much easier thank you.

Also we only sell one ticket type per event and only allow 1 attended to buy 1 ticket so my client wants to remove the extra step from the list of events and when you click VIEW we want to then have it auto submit the ticket form so we go straight to the registration page.

Possible? We have tried to write our own shortcode that replicates the events list and we include the hidden ticket form in each event row and that seems to work but wondered if you knew of a way using the built in VIEW buttons…

I;m wondering if we just add some javascript to any event details page that AUTO submits the ticket form?

Thanks
JOnathan


Tony

  • Support Staff

September 18, 2017 at 7:10 am

You could set the ticket selector to display on the event lists.

Got to Event Espresso -> Events -> Templates.

On the event list section set display ticket selector to yes and save. Now the use selects the ticket and submits directly from the events list.

Would that work?


jacl

September 18, 2017 at 7:44 am

Thanks Tony

Yes that ticket option works well for the event listing page template.

We were hoping to get it working for the short code below as on our homepage we display that neat table and it allows the user to filter by event type, location and date

[ESPRESSO_EVENTS_TABLE_TEMPLATE order_by=start_date]

I wonder as we dont really want to use the main events listing template page could we customise that template to output a simple table

EVENT NAME | DATES | LOCATION | REGISTER BTN

and can we call that listing via a shortcode and either have the filters above for filtering by month location, type or maybe we can use parameters in the shortcode such as [EVENTS_LIST location=”london”]

and we could use tabs on homepage and have a different shortcode per tab with each tab name being each location

My clients just wants it a simple and fast as possible to click and register..

thanks


Tony

  • Support Staff

September 19, 2017 at 4:43 am

We were hoping to get it working for the short code below as on our homepage we display that neat table and it allows the user to filter by event type, location and date
[ESPRESSO_EVENTS_TABLE_TEMPLATE order_by=start_date]

You can edit the template and add additional sections to the table or your own register button to that table.

The template is within eea-events-table-view-template/templates/ and you can add the template to your theme (or child theme) to override the default template.

Josh has an example of adding the ticket selector output to that table here:

https://gist.github.com/joshfeck/e8fcb3946f56490d1384bfcc449caa9b

I wonder as we dont really want to use the main events listing template page could we customise that template to output a simple table
EVENT NAME | DATES | LOCATION | REGISTER BTN
and can we call that listing via a shortcode and either have the filters above for filtering by month location, type or maybe we can use parameters in the shortcode such as [EVENTS_LIST location=”london”]

You can but you’ll need to build out that custom output as EE doesn’t have that functionality.

The main list output (/events/) is a post archive and uses your themes archive.php template to output the content, you can create a custom template pecifically for EE using an archive-espresso_events.php template for that specific output.

Or don’t use the default /events/ ouptut and link to an actual page using the above ESPRESSO_EVENTS_TABLE_TEMPLATE shortcode with some modifications.


jacl

September 19, 2017 at 6:19 am

Thanks so much for your help Tony 🙂

That works nicely – woohoo!


Tony

  • Support Staff

September 19, 2017 at 11:27 am

You’re most welcome.

If there is anything else I can help you just let me know 🙂

Viewing 7 reply threads

The support post ‘Styling each registration form field’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso