Creating a theme

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

Steps

  1. Design your theme using the download below.
  2. Rename the folder and the CSS file(s) and fill in the information at the top of the new CSS file(s).
  3. Find and replace the main selector (.iphorm-theme-your directory name-your CSS file name) and change to your own “.iphorm-theme-[your directory name]-[your CSS file name]”
  4. To install your theme simply add your new directory into → wp-content → plugins → iphorm-form-builder → themes.
  5. To choose your theme go to Quform builder and click on the settings tab → style. Then select your theme from the dropdown. (ctrl+F5 form builder page if it does not show)

What you need to know

  • The theme is based on CSS and images from your directory, you can have more than one CSS file for variations. Simply create another CSS file with a new name.
  • All the layouts are controlled inside Quform so you will need to make sure your theme is compatible with all these features.
  • Be sure to fill out the information at the top of each CSS document. This is needed to locate the theme in Quform and provide information in Quform.
  • Remember to start each class with your main selector which is “.iphorm-theme-[your directory name]-[your CSS file name]”
  • To you can make your theme automatically choose a Uniform theme, by specifying the header “Uniform Theme:”.
    the valid values for this are “default”, “agent”, “aristo” (without the quotes).

    • default – a light theme
    • agent – a dark theme
    • aristo – a grey theme

Using Uniform

  • If you plan to create your own radio, select and check-box designs. You can do this using Uniform.
  • You can find more information on how to create a custom Uniform theme on this page: Creating a custom Uniform theme. For more information visit http://www.uniformjs.com.
  • You can have a uniform theme pre selected in your Quform theme. Add in the CSS document header “Uniform Theme: [name of uniform theme]”

Inside the zip file you will find:

  • 2 CSS files examples with all the most common classes you will require. Choose the one that suits you best.
  • An image folder, where you will add your images.

Download theme template

If you have created your theme to sell or share be sure to let us know about it, if we like it we will help you promote it.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy