
If you are planning a wedding, you know how important it is to set the right tone from the very beginning. One of the first things your guests will see is your wedding invitation, and it should reflect your unique style and personality. With RenderForm, you can create beautiful, customized online wedding invitations that are as unique as your love story.

In this blog post, we will show you how to create personalized online wedding invitations for your guests using RenderForm's no-code platform.

## Why choose online wedding invitations?

Online wedding invitations offer a modern, eco-friendly, and highly customizable alternative to traditional printed cards. Here are a few benefits:

- **Personalization at scale**: Customize each invitation with the guest's name or a special message.
- **Eco-conscious**: Go paperless and reduce waste without sacrificing elegance.
- **Faster delivery**: Send invitations instantly via email, messaging apps, or even social media.
- **Easier RSVPs**: Include direct RSVP links to manage your guest list with ease.
- **Budget-friendly**: Avoid printing and postage costs while still making a beautiful impression.

## Create your wedding invitation template

Let's start by creating a template for your wedding invitation. You can use RenderForm's Canvas editor to design your invitation visually or the HTML editor for more control over the code.

1. **Choose your template size**. A common size for online invitations is **1080x1920 pixels** (Instagram Stories), but you can adjust it to fit your needs.

2. **Add a background image or color** that matches your wedding theme. You can use a solid color, a gradient, or an image that represents your style. In my example, I used a custom paper-like SVG background image created in Sketch.

![Background image](/blog/wedding-invitation-template-background.jpeg)

> Once ready, lock the background layer to prevent accidental changes while editing other elements.

3. **Add text elements** for the couple's names, date, time, and location. I used a combination of Lora for body text and Parisienne for guest names and key highlights.

![Text elements](/blog/wedding-invitation-template-texts.jpeg)

4. **Add decorative elements** like floral designs, lines, or icons. I included a floral header design (generated by ChatGPT) to give it a soft, romantic feel.

![Wedding invitation template](/blog/wedding-invitation-template.jpeg)

It's a simple yet elegant design that sets the right tone for a wedding.

### Prepare your template for personalization

Next, identify the parts of your invitation that should change for each guest. In my case, I chose the guest name and greeting line.

To do this:
- Click on each editable element in your template.
- Set its ID in the right sidebar — e.g., `guests` for the name, `greeting` for the greeting line.

![Template personalization](/blog/wedding-invitation-template-personalization.jpeg)

It makes it easier to identify the elements when you are personalizing the template later.

> **Tip**: Lock all static elements to avoid accidental edits while generating your personalized images.

Make sure to enable **Dynamic font size scaling** for your personalized text elements. This ensures that longer guest names or greetings will still fit neatly within your design.

![Auto size text element](/blog/wedding-invitation-template-auto-size.jpeg)

## Prepare your guest list

Now that you have your template ready, it's time to prepare your guest list with their names and any other personalized information you want to include in the invitation.

Create a spreadsheet with columns for the fields you want to personalize. In my example, I created a simple file with the following columns:
- `_fileName` (to specify the file name for each invitation)
- `guests.text` (to specify the names of the invited guests)
- `greeting.text` (to specify the greeting line)

![Guest list example](/blog/wedding-invitation-guest-list-example.jpeg)

Once ready, export the file as an Excel spreadsheet (.xlsx). Make sure to save it in a location where you can easily access it later.

> Be sure that column headers match the component IDs and properties from your template (e.g., guests.text).

## Generate personalized invitations

Now that you have your template and guest list ready, you can generate personalized invitations for each guest.

1. Go to **Plugins** and select the **Spreadsheet** option. 

2. Choose your wedding invitation template and upload the guest list file you created earlier.

3. Confirm all data is mapped correctly and click on **Render**. 

RenderForm will generate personalized invitations for each guest based on the template and the data from your spreadsheet.

![Generating online wedding invitations](/blog/wedding-invitation-template-generating.mp4)

After rendering, review the generated images to ensure everything looks perfect, then click **Export** to **download the images**.


## Send your invitations

With your personalized invitations ready, it's time to share them with your guests!

You can send them manually via email, WhatsApp or Messenger, Instagram or other social media platforms.

Or, take it a step further and **automate the sending** using tools like:
- Mailchimp or ConvertKit for email campaigns
- Zapier or Make (Integromat) for connecting RenderForm with Google Sheets, email services, and messaging APIs
- CRM or RSVP tools to track responses and updates

This way, you can create, personalize, and send hundreds of beautiful invitations — all within minutes, and without writing a single line of code.

## Final thoughts

Online wedding invitations offer the perfect balance of style, efficiency, and personalization. With RenderForm, you can create beautiful designs that feel intimate and unique for every guest — all while saving time, money, and paper.

Whether you are sending them via email, social media, or embedded in your wedding website, RenderForm makes the process smooth and delightful.

