Integrating FormKeep web forms into your Squarespace static website.
When I signed up for this summer internship, I didn’t know what to expect. When — on day 1 — FormKeep asked me to write an EduLog documenting my experience learning about web forms, I was even more perplexed. What the heck is an EduLog? Web form what?
My boss, Rob, assured me that my inexperience made me perfect for the job. As I learned more, it became clearer what Rob was asking. He wanted me to learn about web forms over the summer and simply write down what I learned so that people like you can benefit. I’ve always been a fan of books like Into the Wild and Dark Star Safari. The appeal of a physical trek across a new world will be missing from this journey, but I hope the lessons I learn will be no less useful to all of you.
And so it begins…
To start my journey, I began learning more about FormKeep. I found that the people who need our service most are the hard-working small business owners who don’t want to waste their time digging through technical documentation and posting pleas for help on Stackoverflow. Most people want quick, easy online forms; and that’s what I’m here to uncover.
Over the next 8 weeks, I’ll be posting the fictionalized story of a small business owner learning to revamp their online presence with FormKeep in a series of what I like to call “EduLogs”. I’ll be covering everything from abstract customer relationship strategies to the nitty gritty of FormKeep’s streamlined backend, all in the pursuit of making you a FormKeep pro.
So, without further ado, let’s get started by understanding our business owner’s story:
So, imagine about 15 years ago, you opened a veterinary clinic. Let’s call this fictional clinic, San Jose Veterinary Group, (or “The VG” for short). You launched alongside a website, but it only really contained some clip art and your address. Any interested web searcher would have to call you up or drive to your location for further information. Now in 2020, you’ve expanded to three brick and mortar locations throughout San Jose and Sunnyvale, along with starting a “house call” mobile vet service. However, your website has not changed one bit.
Although your locations are in the tech capital of the world, you care for dogs, cats, horses and pocket pets… you don’t know much about websites and computer programming! Your time is better spent helping animals than trying to learn JavaScript.
So, how do you quickly and simply get your business online?
It’s easy, but you have lots of options. In this case, we’ll start with SquareSpace and FormKeep! SquareSpace is a popular and easy-to-use website builder, and FormKeep is an easy way for you to use forms to collect information from your customers!
So, you’ve got your business, you’ve got SquareSpace (Or Weebly, Wix, GoDaddy, or another service), and you’ve got FormKeep. Up next for the VG is to integrate them all seamlessly in order to bring your business fully online. Your first step will be a small but important one: adding a contact form.
People, even when their deeply loved pets are involved, don’t like getting on the phone. Customers will be far more likely to type out a message on your website than to give one of your employees a call. Additionally, the VG can be reached even when you are closed, with the message waiting for your staff as the first thing the next morning.
First, use a Squarespace template to craft a beautiful website and fill it with all of your relevant information. You’ll find plenty of helpful guides while you’re building it. Here’s the VG’s as an example:
So, now you have a pretty, modern website. However, it’s functionality still is essentially that of a bulletin board. Information only travels one way, and your customers can’t interact with you or your business.
Those pleasing mint “Contact Us” buttons seem appealing, but we’re first going integrate Formkeep into the blank space at the bottom of your website:
This is the traditional place for a “contact me” element. Your web builder may have already created a placeholder form, but we’re going to make it prettier, faster, and more useful!
Creating your FormKeep Form
Now, instead of learning how to use MongoDB and JavaScript, FormKeep is going to do it for us! So, head over to FormKeep.com and start a five day free trial. Check out a getting started guide to familiarize yourself with the user interface. When you’re ready to get started, create a new form.
Give it a suitable name like “contact us” and complete the setup wizard.
Also be sure to select the “contact form” template to save yourself some work.
On the next page, you’ll find a lot of options, all presented in a user-friendly format, so that you can make your form truly yours. For example, you can even use a custom thank-you message that includes the name of the VG instead of a boilerplate thank-you.
After finishing your thank you, write a short little auto-reply message to be sent to your user after they submit your form. This page supports Markdown if you’d like to make the reply a little more “custom”, but we’ll save complex stuff like that for later editions of the EduLog.
Click next, and go ahead and add your email so that you can start receiving submissions immediately.
Next, you’re going to of course leave spam protection on by default. You wouldn’t want some bot maliciously filling out your form, would you??
On the next page, go ahead and leave the data retention setting at forever for now, unless you have specific legal requirements which you would already be aware of, you have no need for it to be set to anything but the default.
Skip the external workflow and Google Sheets pages as well. Again, we’ll be covering more advanced topics in later weeks. If you’re champing at the bit for more already, head over to the knowledgebase for all your information needs.
Finally at the summary, make sure all of your settings are correct and finalize your form!
A voila! You’ve made your first FormKeep form! Painless, wasn’t it? You didn’t even have to see a command line once, let alone your own existential despair upon coming across a seemingly unsolvable programming problem.
Integrating your form into SquareSpace
Now it’s time to put your form to work. I’ll be covering SquareSpace integration, but you can read a general integration tutorial here. First, log into your website editor dashboard. You can do this by simply going to your website’s address. Remember that big black space on the VG’s website? Now is the time to fill it!
Your site will of course have some differences to the VG’s, but the basic guidance to selecting your own contact form location is that it should be on the main title page, after all of your content. For example, the VG has it’s welcome at the top of the page, most popular services in the middle, and contact at the bottom. Importantly, customers come across the contact form whether or not they were seeking it out, because of it’s placement.
Navigate to your selected location, double click on it to enter edit mode, and click on the little grey circle to open the content block selector (1)
Then select the “code” block (2). You’ll need at least a “business” subscription to SquareSpace to use the JavaScript that FormKeep is built upon.
Go to your form in FormKeep, click the “setup” tab on the right side of the form pages, and click the “copy to clipboard” button within the “embed in your website” section.
Next, paste that code into your SquareSpace block, overwriting the default text, and click save! Above your new code block, create a second block, this time a text element, and write “Contact Us”. Save the block, save your edits, and view your new contact form!
Look at that! You just went from an empty space on your website to an elegant, spam protected, cloud based, easy integration web form! This is the magic of FormKeep.