Trippeo – Interactive Form

My task was to create an interactive form for users to contact Trippeo. The backend developers created 3 simple input fields with a submit button. We used a jQuery plugin to validate the phone number field.
subscription form - before

Since the form would only be for companies with 25 employees or more, it did not have to be shown as a default. I first created a simple section with the option to contact Trippeo.
intro

Upon clicking the button, Trippeo’s contact information and the form would appear and slide down. The intro text would slide up and disappear. Originally I changed the states with CSS transitions but another way is to simply use jQuery methods slideUp() and slideDown(). A problem with the methods is that they toggle CSS display: none and display: block to show and hide items. This can cause issues if your shown elements need to be inline-block. (The inline styles of display: block will override your inline-block styles.) In that case, animating with CSS would be the way to go.
slide down form

The user can contact Trippeo through the contact info on the left, or submit a form that gets sent to a company e-mail address. Once the form is sent, the form slides up and disappears. The user gets a notice saying their message has been received!
thank you

An improvement that could be made to the form is to simplify the input fields even further. Since the most crucial info is the user’s name, number, and company size, the third input field could be made into a drop down selector. The user would then choose their company size, say 25-30 employees, or 100+ employees. This would not only make the process simpler for the user, but also give Trippeo some valuable information to bucket interested companies into tiers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s