How to Change the RSVP Now! Button

One of the basic customizations I should have documented long ago is how to change the RSVP Now! button. Here is the default button, originally created for a political campaign (hence the red, white and blue):

RSVP Now!

You can change the text, the colors, the fonts to be whatever you would like by modifying a snippet of HTML code with embedded CSS styling. It’s an option on the Settings -> RSVPMaker page about halfway down.

rsvp-button-code

The button is actually a basic HTML link styled as a button.

In particular, you might want to change

border: medium inset #FF0000; (red border with an inset effect)
background-color: #0000ff; (blue background)
color: #ffffff; (white text)

You don’t have to be a web design expert to look up different CSS color codes that can be plugged into this format.

Here are a few example variations:

<a class="rsvplink" style="width: 8em; display: block; border: medium solid black; text-align: center; padding: 3px; background-color: gray; color: black; font-weight: bolder; text-decoration: none;" href="%s?e=*|EMAIL|*#rsvpnow">RSVP Now!</a>

RSVP Now!

<a class="rsvplink" style="width: 8em; display: block; border: medium inset blue; text-align: center; padding: 3px; background-color: white; color: red; font-weight: bolder; text-decoration: none;" href="%s?e=*|EMAIL|*#rsvpnow">RSVP Now!</a>

RSVP Now!

<a class="rsvplink" style="width: 8em; display: block; border: medium inset #b30000; text-align: center; padding: 3px; background-color: #ffdede; color: #ff0000; font-weight: bolder; text-decoration: none;" href="%s?e=*|EMAIL|*#rsvpnow">Register</a>

Register

<a class="rsvplink" style="width: 10em; font-size: 20px; display: block; border: medium inset #8A2BE2; text-align: center; padding: 3px; background-color: #fdfdfd; color: blue; font-weight: bolder; font-style: italic; text-decoration: none;" href="%s?e=*|EMAIL|*#rsvpnow">Save My Place</a>

Save My Place

You do have to be careful to preserve the basic coding of the <a></a> tag, particularly the contents of the href attribute.

In particular, the %s is a placeholder that gets replaced with the url of your event post. Other coding adds a query string that includes the recipient’s email address, *|EMAIL|* as MailChimp template code (also used by RSVPMaker internally if you use it to send messages to your website members or event attendees). The #rsvpnow at the end takes someone who clicks on the link directly to the RSVP form, rather than the top of the page.

Please direct questions to the support forum on WordPress.org. Or see the consulting page for available professional services.