How to Add an RSVP form

If you paid extra close attention when you installed and activated Jetpack, you would have noticed that in addition to the Jetpack button, which was added to the main menu and the admin panel, you also got an additional button. It's down here under Comments, and it's called Feedback. This is where all the responses from your new custom contact forms will land once people start filling them out. Custom contact forms? Yes, with Jetpack you get a default new feature that allows you to create custom contact forms in your posts or your pages.

And the neat thing about this feature is you can create individual forms on each of these posts and pages. So I can now create a contact form on the contact page and an R.S.V.P. form on the RSVP page. When I created the content for my site, I also prepared the content for the RSVP page, and that included the different types of responses people could provide. Your guests can say either YES, you can count on me to be there. I'll be going this one solo. Or you can count on me to be there, and I'll bring a guest.

Or MAYBE, and I certainly hope so... but I'll let you know before the deadline. Or finally, NO, I'm sorry that I won't be able to share this special day with you. Now I need to add this into a form, along with information about who's responding, their phone number, their email address, and, in case of them bringing a guest, also who that guest is going to be. To start off, I'll go to my Pages and find my RSVP page. This is where I already have the text for the RSVP page, and now I need to add the contact form.

So I'll place my cursor where I want the contact form to appear and then I will click on my new button called Add Contact Form that was added by Jetpack. This opens the contact form Form builder, where I get default form out of the box that I can edit by either changing the form fields or add new fields. So I'll start out by editing the first field here to say Your Name: and a colon at the end. Then I'll edit the Email field to say Your Email: and a colon.

Then I'll grab the Website field and edit it to say Your Phone Number:, colon. And then change the Field type to Text and make it Required. Save the field. And then I need to add a drop down. So I'll click on Add a new field, type in the question, so RSVP Status, then I'll change the Field type to Drop down, and then I can go and grab each of my options here. So first, YES. Then I'll add a new option.

Go and say YES, and a guest. Add another option. Say MAYBE. And add the last option, which is NO. I'll also make sure this Drop down is Required because I need to collect this information from each of my guests. I'll save the field, grab it and move it up above the Comment section. And then I'll change the Comment section to instead say If you are bringing a guest, please introduce her/him to us.

I won't make this Required because it depends on whether people are bringing a guest, but now I'll be able to collect that information from my guests. Before I click Add this form to my post, I also need to go and set my Email notifications. This is where I define what email address will receive these form entries. So here I'll put in guests @wpdiy .net, and I'll put in a subject line, which is RSVP response from website. Now I'll click Save and go back to form builder, look over my form one more time, and then click Add this form to my post.

This adds the form to my post, but it's added in what's known as short codes. Short codes look really strange. They start with a square bracket and end with a closing square bracket, and there's lot of different fields in here, but you don't really have to worry about what you're looking at. This is what the form looks like to WordPress, but if we update the page and jump to the front end and scroll down, you'll see on the front end, it looks like a regular form. Here we can fill out Your Name, Your Email address, Your Phone Number, and you can set your RSVP Status and even bring information.

When I click Submit, the information is submitted to WordPress and also sent by email. And that means, as the site owner, you can now go back to the back end of your site, navigate down to Feedback, and here you'll see that entry stored right inside your site, and you can even export all your entries as CSVs so you can dump them in to Excel or another spreadsheet program. Now, I'm sure you're wondering about one thing. If we go back and look at this page, you may have noticed that the form looked a little bit wonky.

So there's no space here between RSVP Status and the drop down and then the next section. Well, you can fix that because, as you saw, the form was built using these short codes. So if I go back and edit the page and scroll down a bit, we can find the end of this drop down, which is right here, so this is the last option, and then I can just hit enter and create a space between the drop down and the next field, Update the page, view the page, and now when I scroll down, you'll notice that because I added space, space appeared between these two fields.

So, your contact form can actually be manipulated in a lotta different ways, including adding extra space between the different form fields. Now that you've seen how I created the RSVP field, you can also go and create a regular contact field on your contact page, if you want to.