// Jason's Plugins For Carrd

Reviews Carrd plugin

A free Carrd plugin template to collect and display reviews from a Google Form. Yes, collect, not just display! See demo here →

Made by @jasonleowsg

// Demo

Customer reviews

Customers fill in a Google Form like this one →.The plugin reads from the Google Sheet appended to the Google Form, and displays the reviews below. You can hide specific reviews if you want to.The tutorial will walk you through how to wire it all together.


Loading reviews...

Tutorial

HOW TO SET UP THE REVIEWS PLUGIN FOR CARRDThe Reviews plugin lets you collect testimonials using Google Forms and automatically display approved reviews on your Carrd site.You can see the plugin here:https://reviewsplugin.carrd.coThe setup works like this:Google Form → Google Sheet → Google Apps Script → Reviews plugin → CarrdWhen someone submits a review through your Google Form, it is saved to Google Sheets. Google Apps Script converts the Sheet data into JSON, and the Reviews plugin fetches that data and displays the testimonials as a responsive masonry-style gallery on your Carrd site.---1. CREATE YOUR GOOGLE FORMFirst, create a new Google Form that customers can use to submit their reviews.Go to:https://forms.google.comCreate a blank form and add the following questions.Your nameUse a Short answer field.The question must be named exactly:Your nameYour designation/jobUse a Short answer field.Name it exactly:Your designation/jobFor example, someone might enter:Founder, Acme Studioor:Product DesignerYour emailUse a Short answer field.Name it:Your emailThis can be useful for contacting the reviewer, but the Reviews plugin will not expose the email address in the JSON or display it on your website.ReviewUse a Paragraph field.Name it exactly:ReviewGive us a ratingAdd a rating question and name it exactly:Give us a ratingThe Reviews plugin expects a rating from 1 to 5.---2. CONNECT YOUR GOOGLE FORM TO GOOGLE SHEETSOnce your form is ready, open the Responses section of Google Forms.Click the Google Sheets icon to create a spreadsheet for your form responses.Google Forms will automatically create a spreadsheet and usually name the response tab:Form Responses 1Leave this tab name unchanged, because the Apps Script we'll use later looks for a sheet with this exact name.Your Sheet should now contain columns similar to:| Timestamp | Your name | Your designation/job | Your email | Review | Give us a rating |Google Forms will automatically add new responses as new rows.---3. ADD THE "SHOW ON SITE" COLUMNWe also need a way to manually hide reviews that you don't want displayed publicly.In your Google Sheet, add one additional column to the right of your Form response columns.Name it exactly:Show on siteYour Sheet should now look something like:| Timestamp | Your name | Your designation/job | Your email | Review | Give us a rating | Show on site |
| ------------ | ----------- | ---------------------- | ----------- | -------- | ---------------- | -------------- |
| ...................... |  Jane Doe  |            Designer             | .................... | Great!   |              5              |                          |
| ...................... |  John Doe  |            Founder             | .................... | Useful!  |              5              |           No          |
The logic is simple:- Leave the cell blank → review is shown.
- Enter No → review is hidden.
The check is case-insensitive, so No, NO, or no will all hide the review.This gives you an easy moderation system directly inside Google Sheets.---4. SET UP GOOGLE APPS SCRIPTNow we'll turn the Google Sheet into a simple JSON endpoint that the Reviews plugin can read.From your Google Sheet, go to:Extensions → Apps ScriptThis opens the Apps Script editor connected to your spreadsheet.You should see a default function similar to:function myFunction() {}
Delete the default code.Paste the following code instead:function doGet() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form Responses 1');
const data = sheet.getDataRange().getValues();
const headers = data.shift();
const reviews = data
.filter(row => {
const showOnSite = row[headers.indexOf('Show on site')];
// Hide only if explicitly set to "No"
return String(showOnSite).trim().toLowerCase() !== 'no';
})
.map(row => {
return {
timestamp: row[headers.indexOf('Timestamp')],
name: row[headers.indexOf('Your name')],
designation: row[headers.indexOf('Your designation/job')],
review: row[headers.indexOf('Review')],
rating: Number(row[headers.indexOf('Give us a rating')])
};
});

