Form Design & Styling

FormBerry forms comes with 12 professional templates that you can use without you going to styling from scratch but if you want to design your own form then you can do so. FormBerry form designer also comes with powerful backend with tons of options where you can do almost anything you want with the form without messing around with the codes. You can customize things like change the background, lines, font types, font sizes, buttons and much more.

General Settings & Main Body

  1. Theme – FormBerry comes with 12 professional themes that you can use from with various flavours 🙂 You can choose from the drop down menu which one you like any time. If you want to create your own form design then choose the “Default” instead.
    Note: If you choose any of the theme you may no longer need to do any of the styling found on the rest of the options
  2. Label Position – This option lets you choose the positioning of your labels. If you choose “Horizontal” then your label and form field will align horizontally where the label will appear on the left side for the form and the form field will appear next to it on the right side. If you choose “Vertical” however the label and the form field will align vertically where the label is on top of the form field.
  3. Border Radius – This option lets you add rounded corners on the form by adding the radius value on the form such as 7, 10, 12 etc. Please note that if you choose the pre-made themes then you don’t need this option. Also, if you choose to add radius then you have to disable the header and footer of the form.
  4. Width – This option lets you control the width of your form, if you leave this option blank then your form will occupy the whole available width on your post or page as the form is fluid.
  5. Height – This option lets you control the height of the form. Usually you leave this blank so that the form can adopt with the number of form fields you added.
  6. Background Color – This option lets you control the color of your form’s body background using the built-in color picker. You may not need to set this up if you use the theme.
  7. Background Opacity – This option lets you set the opacity of the body background by adding values from 0 to 5. You may not need to set this up if you use the theme.
  8. Text Color – This option lets you control the text color appearing on the form’s body using the built-in color picker. You may not need to set this up if you use the theme.
  9. Inner Background Color – Aside from the main form background you can also customize the inner background using this option. You can use the color picker or simply upload an image background directly. You may not need to set this up if you use the theme.
  10. Inner Border Color – This option lets you customize the inner border line using the built-in color picker. You may not need to set this up if you use the theme.
  11. Inner Text Color – This option lets you customize the text color elements found inside the form fields. You may not need to set this up if you use the theme.

Form Header & Footer Customization

  1. Form Header Enabled – This option lets you turn on/off the form’s header. If you check the button meaning this option is enabled.
  2. Form Header Design Enabled – If you want to add other elements on the form’s header then this option should be enabled.
  3. Background Color – This option lets you customize the form’s header background, either a foreground color or upload image background.
  4. Border Color – If you want to add border on the form’s header then use this option.
  5. Form Footer Enable – This option lets you enable/disable the form’s footer. To enable this option simply check the box.
  6. Form Footer Design Enabled – If you want to add further customization on the form’s footer then this option should be enabled.
  7. Background Color – Just like on the form’s header, this option lets you customize form’s footer either a foreground color or upload image background.
  8. Border Color – If you want border color  on the form’s footer then use this option.

Title & Sub-title Customization

  1. Font Family – This option lets you customize the font type of the form’s title that appears on the very top of each form. You can select your favorite font style on the drop down menu.
  2. Font Size – This option lets you customize the form’s title font size.
  3. Text Color – Simply customize the color of the font of your title using this option.
  4. Font Family – this option lets you customize the font of the form’s sub-title that appears just below the form’s title. You can select your favorite font style on the drop down menu.
  5. Font Size – This option lets you customize the font size of form’s sub-title.
  6. Text Color – Simply customize the color of the font of your sub-title using this option.

Error Messages & Field Groups Customization

  1. Family Font – This option lets you customize the font type appearing on the error messages of the form.
  2. Font Size – You can also customize the font size of the said text
  3. Text Color – This option lets you customize the font color of the error messages.
  4. Number Of Columns – This refers to the number of columns of the forms. You can override this in the Builder when adding new field groups.
  5. Background Color – This option lets you customize the looks of each Field Group
  6. Border Color – This option lets you customize border color of each Field Group.
  7. Text Color – This option lets you customize the text color that will appear inside the Field Group.

Fields & Submit Button Customization

This sections deals with the customization and personalization of Fields and Submit Button.

  1. Background Color – This option lets you customize the color of the form fields, you can either pick a color on color picker or upload image background.
  2. Border Color – You can customize the border of form fields as well using this option.
  3. Label Color – This option lets you customize the label colors using the built-in color picker
  4. Text Color– You can also customize the text notes color on the form using the built-in color picker.Submit Button
  5. Background Color – This option lets you customize the background of the submit button of the form. You can either pick a color using the built-in color picker or upload and image.
  6. Border Color – Here you can add and customize the color of the submit button.
  7. Text Color – this option lets you customize the text color inside the submit butto.

2 Responses to “Form Styling & Settings”

  1. Dan August 23, 2012 at 8:34 am #

    hi
    can you show me a few examples of simple, sort of elegant business looking forms?
    Thanks

    • Gama August 23, 2012 at 8:43 pm #

      Hi Dan,
      Here’s few samples of forms created by FormBerry existing users:
      This one is a website client questionnaire and the one on the side bar is a sample of the latest FormBerry Paypal Add-on
      http://formberry.net/demo1/sample-page/

      Regards,
      Gama