Customized online wedding invitations


If you are looking to add your own graphics or tweak the look of your templates in RenderForm, using SVG elements is a great option. In this post, I will walk you through how to insert custom SVGs using both the Canvas editor and the HTML editor, and why SVGs are a useful format to work with.

## First, What is an SVG?

SVG stands for **Scalable Vector Graphics**. It's a way of creating images using code, and it's especially handy because the graphics can scale to any size without getting blurry. Unlike JPEGs or PNGs, SVGs don't lose quality when resized.

In RenderForm, you can use SVGs to build things like custom icons, logos, charts, shapes, or even full illustrations. And because they're made with code, you can style and tweak them directly in the template editor.

### Why use SVG in your templates?

Here are a few reasons why SVGs are useful:
- They stay sharp at any size. Whether someone is looking at your image on a tiny phone or a big monitor, it will still look clean.
- They are easy to style. You can change colors, sizes, and even animate parts of them using CSS.
- You don't need extra image files. One SVG can often replace multiple versions of the same graphic at different sizes.

## How to insert SVG elements into your template?

RenderForm gives you two main ways to work with SVGs: the Canvas editor and the HTML editor. Here is how both options work.

### Using the Canvas Editor

Open your template in RenderForm's canvas default editor or create a new one. 
In the left sidebar, choose the **Custom** component and upload your SVG file.

![SVG component upload](/blog/svg-component-upload.jpeg)

Place the SVG element on the canvas. You can move it around, resize it, and position it wherever you want.

![SVG in Canvas editor](/blog/svg-in-canvas-editor.jpeg)

You can also change some of the visual details. For example, you can:
- Adjust the fill color
- Tweak stroke width
- Set opacity
- Add shadows
- Control individual layers within the SVG

![SVG adjusted](/blog/svg-adjusted.jpeg)

This method is good if you want to upload and adjust SVGs without touching any code.

### Using the HTML Editor

If you are comfortable with code or want more control over the SVG, you can insert it directly in the HTML editor.

Open your template in the HTML editor or create a new one. Paste your SVG markup right into the HTML using the `<svg>` tag. Use CSS to style it however you want.

Below is an example and result of styling an SVG element using CSS:

![SVG styling in HTML editor](/blog/svg-styling-html-editor.jpeg)

Inline SVGs can be manipulated just like any HTML element:
- You can change colors dynamically.
- You can apply filters like `grayscale()`, `drop-shadow()`, `sepia()`, `blur()`.
- You can even add interactivity (like `:hover` effects or animations).

Since SVGs are just code, you can treat them like any other HTML element. This makes them pretty flexible if you want to get creative.

![Creative SVG example](/blog/svg-css-example.jpeg)

## Ideas for using SVG in your templates

Here are a few ideas of how you can use SVGs in your templates:

- **Icons**: Clean and scalable icons for buttons or navigation
- **Logos**: Company logos that look good at any size
- **Charts and graphs**: Simple graphs and visualizations you can style and animate
- **Background patterns**: Use SVG patterns as backgrounds for sections of your template. They can be easily manipulated and styled to create unique designs.
- **Illustrations**: Hand-drawn or vector-style images you can tweak right inside RenderForm
- **Decorative elements**: Use SVG shapes and patterns as decorative elements in your template. They can be easily manipulated and styled to create unique designs.
- **Custom shapes**: Circles, arrows, lines, and other unusual elements to give your design some personality

You can make SVGs using tools like Figma, Adobe Illustrator, Sketch, or Inkscape, then export them and upload to your RenderForm template.

## Conclusion
Adding your own SVGs is a great way to make your RenderForm templates feel more personal or tailored to your style. Whether you prefer dragging and dropping in the Canvas editor or digging into code with the HTML editor, both approaches are simple once you get the hang of them.
Give it a try, and see what you can build. If you get stuck or have questions, the support team is always around to help.

How to add custom SVG elements to your template


Autogenerating images with ratings is a great way to add a fun and engaging element to your forms. As an addition to the existing star rating options, we are excited to introduce a new feature that allows you to use emojis as ratings in your forms.

## Rating with emojis

Emoji rating are a fun way to present a rating system in your forms. Instead of using traditional star ratings, you can now use emojis to represent different levels of satisfaction.

To use emoji ratings in your templates, choose **Rating** component option and then change the rating element from customizable star to emoji.

![Emoji rating component](/blog/emoji-rating-component.jpeg)

You can choose from a variety of emojis to represent different levels of satisfaction, such as happy faces, sad faces, or any other emoji that fits your brand or theme.

> You can also customize the emoji max rating by setting up the number of emojis you want to use and also adjust the size and style of the emojis to fit your design.

## Set rating during image generation

When you use the emoji rating component, you can set the rating during image generation. This means that you can automatically generate images with the selected emoji rating, making it easy to create visually appealing content for your forms.