return ContentService
.createTextOutput(JSON.stringify(reviews))
.setMimeType(ContentService.MimeType.JSON);
}
Save the project.You can give the Apps Script project a recognizable name, such as:Carrd Reviews---5. MAKE SURE YOUR COLUMN NAMES MATCHThis part is important.The Apps Script searches for your Sheet columns by their exact names:Timestamp
Your name
Your designation/job
Review
Give us a rating
Show on site
If you rename one of these columns, you will also need to update its corresponding name in the Apps Script.For example:headers.indexOf('Your designation/job')
looks specifically for a column called:Your designation/jobThe Your email column is intentionally ignored.This means email addresses collected through your form aren't included in the public JSON data used by the plugin.---6. DEPLOY YOUR APPS SCRIPT AS A WEB APPNow we need to give your Carrd site a URL from which it can retrieve the reviews.In Apps Script, click:Deploy → New deploymentFor the deployment type, choose:Web appFor "Who has access", choose:AnyoneConfigure the deployment so the web app runs as you and can be accessed by visitors to your public Carrd site.Then click:DeployGoogle may ask you to authorize the script the first time. Follow the authorization prompts.After deployment, Google will give you a Web app URL.It should look something like:https://script.google.com/macros/s/ABC123XYZ/exec
Copy this URL.Important: use the /exec URLUse the URL ending in:/execDo not copy the long script.googleusercontent.com URL that Google may redirect you to.Your /exec URL is the stable Web App endpoint you'll put into the Reviews plugin.---7. TEST YOUR JSON ENDPOINTBefore adding anything to Carrd, test the Apps Script endpoint.Paste your /exec URL directly into your browser.You should see JSON similar to:[
{
"timestamp": "2026-09-29T02:00:00.000Z",
"name": "Jane Doe",
"designation": "Designer",
"review": "This was incredibly useful.",
"rating": 5
},
{
"timestamp": "2026-09-29T03:00:00.000Z",
"name": "John Doe",
"designation": "Founder",
"review": "Easy to set up and works great.",
"rating": 4
}
]
Notice that there is no email field.If you enter:Nounder Show on site for one of the reviews, that review should disappear from the JSON.You may need to refresh the endpoint after making changes.---8. ADD THE REVIEWS PLUGIN TO CARRDNow open your Carrd site.Add an Embed element where you want your reviews to appear.Set the Embed type to:CodeSet the Style to:InlinePaste the Reviews plugin code into the embed. Remember to uncheck the "Defer script tags" Option.The plugin uses HTML, CSS and JavaScript together in a single block.The main part you need to customize is this line:const API_URL = "https://script.google.com/macros/s/<token goes here>/exec";
Replace the example URL with the /exec URL you copied from Google Apps Script.For example:const API_URL = "https://script.google.com/macros/s/ABC123XYZ/exec";
Your Carrd site is now connected to your Google Sheet.---9. HOW EVERYTHING IS WIRED TOGETHEROnce everything is configured, the complete flow looks like this:Customer
↓
Google Form
↓
Google Sheet
↓
Google Apps Script
↓
JSON endpoint
↓
Reviews plugin
↓
Carrd website
A customer submits your Google Form.Google automatically adds their response to your Sheet.The Apps Script reads the Sheet and converts the relevant columns into JSON.Your Carrd site fetches that JSON when the page loads.The Reviews plugin then turns each review into a testimonial card.You don't need to manually copy testimonials into Carrd.---10. SHOWING AND HIDING REVIEWSYou can manage which testimonials appear directly from Google Sheets.To show a review, leave:Show on siteblank.To hide a review, enter:NoFor example:| Name | Review | Show on site |
| ------ | -------- | ------------- |
| Jane | Amazing |                        |
| John |   Useful.  |       No            |
| Sarah | Love it! |                         |
Jane and Sarah will appear on the website.John won't.If you later remove No from John's row, his testimonial will appear again.---11. HOW THE MASONRY GALLERY WORKSThe Reviews plugin uses a responsive masonry-style layout.On larger screens it displays:┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│                ★★★★★               │ │               ★★★★★                │ │                ★★★★☆                │
│                                                  │                                                        │                                                        │
│                    Short                    │ │             This is a                       │ │                  Medium                  │
│                   review.                   │ │             much longer              │ │                   review...                 │
└─────────────┘ │              review that               │ └─────────────┘
┌─────────────┐ │              takes up                    │ ┌─────────────┐
│                ★★★★★               │ │              more space.              │ │                ★★★★★               │
│                                                   │ └─────────────┘ │                                                  │
└─────────────┘ ┌─────────────┐ └─────────────┘
Long reviews are allowed to make their cards taller without forcing every other card in the row to have the same height.By default the plugin displays:- 3 columns on desktop
- 2 columns below 800px
- 1 column below 550px
You can change these values in the CSS.For example:.reviews {
column-count: 3;
}
controls the desktop column count.---12. UPDATING THE APPS SCRIPT LATERIf you make changes to your Apps Script after deploying it, saving the code alone does not necessarily update the code being served by your existing /exec deployment.Go to:Deploy → Manage deploymentsSelect your existing Reviews deployment and click the Edit/pencil icon.Under Version, choose:New versionThen deploy the update.This updates the existing deployment while keeping the same /exec URL.That means you don't have to go back into Carrd and replace your API URL every time you change the Apps Script.Where possible, update your existing deployment rather than creating a completely new Web App deployment.---13. TROUBLESHOOTINGReviews aren't appearingOpen your Apps Script /exec URL directly in your browser.If you can see your reviews as JSON, the Google Form → Sheet → Apps Script connection is working.Then check that the same /exec URL has been entered into:const API_URL = "...";
inside your Carrd plugin.---A field is missing from the JSONCheck that the Google Sheet column name exactly matches the name expected by the Apps Script.For example:headers.indexOf('Your designation/job')
requires:Your designation/jobnot:Your designation/jobbIf Apps Script can't find the header, indexOf() returns -1, and that value may disappear from the resulting JSON.---A review is still showing when it shouldn'tEnter:Noin its Show on site cell.The Apps Script trims whitespace and ignores capitalization, so all of these will work:No
no
NO
Anything other than No, including a blank cell, will show the review.---The Carrd page says "Unable to load reviews."First, open the /exec URL directly.If it doesn't return JSON, troubleshoot the Apps Script deployment first.If the endpoint works, open your browser's Developer Tools and check the Console and Network tabs for errors.---THAT'S IT!You now have a lightweight reviews/testimonial system powered by:Google Forms + Google Sheets + Google Apps Script + CarrdCustomers can submit reviews through your form, you can moderate them from a spreadsheet, and approved testimonials automatically appear in a responsive masonry gallery on your Carrd site.No database or backend server is required.Reviews plugin for Carrd:
https://reviewsplugin.carrd.co