June 17, 2021
Sometimes, a standard contact form just won’t do. No need to search for another form app to embed on your website. Showit form inputs are versatile enough to create an attractive and functional application form. Let me show you how!
My client Kim of Kim Duke Writes recently asked if we could create an application form for her writing program, A Book of Her Own.
There are so many apps we could have used to embed a form on Kim’s Showit website. However, in this case we wanted to create a simple process for Kim and her prospective students.
The Showit form inputs allowed us to create something that matched her beautiful Tonic website template perfectly and send applicants directly to her inbox for processing.
Before you can build anything in the Showit web builder app, you have to prepare your application form questions.
Jot down the following & organize it into an order that makes the most sense for you:
A quick note – Showit contact forms are not considered a secure form so please be sure not to ask for things like credit card numbers or other sensitive information.
Next, let’s review the information you need to get in your form and determine the easiest way to collect it. Since the Showit form inputs are meant for simple text responses, you are a little limited here but nothing some creativity can’t fix!
Beside each question or piece of information, determine if you need a text field (single line versus paragraph), checkboxes, or a signature.
For Kim’s application form, we utilized all of these input types. Now, watch how we built them on her Showit site!
Let’s start building our form.
First, create a new blank canvas in Showit.
Next, add your form questions using the appropriate text type: Heading, Subheading or Paragraph. Be sure to leave space between your questions for the form responses
From here, I like to add background boxes or borders so the applicant knows where to enter their response. Be sure to give enough room for an adequate answer.
Now, wherever you’ve left a blank space for your applicant to answer, we need an input field. To create an input field, select a text box and place it in the blank space. Under text properties, make sure to check “enable input”. Select the other settings as needed.
Design Tip! In Kim’s form, we used two different font styles to make the form look great – her paragraph styles and her heading script font (pictured below).
Don’t forget to design the mobile & desktop version of your form before moving on to the next step!
With our form finished, add a submit button at the bottom. You’ll want to set the Click Actions as follows:
Link to this canvas, the next canvas view. Scroll to canvas will bring the user up to the top of the canvas which is helpful if you have a long form. Ensure “Submit Contact Form” is checked.
Finally, we’re ready to duplicate this canvas and create our success or thank you message. Find your canvas in the left sidebar of your Showit account. Click on the 3 dot box to open up the menu and select “Add Canvas View”.
Click on the new canvas view you just created and name it “confirmation message” or something similar. You can now add text blocks to create your thank you note.
There you have it! You’ve now created an application form for your program. Before you launch, be sure to test it and adjust your contact form notification settings in Showit as needed.
Need a little help with your new Showit site? Check out our web design services over here.
Share your story, sell artfully.