RSVPMaker 2.5 and new method for customizing the RSVP Form

RSVPMaker 2.5 is out and introduces a new method for customizing the RSVP form. It also fixes some glitches with the recurring event setting function and the JavaScript on the RSVP form. (See also setting required fields, updated list of shortcodes).

Form Customization

I’ve received many requests from people who wanted to make more customizations than I allowed for with the built-in administrative tools. For example, some people did not want to include the section that asks for the names of guests. Previously, the only alternative I offered was code-level customization (I tried to add flexibility with a technique for adding a rsvpmaker-custom.php file). NOTE: If you previously customized the form, this release may break your customizations.

I ran into my own requirement for customization recently when I used the form for a luncheon where people were supposed to choose from among 3 meal choices. So the form needed to be different for that one event. It’s now possible to create a custom form for a single event, in addition to the default RSVP Form for the site.

There is now an RSVP Form field that appears on the main RSVPMaker settings screen, as well as the RSVP options panel on the event editing screen.

The default code for the body of the form looks like this:

<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
<td>First Name:</td><td>[rsvpfield textfield="first" required="1"]</td> 
</tr> 
<tr> 
<td>Last Name:</td><td>[rsvpfield textfield="last" required="1"]</td> 
</tr> 
<tr> 
<td width="100">Email:</td><td>[rsvpfield textfield="email" required="1"]</td> 
</tr>
</table>
[rsvpprofiletable show_if_empty="phone"]
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr> 
<td width="100">Phone:</td> 
<td>[rsvpfield textfield="phone" size="20"]</td> 
</tr> 
<tr> 
<td>Phone Type:</td>
<td>[rsvpfield selectfield="phonetype" options="Work Phone,Mobile Phone,Home Phone"]</td> 
</tr>
</table>
[/rsvpprofiletable]
<p>Table Size: [rsvpfield radio="tablesize" options="regular,large,double" sep=" "]</p>
<p>[rsvpfield checkbox="booksigning" value="yes"] Attend Book Signing</p>
[rsvpguests]      
<p>Note:<br /> 
<textarea name="note" cols="60" rows="2" id="note"></textarea> 
</p>

You can now modify the HTML structure around the form fields as much as you would like. It is important that you include the fields first, last, and email for your form to function properly. But you can add any other fields you might like.

With the exception of the notes textarea, fields are represented by the shortcodes [rsvpfield textfield=”fieldname”] or [rsvpfield selectfield=”fieldname” options=”option1,option2″]. For my luncheon scenario, I could have done something like [rsvpfield selectfield=”meal” options=”Chicken,Salmon,Vegetarian Plate”]

There is also a [rsvpprofiletable show_if_empty=”phone”] shortcode which is an optional block that will not be displayed if the specified data (such as a phone number) is already “on file” from a prior RSVP. For this to work, there must also be a [/rsvpprofiletable] closing tag.

The guest section of the form is represented by [rsvpguests] (no parameters). If you don’t want the guest blanks to show up, you can remove this.

The form code you supply will be wrapped in a form tag with the CSS ID of “rsvpform”.  The yes/no radio buttons and certain other fields that are generated from code for PayPal payments or timeslot reservations are still outside the bounds of what you can customize with this method.

I hope most users will find this to be an improvement.

Update Nov. 2013: The rsvpfield shortcode now also supports checkbox=”fieldname” and radio=”fieldname” parameters as an alternative to textfield and select. Checkbox must be used in combination with value=”somevaluehere” to specify what value should be submitted if the checkbox is checked. See the updated list of shortcodes.

The radio parameter works similarly to select, where you specify options=”option1,option2,option3″ – one additional option you can use here is sep=”<br />” to include a line break between radio button options. Line break is actually the default, but in the example above I used sep=” ” to put a space between the radio buttons. I could also do two spaces as sep=”&nbps;&nbps;” or wrap a <div> tag around the whole thing and use sep=”</div><div>” to make each choice appear in a separate div.