๊ฐ step one ๊ฑ
โณ first, find an image or two on a search engine or pinterest/something like it. it's best to use images with plain color (like white or black) backgrounds.
๊ฐ search terms to try ๊ฑ
โณ lace trim
โณ lace divider
โณ floral divider
โณ heart divider
โณ clouds divider
โณ bow/ribbon divider
โณ divider clip art
๊ฐ step two ๊ฑ
โณ either copy and paste the image or download and upload the image into remove.bg. use erase/restore as needed.
๊ฐ step three ๊ฑ
โณ you're done! pretty simple, right? good work \(^_^)/
important notes: as an example, i'm making an interest tracker with a short text field, a multiple choice drop-down menu, a single choice drop-down menu, and two long text fields, but you can use these forms in whatever way you like. also, there are two things you'll need to be able to do this - a google account so you can use google sheets, and have your carrd upgraded to either pro standard or pro plus so you can use the embed option. you're probably gonna need a basic understanding of coding if you want to change the looks of it, but i'm gonna try to make it as easy as possible.
โย STEP ONE:ย PREPARING GOOGLE SHEETS
once your locked into your account, create a new spreadsheet on google sheets. you can name it something like "Form Responses" or whatever else you like to make it easy to find later. then, in the first row, set the headers to match your form fields. for my interest tracker, it looks something like this:
the next thing you'll need to do is open the apps script editor. you can find it under extensions -> apps script. delete whatever code is already added in and add this code and save it:
function doPost(e){
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = JSON.parse(e.postData.contents);
sheet.appendRow([
new Date(),
data.username, // change the values after data. to whatever you put in the id="" section in your code on carrd
data.museSelect,
data.dynamic,
data.theirMuse,
data.details,]);
returnContentService.createTextOutput(JSON.stringify({ result: "success" }))
.setMimeType(ContentService.MimeType.JSON);}
save it and name the project something like "FormSubmit". next click deploy -> new deployment and a popup should open up. there you'll need select the type by clicking on the small gear symbol next to it. choose the type web app and more fields should appear on the right side. type some kind of description (optional), make sure that under "execute as" you've selected me ([email protected]), and under "who has access" you've selected anyone.
you'll need to deploy it now, and once it has finished loading, you'll need it to authorise access. do so by clicking on the button and choose the google account your currently using. once you do that a warning might pop up:
in that case, show the advanced options and choose Go to FormSubmit (unsafe). it will show you the app will want to use (in this case: See, edit, create, and delete all your Google Sheets spreadsheets) so allow it to do so - after all, this is exactly what we want the app to do. once that is dealt with, you'll receive a notification that the deployment was successful. you'll also receive a script link for the web app (highlighted in the picture down below) that we're going to need later so save it somewhere.
last thing you need to do now is go back to your sheet document, and go to extensions -> macros -> import macros. you'll find your project there. just click "add function" so it's marked with a checkmark and you're done. next up we're going to prepare your carrd.
โย STEP TWO:ย ADDING HTML CODE TO CARRD
use whichever of your carrds you want the form to have and place the embed element in the space you want your form to show up.
make sure the "type" is set to code, as for the title, you can choose one (which i'd recommend if you plan on using more than one embed element, because as a heads up, what you're doing now, will not show up in the builder, it will only be visible in the actual page (see down below to see the difference - left image is how it will look in the builder and right how it will look on the page):
before we get to the actual coding, though, make sure to scroll down in the menu and uncheck "defer <script> tags". otherwise some parts of the code (the multiple choice drop-down menu in particular) are not going to work.
when that is done, you can find the code i've made in this file. you can just copy and paste it into the code area of the embed element. the grey text is my notes (you can just delete it if you don't need it, but it won't affect the form anyway) to make it easier for you to change things in whatever way you need and to figure out what is used/needed for which element.
now, you'll need your previously generated url from the web app we've saved previously, as you need to copy & paste it into the script section of your code (the exact place is highlighted in the image below):
when that is done and you've made it look the way you want, save your carrd and open it to see if it works. just put something in, click submit and the successful submission message should pop up and your input should show up in the google sheet with the time and date of submission.
now you've successfully made a submission form for your carrd! :)
โย ADDITIONAL TIPS
if you want to play around with the code without having to save and check on carrd all the time, copy + paste the html code into this website, it's free, and you can change colors, sizing, everything you think needs fixing in whatever way you like and see results immediately (after clicking on "run"). this site in general is great if you have any questions regarding what each property does and in which ways you can change it. highly recommend using it if you have some trouble.
also, if you have any questions regarding this, feel free to ask and i'll try to explain it as well as i can.
Carrd is now 40% off for all plans with the code BLK2025, great time to grab one of my templates made by artist for artist, perfect for your portfolio showcase
