We all want to have our own style and “brand,” and anyone can easily design and brand a Formstack form. (You don’t need CSS or custom code to do it.) Let’s explore some ways you can accomplish this.
Customize Your Form to Match Your Brand
Themes — If you are on any of our paid plans, you have access to our default and custom themes. A theme is the style template that encompasses your form. You can quickly, easily brand your form using a custom theme. Create a custom theme directly in the form builder via the Edit Theme tab in the tools at the top of the form builder:
Or directly in the Theme Builder through the main Forms > Theme tab:
Formstack offers an impressive number of things you can alter directly in the Theme Builder without using custom code:
- Background — Adjust color, pattern and/or add a custom image.
- Theme Header — Add custom images/logos to the top of the theme and align them to the left, right or center of the theme.
- Sections — Change background color, heading text color, heading font, heading font size, text color, font type, font size, and the spacing between sections.
- Form — The form is a box within your theme. You can customize the form color, alignment on the webpage, spacing between rows, and add a border to the form.
- Labels (field name) — Change color (you can select different colors for required labels and non-required labels), font type and font size
- Fields — Adjust text color, border color, background color, required field border and background color, interior padding, and supporting text color.
- Footer — Add custom images/logos to the bottom of the theme and align them to the left, right or center of the theme.
If you have the skills to do it, or know a developer who does, Formstack also allows for the addition of advanced custom CSS, which will either append or override style settings already chosen.
Once you have created your theme, you can apply it to your form under the Settings > General tab at the bottom. You can also keep things consistent and save yourself time by using the same theme across multiple forms.
Directly on the Form — If a custom theme is more than you’re ready for or able to do, don’t worry! You don’t need a custom theme to customize the style of your form. Images and logos can be directly added to the form itself via a Description Area field. You can click to add this field (or drag and drop the field) from the list of form fields on the left side of your form in Build mode. Once the field is open, click on the image icon within the field, and it will prompt you to upload an image. Once your image is uploaded successfully, choose it from the “image list” and this will add the image to your Description field. You can alter the size and alignment directly in the field with the field edit tools displayed.
You may also want to add company mission statements and slogans where appropriate via Description Area field on your form or in the Header or Footer on your custom Theme. Also, since all our field labels and values can be customized, you say things the way it feels most natural to you and your users. Instead of leaving the address field as Address, why not state it like this:
We know that your branding is what sets you apart from all the others. These easy to use tools help you customize your Formstack form so that it truly represents your brand.
If a picture is worth a thousand words, you’ll save a lot of space by adding some images to your form. There are two ways you can do this. You can either create a theme from scratch, explained here, or you can simply upload an image to your form.
First, click on the form you would like to edit. Next, click on Description Area. In the editing tools, click on the tree icon seen below.
Next, follow these steps:
1. Click on Upload
2. Click on Browse and choose a picture from your computer to upload (you can only use .jpg, .gif, or .png files).
3. Once you see a box that says, “Your image has been uploaded successfully. Please select the image from the image dropdown box,” Click OK.
4. Click on Insert/Edit Image.
5. Choose your image from the drop-down menu of the Image List. Click Insert.
After the image has been uploaded, you can change the dimensions and alignment of your picture.
Adding an image to your notification and confirmation emails is quite similar. Go to your form and click on Settings > Emails and Redirects. Create either a new Confirmation or Notification email. Find the same tree icon and follow the five steps above.
And you’re finished! Your newly added images will make your form as pleasant for your users to look at is it is for them to use.
Removing Formstack’s Name from Your Form
Does Formstack want people who fill out your beautifully crafted form to know who is powering that form so they may also use us in the future? Of course! But if you are paying for our service, we love you enough to give you the option to remove our logo from the bottom of your form.
Unfortunately, just like free services everywhere, you will not be able to remove our ads and logo from the bottom of your form while on our free plan. And please note that if you are a paying customer, you may not want to remove our logo. There is a benefit to leaving it on the form. We call this a Referral Badge. If you leave the logo on the bottom of your form, anyone who signs up through your Formstack Referral link earns you a credit on your account.
Now to the nuts and bolts of removing that Formstack logo (or Referral Badge) from your form.
1. First log into your Formstack account.
2. Go to Forms.
3. Choose the form from which you would like to remove the Referral Badge.
4. Go to that form’s Settings tab > General.
5. Look for Show Referral Badge.
6. Choose No.
In order to change this setting on all future forms, go to:
My Account > Referrals > By default, show a Referral Badge on my forms and landing pages > Choose No.