For example, when we want to generate multiple food images with different with different spice levels, we can set the rating to 1-3 and use the chili emoji to represent the spice level. 

For that, I will use **Spreadsheet** plugin to generate a list of images based on my food card template. Here is how the data looks like:

![Spreadsheet data](/blog/emoji-rating-spreadsheet.jpeg)

> I set rating value for each food item (from 1 to 3) in the `rating.value` column.

Then, I go to **Plugins** and select **Spreadsheet**. I choose the **Food Card** template, upload the spreadsheet, and start image generation.

![Spreadsheet plugin ](/blog/emoji-rating-spreadsheet-plugin.mp4)

As you can see, the generated images now include the emoji rating based on the values set in the spreadsheet. This allows you to create a consistent and visually appealing representation of food items with their corresponding spice levels.

## Use cases

Emoji ratings can be used in various scenarios, such as:
- **Product reviews**: ⭐⭐⭐ Use emoji ratings to show customer satisfaction with your products
- **Movie ratings**: 🎬🎬🎬 Use emoji ratings to represent how much people enjoyed a movie
- **Food ratings**: 🌶️🌶️🌶️ Use emoji ratings to show how spicy or delicious a dish is
- **Service quality highlights**:  👍👍👍 Display how customers rate your service with visual emoji scores
- **Workout intensity**: 💪💪💪 Use emoji ratings to show how intense a workout is 
- **Fashion ratings**: 🔥🔥🔥 Use emoji ratings to show how stylish an outfit is
- **Game ratings**: 🎮🎮🎮 Use emoji ratings to show how much people enjoyed a game
- **Travel experience**: ✈️✈️✈️ Use emoji ratings to show how much people enjoyed their travel experience

## Conclusion

Emoji ratings are a fun and engaging way to present ratings in your forms. With the new feature in RenderForm, you can easily add emoji ratings to your templates and set the rating during image generation. This allows you to create visually appealing content that resonates with your audience.

Introducing: Emoji Rating


We are excited to announce a new update to RenderForm that will make it easier to manage your templates.
In this blog post, we will introduce you to the new template tags feature and show you how to use it to streamline your workflow.

## How to use tags

Tags are a powerful way to organize your templates and make them easier to find. You can use tags to categorize your templates by type, purpose, or any other criteria that makes sense for your workflow. For example, you could use tags like "onboarding," "feedback," or "marketing" to group your templates.

You can also use tags to filter your templates in the template library. This makes it easy to find the templates you need without having to scroll through a long list of options.

## Assigning tags to templates

To add tags to your templates, simply go to the template editor and click on the **Tags** field in the right sidebar. Click on the field and start typing to add a new tag or choose from existing tags.
Save your changes, and the tags will be applied to your template.

![Adding tags to a template](/blog/adding-tags-to-template.jpeg)

> You can add multiple tags to a single template for better organization, and remove them by clicking on the **X** next to the tag name.

## Filtering templates by tags

In **My templates**, you can filter your templates by tags. To do this, click on the **Filter by tags** option in the top right corner of the template library and select the tags you want to filter by. This will show you only the templates that match your selected tags.

![Filtering templates by tags](/blog/filtering-templates-by-tags.jpeg)

## Conclusion

We hope you find the new template tags feature helpful in organizing your templates and streamlining your workflow. If you have any questions or feedback, please don't hesitate to reach out to us. We are always looking for ways to improve RenderForm and make it easier for you to create beautiful and efficient template forms.

Stay tuned for more updates and features coming soon!

Introducing: Template Tags


## Introduction
Without any doubt images are a crucial part of any visual content and template that can be created in RenderForm.
They can be used to enhance the visual appeal of the content, provide context, and make the content more engaging. However, there are some common issues that can arise when working with image automation and rendering.
In this article, we will discuss some of the most common issues with rendering images in RenderForm and how to solve them.

## Image tester tool

Before we start discussing the common issues with rendering images in RenderForm, we would like to introduce you to the [**Image tester tool**](/tools/image-cors-tester-tool/) that can help you to test the image URL before using it in the template.

![Image tester tool](/blog/image-cors-tester-image.jpg)

Put the image URL in the input field and click on the **"Test Image"** button to see if the image is publicly accessible and can be displayed in RenderForm.

## Image not showing up

One of the most common issues with rendering your templates in RenderForm is that the image does not show up at all.
This can happen for a variety of reasons, the most obvious being that the image URL is incorrect. The easiest solution is to open the image that has been sent to the RenderForm,
to see if the image is displayed correctly. You can review the image URL on "**[My Render Results](/console/my-requests/)**" page and click on "**Details**" to see
what image URL was used during the rendering process.

![Review the image URL](/blog/rendering-images/review-render-result-details.jpeg)

