Contact Form » RSVP
If you have an event coming up in the near future, adding an RSVP functionality to your blog can be really handy. With just a few modifications, the built-in contact form feature can be transformed into a RSVP form allowing you to track attendees, as well as collect information.
You may want to start by creating a new post or page to display the RSVP form. You can use an already published post or page as well. If you are looking for a quick code sample that you can copy and paste into the post or page, please see the code example section.
Creating a New Form
First, click the “Add a custom form” media button located directly under the title of your post or page. It looks like this:
You will now be presented with a new screen enabling you to create a new form.
A few fields have been created already. The Name, Email, and Message fields will work great for an RSVP form. On the other hand, the Website field is less important and may be deleted by clicking on the minus symbol located to the right-hand side.
Adding Custom Fields
It may be helpful to know how many people plan on attending. We can easily set up a new field to collect this information from your potential guests. We will start by asking a question, Do you plan on attending?, and then provide two options: Yes and No.
First, click the “Add New Field” link.
At this stage, you will see that the new field has been added to the bottom of the form and options to customize it have appeared on the right-hand side of the screen.
The options presented on the right-hand side of the screen may be adjusted to your liking. Here are a few suggestions to get you started:
Label – Replace the text New Field with our question: “Do you plan on attending?”.
Field type – Select Radio from the dropdown to create a list of options. The first option will be created for you automatically.
- Change the text of the first option to “Yes”.
- Click the Add another option link.
- Change the text of the second option to “No”.
Required – To ensure that your visitors answer this question – depending on the question, you may want to click this box.
Save this field – Click this button to save your work.
After saving your changes, your screen should look similar to this:
You will see that our newly created field displays below the “Comment” field and it may be more appropriate for our new field to be positioned above the comment. Changing the position of a field is really easy. The first step is to use your mouse to position your pointer over the field that you wish to move. This will activate the field and display two links: “move” and “edit”. Once a field is active, you can click and hold the “move” link and then drag the field to a new location.
At this stage we have created a working RSVP form!
Here’s an idea of what it looks like in the Twenty Eleven theme:
The following code can be copied and pasted into any post or page to quickly reproduce the form described above.
It is possible to add any number of questions to your own form. Please see the contact form documentation for a more in-depth view.