Introduction
Surreal CMS is a great service that allows you to edit your static site directly in your browser. You still maintain direct control over the source and layout of your website, but by just adding some simple tags to the pages, you get an interactive CMS!
In this blog, we will cover some basics about how to add a Contact Us form to a Surreal CMS enabled site and use the Include feature to make it the same on all our pages.
Using Surreal CMS gives you the simplicity of a static site while giving you the ability to quickly make updates to your site on the fly. FormKeep allows you to capture email registrations or surveys without having to manage a backend database yourself.
Basic Forms In Surreal CMS
Here a Contact Us form that you can use on your site. We’re going to use some of the advanced features from both Surreal CMS and FormKeep.
Let’s walk through the Surreal CMS features
First, you’ll see we used the cms-include tag in the top div along with a specific id. This allows us to use this same Contact Us form on many pages and anytime we update the content on one page it will change on all of them. That’s perfect for the contact us section of our site, because we always want them to look the same and be sent to the same FormKeep form.
Next you’ll see that we’re using the cms-editable class on the title and labels of the form elements. This allows us to edit these values directly from Surreal CMS without having to drop down directly into the HTML code. Great!
You can add any additional fields you’d like to capture on your form, just make sure they have a unique id and name, and use the cms-editable class to indication which ones you want to be able to edit.
For extra credit, you can take a look at the documentation about Lockable and further control what is editable.
Let’s walk through the FormKeep features
Now that we have the form setup and editable, let’s talk a bit about FormKeep. The first thing to look at is the action tag on the form element itself.
When you create a form endpoint on FormKeep, you’ll get a unique action url for that form. You’ll replace the https://formkeep.com/f/exampletoken with the real one from your form.
Then when someone submits your form the data will get sent to FormKeep. It will store the data, also saving any images or documents uploaded, check to make sure it’s not spam and then send you an email with the information.
You can create multiple forms for different pages, but in this case the contact form is the same across all our pages, so we just need one form.
Pro tips!
You might be tempted to add the cms-editable on the <form> element itself, but right now Surreal CMS doesn’t handle that tag directly. (Give them a shout out if you want this feature, they’re always adding things!) So you’ll want to follow the example above and use spans, divs and labels to manage the editable blocks on your form.
FormKeep will accept any fields you send it, so you can change your form fields at anytime and it will start saving the new fields immediately. No other changes needed. It also supports reCAPTCHA in addition to the regular backend spam detection, if you are really having trouble with spam.
Here’s some additional CSS you can use to style the form to look better than the defaults:
Enhancing Form Data Management and Integration
In each of these cases (and many others) you may benefit from using a form backend like FormKeep alongside your Surreal CMS site. With FormKeep, your data will be stored, secured and accessible in the cloud. From there, you will have a variety of tools to help you manage your form data and route it in a variety of different ways.
One popular way that designers and developers use FormKeep is using WebHooks or integration via Zapier to feed data to other applications like Hubspot, Constant Contact, Google Gmail, Salesforce, Slack or Mail Chimp (and thousands of others). You can search for over a thousand different integration points between FormKeep and other applications on the Zapier web site (pictured below):
You can experiment with this in the FormKeep demo environment in CodePen by clicking here.
If you would like help getting FormKeep setup with Surreal CMS, feel free to reach out to our friendly team at support@formkeep.com.