If the image URL is correct, there may be other reasons why the image is not showing up. Below are some common issues that can cause the image to not show up in RenderForm and how to solve them.

### Incorrect image format

**Canvas Editor**: RenderForm supports two of the most common image formats such as JPEG, PNG, and PNG with transparency. If the image is in a different format, display the image in the output content is not guaranteed.

**HTML Editor and Canvas Editor (beta)**: In those editors, you can use any image format that is supported by the browser, such as JPEG, PNG, GIF, SVG, or WebP. However, the image format may not be supported by the browser or the image hosting provider, which can cause the image to not show up in the content.

### Image is not publicly accessible

RenderForm requires that the image is publicly accessible to display it, that means that the image must be hosted on a server that allows public access to the image **without any authentication or having to log in**.
For example if you are trying to render an image from a private Google Drive folder, it will not be displayed in RenderForm.

To check if the image is publicly accessible, try to open the image in a private tab in your browser, if the image opens in a new tab, and you can see it, then the image is publicly accessible.

### Image is not allowed to be hot-linked

Some image hosting providers may allow public access to the images, but they may not allow hot-linking, which means that the image cannot be displayed on a different website than the one it is hosted on.
For example, you cannot use images uploaded to Airtable and display them on your website as they do not allow hot-linking and the images won't show up **even if they are publicly accessible**.

Unfortunately, there is no easy way to check if the image is allowed to be hot-linked, the best way is to check the image hosting provider's terms of service or contact the provider to ask if hot-linking is allowed.

### Access to the image is blocked or expired

Some image hosting providers may permanently or temporarily block access to the images after some time or require authentication to access the image, which can cause the image to not show up in RenderForm.
Even if the image is publicly accessible at time of checking it, the provider may block access to the image after some time or require authentication to access the image to prevent leaking public data.
Sometimes provider may block access due to high traffic, detected automated activity (RenderForm is an automated activity), restrict access to the image for specific clients (for RenderForm but not for you) or other reasons.

Unfortunately, there is no easy way to check if the image access is blocked or expired as different providers have different policies and ways of handling this.
The best way is to check the image hosting provider's terms of service or contact the provider to ask if they block access for automated activities or after some time.

### Image hosting issue

Sometimes the image may not show up due to an issue with the image hosting provider, such as the server being down, the image being deleted, or the image being moved to a different location.
RenderForm does not re-try to fetch the image if it fails to load, so if the image is not available at the time of rendering, it will not be displayed in the content, and it will
require re-rendering the content to try to fetch the image again.

### Image took too long to load

If the image took too long to load, it may be due to the image being too large or the image hosting provider being slow to serve the image.
RenderForm wait for a few seconds for the image to load, if the image is not loaded in time, it will not be displayed in the content.

Make sure that the image is not too large and that the image hosting provider is fast enough to load the image in a reasonable amount of time. If the image is too large, try to resize the image or compress it to reduce the file size.

### Image weight is too big

Another common issue with rendering images in RenderForm is that the image is too big, which can cause the image to not show up or take a long time to download and fail to load eventually.
Large images can slow down the loading time or exceed the maximum total size allowed for the template in RenderForm that is set due to security and performance reasons.

There is no strict limit on the image weight, but it is **recommended to keep the image weight below 1MB** to ensure that the image loads quickly and does not slow down the loading time of the content.

### Image dimensions are too large

However, the image weight is not the only factor that affects the loading time, the image dimensions also play an important role. **Too large images that exceed 5000 pixels in width or height may not be displayed correctly due to performance reasons.**
Good practice is to not use images larger than the template size, for example if the template is 800px wide, the image should not be larger than 800px wide. There is no benefit in using larger images than the template size as they will be scaled down to fit the component size,
that may affect the image quality.

![Check image component dimensions](/blog/rendering-images/image-dimensions.jpeg)

Both the image weight and dimensions can be reduced by resizing the image or compressing it to reduce the file size. There are many online tools that can help you resize or compress the image, such as **TinyPNG**, **ImageOptim**, or **Squoosh**.


### Auto-scaling images

If you know that your images will be too large, you can enable **"Auto-scale external images"** in the template settings. This option will automatically scale down the image to fit the template size.
The option is available in the inspector section on the right side of the template editor.

![Auto-scale external images feature](/blog/rendering-images/auto-scale-external-images.jpeg)

Images are scaled down only if they are too large. **Every scaling operation decreases credit by an additional 1 credit.**

## How to choose the right image hosting provider

