Formstack

Wait, Formstack Docs can do that?

Dynamically showing images to create amazing documents with Formstack.

Background

Automatically creating documents with merged data feels like a super power. We save hundreds of hours every year using document automations. However, sometimes you want to do more with your documents. Inserting text into a page is great, but what if you want to create a visually rich document? This tutorial shows how to create a document that goes beyond dynamic text and includes dynamic images.

While this tutorial will show the basic concept, it is possible to create documents that are much more visually rich and complex:

The blue rectangles in the image are dynamically shown based on form responses.

Setup & Concept

First, for full visual flexibility in Formstack Documents we recommend using PowerPoint as your source file. Unlike Word, PowerPoint allows you to place items anywhere on your page. You don't have to worry about margin, text wrapping, headers or footers. If you decide to use Word or PDF, the concepts discussed here would still hold true.

Next, the general idea is that we are going to use logic (if statements) to determine if we should include an image or not. These logic statements can be driven by responses provided in a form. For example, you might have a form that asks someone to choose their mood (Happy, Sad, Indifferent). In your document, you would set up logic statements that effectively say, "if mood = happy, then show smiley face image".

This is pretty straight forward, but there are a few things that will make your life easier.

Code

Just like we can use Formstack Documents Logic to show/hide pages or content, we can also use the logic to Show/Hide Images. Combine that logic with the layout flexibility of PowerPoint and you can create some visually dynamic documents.

Use the code below in your PowerPoint document to dynamically show/hide an image based on logic.

Note: if you have different images, you will have multiple $image variables (E.g. $HappyImage, $SadImage, and $IndifferentImage). Those image URLs will be saved in your Formstack Documents fieldmap (see Pro Tips 1 & 2 below).

Pro Tips

You'll need to host your dynamic images to the cloud so they have a publicly available URL. I host my Formstack Docs images in the Webflow media folder for the associated project I'm working on — just be sure to not erase them.
Use your field map to save long image URLs. This will give you cleaner logic statements in your document. For example, create a variable in your PowerPoint {if $mood == "Happy"}{$image|insert_image}{/if}... then you'll be able to view that $image variable in your Formstack Documents field map and paste the image URL there (go to Advanced Settings menu if you don't see a Field Map tab). You can create multiple different image variables if needed.
Locking images in the background is a power move. Let's say you have a five star scale in your document... you might have all five stars always showing with a 50% opacity in the background. Then you only show the full opacity star images based on what should be shown. (Watch the recipe video for more details on this).
PowerPoint inside of Formstack Documents can be finicky. If you get errors saying you have invisible characters in your logic, you'll need to erase the logic statement and retype. This errors often shows up when you copy/paste code (specifically quotation marks). So if you're getting weird errors, just retype your logic — don't copy paste... Or better yet, create your documents in a desktop software like PowerPoint or Keynote (and then export to .pptx)
Remember that you can stack images on top of each other! This can be a useful trick if you want to have different images show in the same location on the page. For example, "What's your mood?"... the mood images could all be stacked on top of each other — but since users can only choose one mood, only one image will show.

Wait, Formstack Docs can do that?

More tutorials

Workflows Part 1: Using Formstack to streamline your team

Take your 404 page to the next level

Make an SVG image accessible

Add syntax highlighting to Webflow CMS