Mar 20, 2015

Wedding RSVP Form - Design Day Friday

Remember the Save the Date project for Sister2 and Soon-to-be-Brother?

Well, we're getting closer to the day, and they're sending out invitations now.  To my great sadness (but probable lower stress level), they chose to pick a templated wedding website instead of doing a custom one.  However, they did run into a few issues with the RSVP form, which I got to work on and resolve!

The Wedding Website


Sister2 and Soon-to-be-Brother started out with a fence background and a green themed website, so I was very pleased when they switched over to this design.  To me it looks more "wedding-y" but also it goes well with the colors in the Save the Date (which they used as the picture on the home page).

wedding website featuring save the date image with dog


The Problem


In short: lack of form customization.  Sister2 and Soon-to-be-Brother needed to ask about dinner preferences, and wanted to add a couple other custom questions as well, and their form wouldn't let them.  It was also unclear on the matter of +1s.  So to get around that, I offered to make a single page site that would mimic the style of their wedding website and just do the RSVP part of it.

The Solution


To start with, I made a layout with HTML and CSS that was similar to the look of the wedding website.  I found a pattern that was close to the one used on their site and changed the colors to match.

wedding rsvp form main page

Then I copied the PHP forms that I use on my website (and frankly understand very little of) and edited them to include the fields Sister2 and Soon-to-be-Brother wanted to have on their form.  Once I had the form entirely set up, I used Javascript to hide and display content depending on which buttons the user clicked.

For example, if they say, "Sorry, can't attend" there's no need to show the whole form, but if they click, "Yes!  I'll be there" then the document expands to show the rest of the form.

wedding rsvp form extended options

There's one other spot that does this and that's the "how many guests are attending?" button.  Default shows just one spot for a guest name and preferred dinner.  But if they click "2" then it will display the 2nd area to fill in.

wedding rsvp form example javascript display function

I'll be frank: I just learned Javascript in my Into to Programming class for my master's degree, so I am psyched to be able to use it and that it turned out so well.  In addition to changing the display based on user input, it also does some behind the scenes data verification stuff and is generally smooth and pretty and something I need to incorporate into my own website.

Also, I can't give Ryan enough credit for helping me troubleshoot PHP at 12am.  My brain had shut off and I was doing horrible things but couldn't stop until it was DONE and he stepped in and untangled the mess I was making and allowed me to get to bed at a reasonable time.  And a couple days after putting the basic form/functinality together, Momma came over and helped me do the data verification stuff, so that people can't accidentally send in blank RSVPs.

I'm so lucky to have programmers in my life.  There's always someone to help me with my homework!

VERY IMPORTANT UPDATE: My father RSVPed already.  He's "not attending."  Lmao!  The first person to use the form and they've already abused it.  Figures.

Would you ever use a digital RSVP form for your own events?  What do you think of the trend of wedding websites?  Do you get trolled by your family members?


Jenn signature graphic | Business, Life & Design

2 comments:

  1. this is so nifty. i wish i had this instead of the stupid cards i had to send out, lol. i know what you mean about can't stop till you get it done!! it's so frustrating!

    ReplyDelete
  2. I feel like people would probably be more likely to RSVP if it was online. I know so many people who have complained and had to nag their guests about getting back by mail cards.

    ReplyDelete

Talk to me! I'm friendly. I won't bite.

P.S. If you use Blogger and you want to get email replies to your comments, use your blogger profile instead of Google+ and make sure the box is checked next to "show my email address."