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.

Leave a Reply