How do I customize the look and feel of my RSVP form? (Designer Pro)

When you design in Splash, we want to give you EVERY opportunity to customize each and every aspect of the guest experience.

Let's walk through how you can fully style one of the most important pieces of your event page: the RSVP form.

Now, we're not saying there's anything wrong with our default RSVP form style. It's clean, it's simple, it gets the job done:

Screen_Shot_2017-08-25_at_11.32.55_AM.png

It can also be treated as a starting point for you to design and build on top of.

We already know how to change that headline language and add custom questions to your form. But how about the font of the headline? Or of the questions in your form? What about the color of that submit button?


It all starts with a Modal:

1. Make sure you're operating in Designer Pro mode. See how to toggle that on here.

2. Hover over your RSVP button and click the blue "+" sign to add a new element to your page

3. Search for "Modal" within our element library and add one to your page.

Screen_Recording_2017-08-25_at_11.39_AM.gif

You'll notice that by adding a Modal element to your page, you'll see a brand new section in your Layout tree called Modal Container. 

_e7ebab36e8a654234808727f0b32cfc3__Screen_Shot_2017-08-25_at_11.42.19_AM.png

 A modal is a fancy way of saying "window". But now we need to populate that window!


Add a form to your new modal

1. Click inside your Modal to add a new element

2. This time, select "Form (beta)" from our element library

Now all the information housed in your Form tab will appear inside your Modal!

Screen_Recording_2017-08-28_at_11.32_AM.gif


Breaking down the layout tree 

Taking a peek inside your new, fully filled modal, you may spot some elements that you've never quite seen before. Let's break 'em down:

Screen_Shot_2017-08-28_at_11.37.08_AM.png

Modal Headline: This can take the place of your "RSVP Title" if you so wish! Or simply hide this element using our eye icon

Form Container: The outermost home for all your Form content

Question Group: Inside your Question Group, you'll find the nitty gritty details within your Form like your...

RSVP Title: Aka your RSVP Headline!

Question Repeatable Container: If you're a Splash designer, you're likely familiar with our repeatable technology. At its core, a repeatable is a stylized list. And in this case, the list isn't speakers, sponsors, or beyond - it's every custom question in your form

Question: First Name: Your "Master Repeatable"! Every custom question you add to your form will take the style of this element

Error Container: Let's say you have "Only my invite list can RSVP" turned on in your Form tab. If a visitor who isn't on your list attempts to RSVP, they'll receive this message:

Screen_Shot_2017-08-28_at_12.13.31_PM.png

This is the element that lets you controls the style of that error message

RSVPs Closed Container: Once your RSVPs fill up or you decide to shut 'em down, your custom questions will no longer appear and instead you'll see the following message:

Screen_Shot_2017-08-28_at_12.16.54_PM.png

Here is where you can adjust the style of that messaging

Submit Button: Get creative here! you're able to fully customize the font, background color, hover state, and beyond of this key element


Now, the fun part!

Now that we've run through the basics, here's where you can go completely wild with styling out each of these elements as you would normally customize any other element in Splash. Here are some popular examples of how clients often customize their form:

Changing the background color of the window:

Screen_Recording_2017-08-28_at_12.49_PM.gif

Adding a border to the window:

Screen_Recording_2017-08-28_at_12.51_PM.gif

Adjusting the display of the RSVP headline:

Screen_Recording_2017-08-28_at_12.54_PM.gif

Centering the button:

Heads up this is a tad more advanced design work! Check out the steps here:

1. Wrap the Submit Button in a container

2. Adjust the container's Display to Inline-Block and Positioning to Float: None

3. Then hop into Font and center align

4. Last step, pop into the Submit Button and adjust the Positioning to Float: None as well

Screen_Recording_2017-08-28_at_12.57_PM.gif

Creating a hover state for the button:

Screen_Recording_2017-08-28_at_01.01_PM.gif

Adding additional elements to the form:

Remember that you have our entire library of elements to choose from when it comes to sprucing up your form! Just click to add an elements like you would to any other piece of your page.

Screen_Recording_2017-08-28_at_01.06_PM.gif

 

Was this article helpful?
0 out of 0 found this helpful