• formstack.com •Customize your formcustomize your form
2Formstack Primer • formstack.comCustomize Your Form toMatch Your BrandWe all want to have our own style and “brand,” anda...
3Formstack Primer • formstack.comIf you are on any of our paid plans, you have access to our default and custom themes. A ...
4Formstack Primer • formstack.comBackgroundAdjust color, patternand/or add a customimage.Theme HeaderAdd custom images/log...
5Formstack Primer • formstack.comOnce you have created your theme, you can apply it to your form under the Settings > Gene...
6Formstack Primer • formstack.comIf a custom theme is more than you’re ready for or able to do, don’t worry! You don’t nee...
7Formstack Primer • formstack.comYou may also want to add company mission statements and slogans where appropriate via Des...
8Formstack Primer • formstack.comADD IMAGESIf a picture is worth a thousand words, you’ll savea lot of space by adding som...
9Formstack Primer • formstack.comFirst, click on the form you would like to edit. Next, click on Description Area. In the ...
10Formstack Primer • formstack.comAdding an image to your notification and confirmation emails is quite similar. Go to you...
11Formstack Primer • www.formstack.comLove Your FormsAt Formstack, we love forms and all they can do for our clients’busin...
Upcoming SlideShare
Loading in …5
×

How To: Customize Your Online Form

580 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

How To: Customize Your Online Form

  1. 1. • formstack.com •Customize your formcustomize your form
  2. 2. 2Formstack Primer • formstack.comCustomize Your Form toMatch Your BrandWe all want to have our own style and “brand,” andanyone can easily design and brand a Formstackform. (You don’t need CSS or custom code to do it.)Let’s explore some ways you can accomplish this.
  3. 3. 3Formstack Primer • formstack.comIf you are on any of our paid plans, you have access to our default and custom themes. A theme is the styletemplate that encompasses your form. You can quickly, easily brand your form using a custom theme.Or directly in the ThemeBuilder through themain Forms > Themetab:Customize Your Form toMatch Your BrandThemesCreate a custom themedirectly in the formbuilder via the EditTheme tab in the toolsat the top of the formbuilder:
  4. 4. 4Formstack Primer • formstack.comBackgroundAdjust color, patternand/or add a customimage.Theme HeaderAdd custom images/logos to the top of thetheme and align them tothe left, right or centerof the theme.SectionsChange backgroundcolor, heading text color,heading font, headingfont size, text color,font type, font size, andthe spacing betweensections.FormThe form is a box withinyour theme. You cancustomize the formcolor, alignment onthe webpage, spacingbetween rows, and adda border to the form.Labels (field name)Change color (you canselect different colorsfor required labels andnon-required labels), fonttype and font sizeFieldsAdjust text color, bordercolor, background color,required field borderand background color,interior padding, andsupporting text color.FooterAdd custom images/logos to the bottom ofthe theme and alignthem to the left, right orcenter of the theme.Formstack offers an impressive number of things you can alter directly inthe Theme Builder without using custom code:Customize Your Form toMatch Your Brand
  5. 5. 5Formstack Primer • formstack.comOnce you have created your theme, you can apply it to your form under the Settings > General tab at thebottom. You can also keep things consistent and save yourself time by using the same themeacross multiple forms.Customize Your Form toMatch Your BrandIf you have the skills to do it, or know a developer who does, Formstack alsoallows for the addition of advanced custom CSS, which will either appendor override style settings already chosen.
  6. 6. 6Formstack Primer • formstack.comIf a custom theme is more than you’re ready for or able to do, don’t worry! You don’t need a custom theme tocustomize the style of your form. Images and logos can be directly added to the form itself via a DescriptionArea field. You can click to add this field (or drag and drop the field) from the list of form fields on the left side ofyour form in Build mode. Once the field is open, click on the image icon within the field, and it will prompt youto upload an image. Once your image is uploaded successfully, choose it from the “image list” and this will addthe image to your Description field. You can alter the size and alignment directly in the field with the fieldedit tools displayed.Customize Your Form toMatch Your BrandDirectly on the Form
  7. 7. 7Formstack Primer • formstack.comYou may also want to add company mission statements and slogans where appropriate via Description Areafield on your form or in the Header or Footer on your custom Theme. Also, since all our field labels and valuescan be customized, you say things the way it feels most natural to you and your users. Instead of leaving theaddress field as Address, why not state it like this:Customize Your Form toMatch Your BrandWe 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 ittruly represents your brand.
  8. 8. 8Formstack Primer • formstack.comADD IMAGESIf a picture is worth a thousand words, you’ll savea lot of space by adding some images to your form.There are two ways you can do this. You can eithercreate a theme from scratch, explained here, or youcan simply upload an image to your form.
  9. 9. 9Formstack Primer • formstack.comFirst, click on the form you would like to edit. Next, click on Description Area. In the editing tools, click on thetree icon seen below. Next, follow these steps:After the image has been uploaded, you canchange the dimensions and alignmentof your picture.ADD IMAGESClick on UploadClick on Browse and choose a picturefrom your computer to upload (you canonly use .jpg, .gif, or .png files).Once you see a box that says, “Yourimage has been uploaded successfully.Please select the image from the imagedropdown box,” Click OK.Click on Insert/Edit Image.Choose your image from the drop-downmenu of the Image List. Click Insert.12345
  10. 10. 10Formstack Primer • formstack.comAdding an image to your notification and confirmation emails is quite similar. Go to your form and click onSettings > Emails and Redirects. Create either a new Confirmation or Notification email. Find the same treeicon and follow the five steps above.And you’re finished! Your newly added images will make your form aspleasant for your users to look at as it for them to use.ADD IMAGES
  11. 11. 11Formstack Primer • www.formstack.comLove Your FormsAt Formstack, we love forms and all they can do for our clients’businesses and organizations. This portion of the completeFormstack Primer should provide you with a strong foundationof ways to make your forms work for you. We also know youmight have more questions. Maybe you need more supporton a particular topic. Perhaps you’d like to do more advancedcustomization, using CSS or other programming. Fortunately, wehave answers. From our blog to our support team, we’re here foryou if and when you need us. Happy form building!Want to learn more?Download the complete Formstack Primer.

×