google spreadsheet cms
Use Google Spreadsheets as your CMS & to save your inputs!
Create a Google Spreadsheet containing all the information you will need for your site. After, choose ‘Publish to the web…’ in the ‘File’ menu. Then grab the id in the link.
https://docs.google.com/spreadsheets/d/__yourPublicId__/pubhtml
Inside of your HTML document include these two files.
<script src="tabletop.js"></script>
<script src="gDoc.js"></script>
Or just this file
<script src="gDoc.min.js"></script>
Now at the footer of your html page initiate the connection!
By default the sheetName is ‘Sheet1’
<script>
gDoc(yourPublicId, sheetName);
</script>
Example connection
<script>
// initiating connection
gDoc('1cfW7dwJkwJq7rqTsftNy3wjCJR3-yDylc5MRmsc0Yw8', 'layout');
</script>
All that’s left now is to add gDoc attributes to your html!
Example spreadsheet
| title | header | subheader |
|---|---|---|
| My website | Welcome, | This is my website! |
How to insert from example spreadsheet above.
<html>
<head>
<title gDoc="title"></title>
<script src="tabletop.js"></script>
<script src="gDoc.js"></script>
</head>
<body>
<h1 gDoc="header"></h1>
<h2 gDoc="subheader"></h2>
</body>
<footer>
<script>
gDoc(yourPublicId, sheetName);
</script>
</footer>
</html>
And it’s that easy!
You might want to use gDoc to set link hrefs, img srcs, and set styles.
Here’s a quick example of how you would make a red link
| my-link | my-link:href | my-link:style |
|---|---|---|
| Example | www.mylink.com | color: red |
<a gDoc="my-link"></a>
To iterate over a block of html simply just pass gDoc an object {}.
Let’s say you want to export your 4 most recent blog posts
gDoc({
public: yourPublicId,
sheet: 'blog',
gDoc: 'blog-section',
columns: ['title', 'body', 'link'],
loop: 4,
html: function() {
var html = '<a href="{{link}}">';
html += '<h1>{{title}}</h1>';
html += '<p>{{body}}</p>';
html += '</a>';
return html;
}
});
The loop key can be set to false to iterate over all items in the document. Make sure you instantiate all your variables in the ‘columns’ array, otherwise they won’t show up in the mustache syntax.
The “connect” functionality uses AJAX, make sure jQuery is installed!
Create a Google Form by visiting forms.google.com and then press share to get the id.
https://docs.google.com/forms/d/e/__yourFormId__/viewform
Create a blank form that will hold your inputs.
<form id="example-form"></form>
In the footer, pass gDoc.js an object with these parameters.
gDoc({
connect: true,
id: yourFormId,
appendTo: 'example-form'
});
That’s it, all of your inputs are automatically inserted!
When submitted, the responses will be sent to the form, and your can export to spreadsheet from there.
Additionally you can add some optional parameters -
gDoc({
connect: true,
id: yourFormId,
appendTo: 'example-form',
submitValue: 'Submit Form', // submit button text
successMsg: 'It worked!', // success message after submit
preloader: 'loading.gif' // img to show while form is loading
});
As of right now, gDoc will only insert “text” inputs.
Here is an example of how we would modify the above form’s CSS.
form#my-form input {
display: block;
margin: 5px auto;
padding: 5px;
border-radius: 3px;
border: #ddd solid thin;
}
form#my-form input[type="submit"] {
background-color: dodgerblue;
color: #fff;
border: none;
border-radius: 3px;
}
Enjoy!