Everyone likes to be unique; it makes you who you are and not just a mold of someone else. Frankly, it’s empowering. Sometimes, being unique is not easy. In the world of business, your organization and your message must be unique. Formstack can simply and easily help you meet your organization's needs and still remain unique, without being forced to conform to standards or settle for someone else’s default templates.
This post is for you if this is your goal:
Create an amazing, unique form (easily) that will make your business processes more efficient and still retain your company's branding - even though you're using an outside program.
Dilemma (or at least one of many you are facing):
Formstack is not one of your internal programs, so we do not have all your logos, branding, style guides and templates on-hand. Plus, Formstack is likely a new tool for you, so you need tips and guidance.
My solution for you:
This post will show you how to easily add branding and logos to your form. No coding required!
What I will not discuss:
To save you time and frustration, I will state this upfront: I am not going to explain how to style your form. Sorry!
So, how the heck do we do it?
First, create your form. I know, I know, easier said than done, but that is a good first step to complete before you get into the branding, formatting and styling of your form. I have noticed if I get the basic content and fields down first and then go back and arrange, format and style fields, it expedites the process. After you have your form, decide where you need to place company logos and branding elements.
There are two ways you can add logos to a form:
- On the form itself
- On the custom Theme
Adding a Logo Directly to a Form
The short:Add a Description Area field, Embed Code field or Section break via the Form Tools box - drag and drop or click to add/edit:
For Description Area or Section breaks:
- In the field edit mode, click the tree icon
- Paste the image URL under the Insert/Edit field tab OR click the Upload tab to upload a local file
- Make any sizing/aligning changes (under the Insert/Edit Image tab)
- Click Insert
For Embed Code field:
- Paste code
- Save
The long:
You can add a logo directly to a form via a Description Area field, Section break, Embed Code field. To add an image via a Description Area field or Section break, click on OR drag and drop the Description Area field, Section break or Embed Code field from the Form Tools box on the left side when in Build mode over to the spot on the form you'd like it to appear. If you use the drag and drop method, you will need to click on the pencil and paper icon on the top right of the field to edit the field. In the editor tools, you will see a tree icon - click it. This will allow you to paste the image URL under the Insert/Edit field tab OR you can click the Upload tab to upload a local file. Then click upload image - you must click to upload the local file before you can edit. You can size and align the image before you click Insert OR you can size and align it after it is added to the field/section.
To add an image via an Embed Code field, simply paste the code into the Embed code field.
Make sure you close your tags and that you don't include any form tags in your code - doing so will likely break the functionality of your form. You can technically add javascript as well, but this is very risky. After adding the code, verify that the form still functions as intended. Also remember, if you choose to add custom code, we cannot be responsible for the reaction. This is an advanced method - just make sure you know what you're doing.
Adding a Logo via a Custom Theme
The short:
- Click on main Forms > Themes tab
- Click to add a new Theme or choose an existing Theme
- In the Theme builder, click on the Theme element you'd like to add the logo to
- Upload image via the choose file button
The long:
On a custom Theme, we do give you the ability to add custom CSS; however, you don't need to know code to add logos to your Theme. And what’s cool about branding a Theme is that you can apply it to multiple forms at once. To get to the Theme builder, go to the main Forms tab and click on the Theme tab on the top right of the window. (You can also edit a custom Theme inside the form Builder, but this way allows you to do more.) Once in the Theme builder, you will see the editable elements along the top of the builder. You can add an image to the background, header, and footer.
Click to edit the element and there will be a button to choose file to upload your image. Of course, you can style the rest of the Theme as you would like as well. To assign the Theme to your form, go back to the main Form tab and select the form you'd like to apply the Theme to. Once in the form, go to Settings > General and scroll to the bottom where it allows you to choose your Theme. You will want to opt for a custom Theme and simply choose your custom Theme from the list. After applying, make sure you SAVE!
Hopefully this guide will help you style and brand your form to fit your organization's needs! Test this workflow today by starting a 14-day free trial.
