How to add a Contact Us form to your Saber site

cover
Photo credit: Saber.land

Saber is an increasingly popular open-source static site generator perfect for building blogs - this blog and our help site are both built with it.

Saber is built in Javascript and uses the Vue.js framework. It's super-quick to get started, easily themable and, being built on top of Vue, it's highly extensible.

Saber sites share all the pros of statically generated web sites - they're lightning fast, secure, cheap to host, easily scalable and provide a great developer experience.

But Saber sites also share one of the drawbacks of every site built using a static site generator: having no server, there is nowhere to process input from users. You can build a HTML form using a static site generator, but when you click submit nothing will happen.

That's where StaticForms comes in.

At the bottom of this post, and every post on this blog, you'll see a form where you can sign up for our newsletter (try it!). This is a Vue.js Single File Component embedded in a Saber page. In this post we'll show you how to create the component and use it.

Create a Newsletter Sign-Up Component

The first thing we need to do is create that Single File Component. I'm assuming that you have already created your Saber site

In the folder containing your Saber theme (by default, this will be in node-modules\saber-theme-minima), navigate the folder hierarchy until you find the components folder. Create a new file in this folder and name it NewsletterSignUp.vue, then copy the code below in to it.

This is a standard Vue.js template containing a form element with an input for the email address and a button to submit it. There's very basic validation - when the button is clicked to submit the form it checks that the email input contains a value and only submits it if it does.

The key thing to note is on line 3. You'll replace <<YOUR UNIQUE FORM END-POINT>> with the value you'll get when you create your StaticForms form.

<template>
<form @submit="validateForm"
action="<<YOUR UNIQUE FORM END-POINT>>"
method="POST">


<input
type="email"
name="email"
v-model="email"
placeholder="Enter your email to subscribe"
aria-label="Email address"
/>


<button type="submit" id="submit-button" aria-label="Submit">
Sign me up!
</button>

<span v-if="emailError!==null">

</span>
</form>
</template>

<script>
export default {
data() {
return {
email: null,
emailError: ""
};
},
methods: {
validateForm: function(e) {
this.emailError = "";
if (this.email) {
return true;
} else {
this.emailError =
"We need your email address to be able to contact you...";
e.preventDefault();
}
}
}
};
</script>

Create a new StaticForms end-point

To make this work with StaticForms you need to create a new form end-point. Sign up here if you haven't already got an account.

Click on the Create Form button. On the next page, just give your form a name - you can leave the default values for the form settings as these can be changed later - and cick Save.

Update the new component with your form end-point URL

On the next page you'll see your form end-point's unique URL. Replace the <<YOUR UNIQUE FORM END-POINT>> text with this URL and save the file.

Add the component to your blog posts

Back in the Saber theme folder, navigate the folder hierarchy until you find the layouts folder. In here you will find a file named post.vue. Open this in your favourite text editor.

We need to add two lines to the <scripts> section of this file.

First, we need to import our NewsletterSignUp component:

import NewsLetterSignUp from "../../components/NewsLetterSignup.vue";

Then we need to register it:

NewsLetterSignUp: NewsLetterSignUp

The resulting file should look like this:

<script>
import Wrap from "../components/Wrap.vue";
import NewsLetterSignUp from "../../components/NewsLetterSignup.vue";
export default {
components: {
Wrap: Wrap,
NewsLetterSignUp: NewsLetterSignUp
},
props: ["page"],
methods: {},
computed: {}
};
</script>

Lastly, we need to add the NewletterSignUp component to the page layout. Add

<NewsletterSignUp/>

just before the closing </Wrap> tag and save the file.

Test the form

Run your Saber site using:

npm run dev

When it's finished compiling, open your site in a browser and browse to a blog post. You should see the newsletter sign-up form at the bottom.

The form may not look very good at this point as it will pick up the default styling from the theme which, in the case of the Minima theme, is no styling, but you have complete freedom to style it however you want by either adding styles in to the NewsletterSignUp component itself or in to the theme's stylesheet (minima.css).

Enter your email address and click submit.

Your form will be submitted and you will be redirected to the default StaticForms "thank-you" page. You'll also get an email with the submission details and, if you refresh the StaticForms dashboard, you'll see the details there.

Thanks for reading! I hope this was useful - if you have any questions of comments, please get in touch!