Styling an Event Registration Form for WordPress

Styling an Event Registration Form for WordPress

Event registration forms are a great idea: you can keep track of attendees and prepare adequately for your turnout. But sometimes, the regular, out-of-the-box registration forms won’t cut it. Often, registration forms are nothing but a basic, boring template that doesn’t reflect how awesome your event is. 

Taking the extra step to stylize your event registration form can attract prospective attendees and help convince them to register. Your event registration form can match your website’s colors, include important details, or even take on a completely new look by using PHP. No matter what level of coding you’re working with, your registration form can be altered and stylized to suit your needs.

We’ll show you how to style an event registration form to get the results you’re looking for in no time.

Getting started

We can all agree that having an event registration form on your website benefits you. But where to start? We recommend using a plugin like Event Tickets (it’s free!). Once you install and activate the plugin, it’s a breeze to create an event registration. Configure the settings and create a new ticket or RSVP. You can add a ticket to any WordPress page or post, but we think the best process is to add your ticket to an event page created with The Events Calendar (also free!).

Your ticket will look something like this: 

ticket registration form with Event Tickets

A bit basic to start, right? Next, let’s take a look at how we can jazz things up.

Style the ticket form buttons

Depending on the theme that you’re using, you may want to alter the appearance of the ticket form quantity buttons. Sometimes, the plus/minus buttons can pop out in an odd way on certain themes, so you can use CSS and add a code to create a smoother appearance for the ticket quantity buttons. See this Knowledgebase article for the exact code to add to your website to make this adjustment.

Adjust the attendee registration templates

You can also adjust the appearance of the attendee registration templates available with Event Tickets Plus. To do this, visit Tickets > Settings > Attendee Registration and change the Attendee Registration Template to Same as Events Page Template so that it matches the appearance of your event page. Feel free to play around with different templates until you find the one that suits you best.

ticket registration form settings

Make style changes with CSS

You can also use CSS to alter the ticket form. With CSS, you can change colors, fonts, borders, and other styles to make the event registration form your own. You’ll want the ticket form to match the branding of your registration form to provide a seamless experience and add some visual appeal. 

Here’s an example of what the “Get Tickets” button can look like:

style the ticket registration form with CSS

If you like that look, here’s some code to create it for yourself:

button#tribe-tickets_tickets-submit.tribe-common-c-btn—small.tribe-tickets_tickets-buy {
  background color: pink;
  color: black;
  font-family: fantasy;
}

Of course, this is just an example of what you can do with custom CSS. You can use Google Chrome Developer Tools to inspect any of the other ticket form elements and customize those as well. The possibilities extend as far as you can imagine! 

Create a template override

If you’d like to take your customizations up a notch and you have some coding chops under your belt, you can make a copy of the ticket template and place it into your child theme. This is known as a template override. From there, you can make any changes to your ticket form that won’t be overridden by any future plugin updates. We’ve got a full list of tickets and RSVP templates available so that you can make the adjustments where you’d like. 

To create a template override of the attendee registration page, create a copy of event-tickets/src/views/blocks/tickets/registration/content.php and place it in [your-theme]/tribe/tickets/blocks/tickets/registration/content.php.

Upgrade to Event Tickets Plus for even more features!

Our free Event Tickets solution comes with tons of helpful features to get you up and running with your tickets and RSVPs. In fact, you’ll find that our free ecommerce solution Tickets Commerce can help you easily accept payments using Stripe and PayPal. 

If you’d like to unlock additional features, like a WooCommerce integration, Apple Pay and Google Pay, and custom registration forms, upgrade to Event Tickets Plus and get started today!