Support

Home Forums Event Espresso Premium customize registration form by styling and adding fields

customize registration form by styling and adding fields

Posted: November 12, 2014 at 11:30 pm


PTA Education

November 12, 2014 at 11:30 pm

Hi there,

I’d like to know how to customise the registration form.
Please see the page below and click on register,it will take you to the event registraion page on which the form looks very messy. I’d really appreciate if you could help with that!

http://www.ptacademy.com.au/eventtest

Cheer

Patrick


Dean

November 13, 2014 at 1:29 am

Hi Patrick,

The form’s styling is generally down to the theme as we have tried to only add minimal CSS so that the form fits in with your themes style rather than being jarringly different.

While we do not generally provide assistance with this sort of thing, some CSS such as this might tidy it up a little

.event_form_field input {
padding-left: 40px;
margin-bottom: 10px !important;
}

input.espresso-coupon-code {
padding-left: 37px;
margin-left: -7px;
}

Regarding the “adding fields” part of the question title, do you need assistance with this?


PTA Education

November 13, 2014 at 3:48 pm

Hi Dean,

I appreciate your insight on this and if you could offer some help on adding extra fields to the registration form, that would be awesome!

P


PTA Education

November 13, 2014 at 3:56 pm

Hi Dean,

In which file I can edit those css?

Cheers
P


Lorenzo Orlando Caum

  • Support Staff

November 13, 2014 at 9:44 pm

Hi,

The sample CSS that Dean shared could be added to your child theme’s CSS (stylesheet) or through a plugin like My Custom CSS or Reaktiv CSS Builder.


Lorenzo


PTA Education

November 13, 2014 at 10:24 pm

cool, thanks.
just a quick question. How can I change the register link into a button on the custom template?

Thanks


Tony

  • Support Staff

November 14, 2014 at 5:13 am

Does your theme have any styling applied to buttons that you would prefer to follow?

You can add the same classes that Event Espresso add’s to the registration buttons to style them the same as they are here:

http://www.ptacademy.com.au/event-registration/

(The colours are based on your themeroller theme selected)

So in your custom template, add these classes to the a element that makes the button:

a_register_link ui-button ui-button-big ui-priority-primary ui-state-default ui-state-hover ui-state-focus ui-corner-all

So within your custom template.php, line 35 should be:

$live_button 		= 'id.'" href="'.$registration_url.'">'.$button_text.'';

Change that to:

$live_button 		= 'id.'" class="a_register_link ui-button ui-button-big ui-priority-primary ui-state-default ui-state-hover ui-state-focus ui-corner-all" href="'.$registration_url.'">'.$button_text.'';


PTA Education

November 16, 2014 at 5:43 pm

Hi awesome tips. you guys rock!

one last question:
On the registration form(http://www.ptacademy.com.au/event-registration/?ee=1),

How can I organize the event info in a table like this below(we currently are using another plugin on a joomla site but plans to transfer everything to our wordpress site and disable that joomla one).
http://ptacademy.edu.au/continued-education/cec-victoria/218-emt-online-workshop-bundle-281114-melbourne

Can the event info be clicked as a pop up window so that user don’t have to scroll the registration page to fill in the form as all we want is to have the users register straight away!

Appreciate all your helps and sorry for being in the pain as I am used to the old joomla events booking plugin and there’s no need to do the customisation from their backend.

Look forward to hearing from you soon!

P


Tony

  • Support Staff

November 17, 2014 at 4:22 am

Currently EE3 does not include functionality to output the registration form data in a table like the one included within the link, to do so you would need a customised registration template, customizations such as these are not covered under support, however we can point you in the right direction.

The Registration form uses two template files within event-espresso/templates/

These files are registration_page.php (used to pull in and set up the variables to used within…)

registration_page_display.php – this file uses the variables setup above to output the event details and registration form.

You can copy these two files to wp-content/uploads/espresso/templates/ and make changes to those file there (you’ll need to alter registration_page_display.php but need both in that location)

The registration form needs to be included within that registration page in order for EE to function correctly.

Depending on your requirements you could use the Custom Template Add-on to output your events within a table initially, then once they click register the will take to the standard registration form template once again, although this would not work in the same way you have requested above.

The support post ‘customize registration form by styling and adding fields’ 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