When choosing an image hosting provider, make sure that the provider allows public access to the images and that it allows hot-linking,
the best solution is to use a dedicated image hosting provider like [Imgur](https://imgur.com), [ImgBB](https://imgbb.com), or any other that allows public access to the images and hot-linking or use a CDN like [Cloudinary](https://cloudinary.com) or [AWS S3](https://aws.amazon.com/s3/).

**Solutions like Dropbox or Airtable are not recommended for hosting images for rendering content as they may block access to the images or require authentication after some time.**

## Image quality issues

Showing images in RenderForm is not only about displaying the image, but also about the quality of the image.
We want to make sure that the image is displayed in the best quality possible, we do not make any processing (compression, resizing) without your explicit consent, to the image to keep the quality as high as possible.
However, there are some common issues that can affect the image quality in RenderForm, below are some common issues and how to solve them.

### Image effect is not applied or is not working as expected

When you apply a color effect to an image in RenderForm with "Effect" option, the effect may not be applied or may not work as expected due to the image format or image size.

![Image effects](/blog/rendering-images/image-effects.jpeg)

Usually, the most common issue is that the image is too large, and the effect cannot be applied to the image due to performance reasons.
The image weight should be below 1MB to ensure that the effect is applied to the image and that the image loads quickly.

### Image is pixelated or blurred

To make sure that your image your won't be pixelated or blurred, make sure that the image is not too small, or too big and the quality is not too low.
The rule of thumb is to use images with a resolution that matches the image component size in the template, for example if the image component is 800px wide, the image should be **at least 800px wide** to ensure that the image is not pixelated or blurred.

![Enhance effect to use a better image scaller](/blog/rendering-images/enhance-effect.jpeg)

For images that dimensions are much higher than a template dimensions, you may see an unwanted a blur effect.
You can try to apply the "**Enhance**" effect to the image; it should make the image crisp again.

## Conclusion

In this article, we discussed some of the most common issues with rendering images in RenderForm and how to solve them.
The best way to avoid these issues is to make sure that we use reliable image hosting providers that allow public access to the images and hot-linking to avoid problems with image access.
Finally, we described how to ensure the image quality by making sure that the images used for rendering matches the desired dimensions, weight, and quality to avoid pixelation or blurring.


Fixing common issues with rendering images


In this blog post, I’ll show you how to quickly generate many images for an online session, video course, or conference.
I’ll use [RenderForm](/) to create a template, load data from a spreadsheet, and generate the images.

## Create a template

I used a predefined template from the **Templates** tab and adjusted it to my needs. RenderForm offers a wide selection of templates across many categories.
You can also create your own template from scratch using the easy-to-use template editor.

In this example, I’ll modify text in two places and change the image (you can see component names in the left panel):

- `author_photo` – author image on the right side
- `author_name` – author name under the image
- `title` – session title

![template in canvas editor for marketing automation](/blog/template-in-canvas-editor.png)

## Create a spreadsheet

I created my spreadsheet in **Numbers** (macOS default), but you can use Excel or any other spreadsheet app.

In the first row, I entered the component names along with the property I wanted to modify, separated by a dot.

A **property** is the variable of a component that you want to change—for example, text, image source URL, background color, or opacity.
See the docs for more info on [components and their properties](/docs/general/template-properties/).

Here’s what my spreadsheet includes:

- `author_photo.src` – change the image source of the `author_photo` component
- `author_name.text` – change the text of the `author_name` component
- `title.text` – change the text of the `title` component

> Optionally, you can add the `_fileName` property to define the name of the generated image.
> Keep in mind that the file name must be unique and **should not include a file extension**, as it will be added automatically.
> If you don’t specify this property, a name will be generated automatically.

![data in spreadsheet](/blog/data-in-spreadsheet.png)

## Generate images

Now go to the **Extensions** tab in RenderForm and open the **Spreadsheet** extension.
Click **Import from file** to upload your spreadsheet, and select the template you want to use on the left side.

![RenderForm extensions](/blog/bannerly-extensions.png)

If all the properties in your file match the components in your selected template, you're ready to generate.

Click the **Generate** button at the top of the list. Make sure not to close the window until the generation process is complete.

![list with generated images in spreadsheet extension](/blog/list-with-generated-images.png)

Once the generation finishes, you’ll be able to download all the images using the **Download** button.

![generated images from template for marketing automation](/blog/generated-images.png)

With the **Spreadsheet** extension, you can quickly generate many images using one template and custom content.
Combined with RenderForm's editor, it’s a powerful way to create blog post covers, marketing visuals, or brochures that match your brand or platform style.

<Vimeo/>


How to create many images from a spreadsheet?


Do you often forget team members' birthdays or struggle to send greetings on time? You are not alone. Even in the most thoughtful teams, birthday wishes can get lost in the chaos of deadlines and meetings. But what if you could automate it — and still make each message feel personal and warm? 

In this post, you will learn how to build a simple no-code automation that sends personalized birthday cards to your team on Slack using Google Calendar, [Zapier](/blog/posts/image-generation-with-zapier) (or even [Make.com](/blog/posts/image-generation-with-make)), and RenderForm.

## 🎯 TL;DR: What you'll learn

- Track team birthdays with a dedicated Google Calendar
- Auto-generate personalized birthday card images using RenderForm
- Send cards automatically to Slack with Zapier
- Create a scalable, no-code workflow for team celebrations

## Why automate sending birthday cards

Automating the process of sending birthday wishes is a great solution for various reasons:

- You never forget to send wishes, even during busy times.
- Enables scalability, allowing you to send personalized wishes to many recipients simultaneously.
- Saves time and effort by eliminating manual intervention.
- Maintains consistency in your birthday greetings.
- Allows for scheduling and customization in advance, creating a seamless and heartfelt experience for recipients.

Automating birthday wishes makes the process easier and more enjoyable for you. By saving time and effort, automation allows you to spend more quality time with the birthday person. It simplifies the process and lets you focus on the personal aspects of celebrating their special day.

## Birthday wishes automation

The automation we are going to build works great especially for workspaces and teams. The automation combines the power of three platforms:

- [Google Calendar](https://calendar.google.com/): Utilizing Google Calendar, we will **create a dedicated calendar** to keep track of team members' birthdays.
- [RenderForm](http://renderform.io): With RenderForm, we can easily **generate personalized birthday cards**, ensuring a unique touch for each individual.
- [Zapier](http://zapier.com): By harnessing the capabilities of Zapier, we can seamlessly **connect these apps** and effortlessly send birthday messages and corresponding images to the designated Slack channel.

The end result is simple yet impactful. The birthday person will receive a personalized card filled with warm wishes directly on the selected Slack channel. With this automation in place, celebrating team members' birthdays becomes a breeze, fostering a positive and engaging work environment.

## Create and setup Google Calendar

To begin, let's create a new calendar in Google Calendar specifically dedicated to birthdays. Follow the steps outlined in [Google Support's help base here](https://support.google.com/calendar/answer/37095) to create the calendar effectively.

After creating the calendar, we need to populate it with the actual birthdays of our team members. Here's how you can do it:
1. Add event to your calendar (set event time to hour that aligns with when you want the birthday message to be delivered.)
2. Add the birthday person's name as the **event title**.
3. Set the event to **repeat yearly** to ensure it recurs automatically.
4. In the **description**, include a short personalized birthday message that will be added to the birthday card.
5. Ensure that you select the **Birthdays calendar** you created.
6. Set the event as **Free** to avoid affecting your real work calendar availability.

![Creating birthdays calendar in Google](/blog/birthday-cards/birthday-google-calendar.png)

This step may require some initial effort, but remember that it is a one-time task. You may already have some birthdays in your calendar, which can save you time. Once you have completed adding the necessary birthdays, you're ready to proceed to the next step!

> Once the calendar is ready and filled with birthday dates, you can choose to **hide the calendar** to prevent it from impacting your regular work calendar. This way, you can maintain a clean and organized view while still benefiting from the automation.

## Create birthday card template

Now, let's dive into the exciting part of creating a personalized birthday card using RenderForm. This card template will serve as the foundation for the automated birthday wishes, allowing you to customize selected image elements for each recipient.

![Creating birthdays calendar in Google](/blog/birthday-cards/happy-birthday-slack.jpeg)

To begin, log in to your RenderForm account or [sign up for free](/register) if you don't have an account yet. Navigate to **My templates** and start creating your unique birthday card template. With the RenderForm Template Editor, you have the flexibility to incorporate various elements such as **backgrounds, images, emojis, custom shapes, and more**.

For my birthday card template, I've included specific elements that I want to personalize when the card is sent to different individuals:
- birthday person's name (`name`)
- custom text with wishes (`wishes`)

On the left side of the editor, you'll find all the **template elements (components)**. In addition to the mentioned elements, there's an image, background rectangles with colors, emojis, background circles, and other decorative elements.

![Components of the birthdays card template](/blog/birthday-cards/birthday-template-components.png)

> **Tip 1:** Rename the [template components](/docs/general/template-properties/) to easily identify them later during image automation.\
> **Tip 2:** Lock elements that you don't want to change during image generation. You can do this by clicking on the lock button in the element properties panel.

Once you've crafted your template to perfection, remember to save it. Now, you're ready for the final step: creating the automation.

> Want to send cards to a larger group at once? Check out our guide on [how to generate multiple images with different texts](/blog/posts/how-to-generate-many-images-with-different-text) — perfect for batch greetings.

## Create the automation

In this final step, we'll create and configure the automation using Zapier, which will seamlessly connect all our apps and facilitate the automated birthday message delivery to the selected Slack channel.

To get started, log in to Zapier and create a **new Zap** by following the instructions below.

### Setting up the Trigger from Google Calendar

The trigger event will be an event from our birthday calendar, which will initiate the desired action when a birthday is detected.

#### App & event

Choose **Google Calendar** from available apps and select **Event Start** as the trigger event.

![Setting up Google Calendar as trigger in Zapier automation](/blog/birthday-cards/birthday-automation-zapier-trigger.png)

#### Account

Connect Zapier with your Google account to grant it secure access to your calendar. Rest assured, your calendars will not be shared anywhere.

![Connecting Google Calendar to Zapier](/blog/birthday-cards/birthday-automation-connecting-calendar.png)

#### Trigger

Now, it's time to specify the trigger event. Start by selecting the **Birthdays calendar** where you've added all the birthdays in your Google Calendar. Next, set up the **Time Before** and unit (I recommend setting it to 30 minutes, which means that Zapier will check for triggers 30 minutes before the birthday event and initiate the automation accordingly). Click **Continue** when you're done.

![Setting up calendar trigger in Zapier](/blog/birthday-cards/birthday-automation-zapier-trigger-setup.png)

#### Test

The final step in this part is to test the trigger connection. Simply click on **Test trigger** and wait for the results.

![Testing the trigger in Zapier](/blog/birthday-cards/birthday-automation-zapier-trigger-test.png)

Once the test is completed successfully, click on **Continue** to proceed to the second part of the automation: connecting with the RenderForm birthday card template.

### Action: Link RenderForm template

In the action phase, we'll connect the birthday card template created in RenderForm with the event details from Google Calendar. This will involve using the event title as the birthday person's name and the event description as the personalized wishes.

#### App & event

Search for RenderForm in the list of apps and select **Create Image** as the event.

![Setting up RenderForm as action in Zapier automation](/blog/birthday-cards/birthday-automation-renderform.png)

#### Account

Connect Zapier with your RenderForm account to gain access to your templates and enable image automation.

![Connecting RenderForm to Zapier](/blog/birthday-cards/birthday-automation-renderform-connect.png)

#### Action

In this step, we need to specify how we replace the components in our birthday card template. As a reminder, we'll be replacing the `name.text` and `wishes.text` components from our template. The birthday person's name can be found in the Google Calendar event as the **event title (Summary)**, and the wishes can be obtained from the **event Description**.

![Setting up RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-action.png)

#### Test

Next, Zapier will conduct a test to ensure the connection is working correctly. Click on **Continue** and then select **Test action**.

![Testing RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-test.png)

Once the test is completed, you can **check the test image in the test result**. Open the image link in a new tab in your browser and verify if everything appears as expected.

![Test result with generated test image](/blog/birthday-cards/birthday-automation-renderform-result.png)

Now, instead of publishing our Zap, we need to add one more action: connecting our Slack channel, where the birthday cards will be sent automatically.

> You can also trigger [image generation directly from a spreadsheet](/blog/posts/how-to-create-many-images-from-spreadsheet), if you manage birthdays there instead of Calendar.

### Connect Slack channel

The last step in creating the automation for sending birthday cards is to deliver the actual message and image on Slack. This step follows a similar process, as outlined below.

Begin by adding a new action to our Zap and proceed with the configuration.

#### App & event

Search for Slack in the list of apps and select **Send Channel Message** as the event.

![Setting up Slack as action in Zapier automation](/blog/birthday-cards/birthday-automation-slack.png)

#### Account

Connect Zapier with your Slack account to access Slack channels and enable automated messages.

![Connecting Slack to Zapier](/blog/birthday-cards/birthday-automation-slack-connect.png)

#### Action

In this step we create the message that is sent to Slack. For that we need to:

- select the Slack channel where you want to send the birthday card
- create a message with text and incorporate the RenderForm action result, which is the auto-generated birthday card image

In the message, you can add additional text (optional) and choose the RenderForm action result, which is the automatically generated birthday card image.

![Setting up Slack action in Zapier](/blog/birthday-cards/birthday-automation-renderform-action.png)

> You can also personalize the message content! Utilize the birthday person's name from the event title to give it a personal touch!

#### Test

To ensure everything is functioning properly, run one final test.

![Testing RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-test.png)

#### Publish Zap

Finally, after conducting the test, click the **Publish** button. With that, our birthday card automation is ready to go!

## Birthday card automation test

Before the automated sending of real birthday cards, it's important to perform a test to ensure that everything is set up correctly. Here's how you can do that:

**1. Create a birthday event in your "Birthdays" calendar**, scheduled for now plus 40 minutes. For example, if it's currently 9:00 AM, set the event to start at 9:40 AM. This allows Zapier enough time to run the trigger.

**2. Wait for the trigger to activate** in Zapier. The trigger will check the calendar for any upcoming birthdays.

**3. Check the result** on your designated Slack channel. You should see the automated birthday card message with the personalized wishes and image.

By performing this test, you can ensure that the automation is functioning correctly and that the birthday cards are being sent as intended.

![Test result for birthday card automation in Slack](/blog/birthday-cards/birthday-card-automation-test.jpeg)

## Conclusion

With this setup in place, you will never miss a team birthday again, and you will do it with style. Try it out today, and give your team a reason to smile on their special day.

[→ Start building your birthday card automation with RenderForm →](/register)

### 🧠 Want to do more with RenderForm automation?
Here are a few next steps you might like:

- [Image Generation with Airtable Extension](/blog/posts/image-generation-with-airtable-extension)
- [Create dynamic images using Google Sheets](/blog/posts/image-generation-with-google-sheets)
- [Generate PDFs with dynamic content](/blog/posts/generate-pdf-from-dynamic-data)

Automate team birthday wishes with custom slack cards — no code required!


Creating leaderboard or ranking images can be a repetitive and time-consuming job. You need to find or create a template, add the data, and then export the image. And then repeat on different occasions. Or even worse, create such an image manually every time. If you create many leaderboard images, it can be a tedious task. 

In this tutorial, we will show you how to automate the process of creating leaderboard and ranking images using RenderForm template editor and a simple spreadsheet. With that information, you will be able to create a new leaderboard image in just a few seconds!

## Create leaderboard image template

First, we need to **create a template** for our leaderboard or ranking image. For that, log in to RenderForm and create a template of your choice.

The canvas editor will give you all the options that you can use in your leaderboard image template. Add background, player names, photos, and their score or even star rating!

![Leaderboard template created in RenderForm](/blog/leaderboard-template.png)

When creating a template, name the elements of your image so that you can easily identify them later. For example, you can name the player's name as `player_name` and the player's score as `player_score` instead of `text_1`, `text_2`, etc.  

Save your template and that's all, you won't have to create the same image manually never again. Now, you are ready for automatic image generation!

## Generate new leaderboard image from a template

When your template is ready, now you can easily generate an image with different data. It will take just a few seconds!

Go to **Image Preview**, which shows the image and all elements that can be edited. It is a sort of form which you can use to quickly generate new images from your template.
Next, edit the template elements in the form. Simply replace the default text, e.g., `player_1_text` with the real player name, `Jon Snow`. Proceed with the rest of the elements and add the data for all the players.

![Leaderboard image preview](/blog/leaderboard-image-preview.jpeg)

Once you added all the data, click **Render Now** at the bottom of the list. The image will be generated instantly, and you can see how the new data looks like in your template.

![Leaderboard rendered image from preview](/blog/leaderboard-image-preview-rendered.jpeg)

And that's all, you can now **download the image or share it with your team**. To do that:
- right-click on the rendered image and use the *Save image* option
- use **Copy as browser link** option under the Render now button. This option will generate a link for your image and let you use it online!

## Generate multiple images with spreadsheet

If you need to create **multiple leaderboard or ranking images with different data at once**, then you can use the Spreadsheet automation. It allows you to generate multiple images at once with a few simple steps. 

### Create a spreadsheet with data

Our leaderboard template is ready, so now, we just need to create a spreadsheet with the data we want to display in it.

In the header row of your Spreadsheet, add the **names of the columns** that match the IDs of the elements in the template and their property type. You can copy all the names from the template preview.

For example, in my template I will use `player_1_text.text` where `player_1_text` is the ID of the text element and `.text` is the property of the element that we want to change.

![Spreadsheet with data](/blog/leaderboard-spreadsheet.png)

For a better overview, you can add a column with the image name (`_name`). This will be the **name of the image file** that will be generated.

In the next rows, add the data you want to display in the leaderboard images, so the players' names, photos, and scores. You can add as many rows as you want, each row will be a separate leaderboard image.

> Check out our [video tutorial about image automation using spreadsheet](https://www.youtube.com/watch?v=5jy9xteruno).

### Automate the image generation

Now, go to **Plugins** in RenderForm and choose **Spreadsheet** automation. There, choose the template you created to use it as a base for the leaderboard images.

![Spreadsheet automation plugin](/blog/plugins-spreadsheet.jpeg)

Then, click on **Import** and pick the XLSX file with the data. Once it is loaded, you will see the preview of the images that will be generated with the data from your spreadsheet. In this step, you can check and confirm if everything is correct.

![Preview of auto-generated images](/blog/leaderboard-imported-spreadheet.png)

Finally, click on **Render** and wait for the images to be generated. Once they are ready, you can download them as a zip file with **Download** button.

![Ready to use ranking images with player details and scores](/blog/leaderboard-images.png)

## Conclusion

In this tutorial, we showed you how to automate the process of creating leaderboard or ranking images. With just a few clicks you can generate a new image from your template or multiple images with different data using a simple spreadsheet. Automate your workflow with image generation and save time for more important tasks!

Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #tutorial