8.3.0 This menu exists since version 8.3.0 of formcycle. For previous versions, see the menu Layout (CSS).
The form themes menu lets you manage all layout for your forms. A form theme controls the presentation and design of a web form. You can choose a form theme for each form in the form designer.
Furthermore, since version 8.3.0, form themes also apply to response pages (HTML template) that are shown after the user submits a form. This way, you can use the same HTML template for different forms and still style them differently according to the form's theme.
You can also select a default theme, either for the entire system or for a specific client. The default theme is a fallback when no other form theme was configured. Also, the form designer lets you set the form theme to Auto, which always uses the current default theme. If you change the default form theme, all such forms will use that theme.
For advanced use cases, formcycle also allows plugin developers to author plugins that provide additional form themes. Plugin form themes can be selected the same way as manually created form themes.
Inhalt
Structure of a form theme
The main component of a form theme is a set of CSS files, one for the web form and one for response pages (HTML templates). A CSS file contains instructions for how to style and layout different elements (e.g. color, font, spacings).
If you do not wish to create a new form theme from scratch, you can built upon an existing theme and use it as a base for your theme. When you select a theme as the base, all style and layout declarations of that theme are applied first to the form, before your theme.
Sometimes you may also want to include images (logos) or fonts. To do so, upload the corresponding files and reference them in your CSS files via url(...) (see below for an example).
Rarely, you may find it necessary to include additional JavaScript for advanced theming features. The form theme editor also allows you to upload JavaScript files that are included in the form when that theme was selected. For example, custom JavaScript allows you to add additional CSS classes or modify the form in certain ways to make it easier to style.
In this regard, a form theme's JavaScript and CSS files share a certain resemblance to client files. Both are included in the form. An important distinction is that client files are included in all forms, regardless of the selected theme, whereas form theme files get included only when the theme was configured as the form's theme.
Creating a form theme
To create or modify a form theme, you can choose between two views: Simple and Advanced. Use the toggler at the top right to switch between simple and advanced mode.
Simple mode only lets you edit the main 2 CSS files for the form and for response pages. You may find this mode familiar if you have worked with the menu Layout (CSS) that was available before formcycle version 8.3.0.
Advanced mode is a fully-fledged file explorer that lets you edit all files and also sports support for grouping files in folders.
Simple mode
Simple edit mode lets you edit the web form and response page CSS in the editor in the middle. Use the list of form themes in the panel on the left-hand side to switch between different themes. Please note that changes are not saved when you switch to another theme, use the save button in the action bar at the bottom to save your changes.
The details panel on the right-hand side lets you modify a few additional pieces of information regarding the currently selected form theme:
- Name The internal name of the theme. The name is not visible to frontend users, only to backend users. It's the name that is shown in the select menu of the form designer that lets you choose a form's theme.
- Description The description is an internal detail as well, and only visible in the form theme menu. You can enter internal comments for other users that edit the theme.
- Based on Optionally, you can select a theme to use as the base for the currently selected theme. By default, this is set to the so-called Standard theme, which is provided by formcycle and always available. If you select a parent theme here, it gets applied first, before the current theme. This way, you can make small modifications to an existing theme, such as colors or fonts. If you do not select any theme, you need to style the form and response pages completely on your own.
Advanced mode
For clarity, unused empty folders are removed when you finish editing a theme.
Advanced mode is a file explorer, consisting of three different areas. On the left-hand side, you can find the file tree with a list of all form themes and the folders of each theme. Next to file tree you can see the current working directory, which shows a list of all files in the currently selected folder. At the top, above the file tree and the current working directory, is the action bar with a list of common actions, such as creating or deleting a theme; or switching between the list and icon view.
To upload files, you can either drag & drop the file or files from your computer to the current working directory; or use the upload button in the action bar at the top. To download a file, select the file to download and click on the download button in the action bar. Alternatively, you can also make a right click on the file and choose download from the context menu. If you select a folder or multiple files and download them, you get a ZIP file with all files.
When you upload or move files, that change gets saved immediately.
For certain files types, the file explorer also offers an inline editor that you can open with a double click on the file (or use the open action from the context menu):
- Images Opens a simple image editor that lets you e.g. zoom, rotate and scale the image.
- Text Opens a text editor that lets you edit the file's content. For some file types such as JavaScript, CSS, HTML or JSON, more features such as syntax highlighting and autocomplete may also be available.
- Fonts You cannot edit fonts directly, but a double click opens a details windows containing some information regarding the font file, such as its name, font family or license (if the font file contains this data). The details window also shows a preview of the font, using a piece of sample text.
Notes regarding the folder structure. Each form theme always contains 3 main folders, that cannot be deleted:
- webForm Folder for CSS and JavaScript files that should be included in the web form automatically.
- htmlTemplates Folder for CSS and JavaScript files that should be included in HTML templates (response pages) automatically.
- resource Folder for resources that never get included automatically, but are meant to be references by other files. For example, here you can upload images and fonts and reference them in your CSS files. Another use case is uploading a CSS files with common style declarations and including it in another CSS file via @import. This may be helpful when you wish to include common CSS for both the web form and HTML templates (response pages).
To edit the details of a theme (name, details, based on), either open the context menu with a right click on the theme and click on Edit, or select a theme and use the Edit button in the action bar at the top. For more details on these settings, see the explanation in the above section for simple edit mode.
Example with fonts and logos
As mentioned, you can also upload one or more images and fonts for each theme. This section illustrates this with a brief example. To this purpose, we use the freely available font Liberation and the test image Jelly Beans as a logo.
We keep the CSS as simple as possible to illustrate how to use this menu. For practical purposes, you may need to make adjustments such as providing images in different resolutions or fonts in different file formats.
To improve performance, the browser caches theme files for a brief amount of time. When developing a theme, you may not see the changes getting applied immediately to the opened form. We recommend that you disable your browser's cache while working on a theme. Many browsers lets you disable the cache for a particular browser tab via the network tab from the developer tools.
To get started, we first need to upload the logo and the font. We use the resource folder, and create sub folders to structure our files:
As we would like to use the font for both the web form and all response pages, we create a new CSS file in the resource folder (which we will include later in the relevant CSS files):
With that being done, we end up with the following files in our theme:
- htmlTemplate/template.css
- resource/css/common.css
- resource/font/LiberationSerif-Bold.ttf
- resource/font/LiberationSerif-BoldItalic.ttf
- resource/font/LiberationSerif-Regular.ttf
- resource/font/LiberationSerif-Italic.ttf
- resource/image/logo/jelly_beans.png
- webForm/form.css
The CSS files are still empty. To add the styling we want, we need to edit the CSS files and add the appropriate styles. We begin with the file common.css, which should contain the font. For that, we need the relative link to the font files. The CSS files is located at the path resource/css/common.css, the font files at resource/font/LiberationSerif-Regular.ttf. Both files are in the same main folder resource. Consequently, the relative link to the font from the CSS file ../font/LiberationSerif-Regular.ttf. (The two dots .. denote an instruction to navigate to the parent folder.) Now we can define the font via the @font-face rule.
Next, we need to include the file common.css in both CSS files for the web form and response pages, and declare that we wish to use our font with the font-family property. The relative link from von webForm/form.css to resource/css/common.css is ../resource/css/common.css.
Finally, we also wish to include the logo in the header of the web form. To do so, we need to edit the file form.css. The relative link from webForm/form.css to resource/image/logo/jelly_beans.png is ../resource/image/logo/jelly_beans.png. We open the file form.css and add an ::after pseudo element to the form's header:
With that, we are done with our demo theme. To view our theme in action, we create a new form and select our newly created theme in the form designer (Form tab in the properties panel at the right-hand side). The result should now look like this:
You can download all files from the demo theme: demo_theme_logo_schriftart.zip
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article