Page tree
Skip to end of metadata
Go to start of metadata

You can modify a component appearance by assigning a style using the Styles Management settings in the Visual Designer. When you create your form from a template it will have a number of predefined styles that you can use. 

To assign a style to a component

  1. Open your form in the Visual DesignerIn the drop-down list ("Selected item") at the top of the Display Panel find and select the page on which the component you want to assign a style for is located.

2.On the page find the component you want to assign a style and click on it. The component is now highlighted and its settings are displayed in the Properties panel. 

3. In the Properties panel click on "More Settings..." link and then select "Styles Management".

If you already have at least one style assigned to a component, use "Modify" button in the section that states "Component has XX selected style(s)".

4. In the Styles Management Editor that will open drag "vertical-choice-field" box from The Available Styles column and drop in the Selected Styles column. Save your assignment. 

4. In the Properties panel there is now a section with "Field has 1 selected style(s)" label and two buttons: "Modify" button will open the "Styles Management" again and "Delete" button allows you to remove all style/s assignment. 

5. In this particular case you will see the change in the component's appearance immediately, the Radio Field's options are shown vertically. It is not the case for all styles, to see the final look commit your changes by clicking on "Commit" button in the Controls panel and then click "Preview" button to see the form in preview mode. 



You can create your own styles for components. See Create & Modify Component Style for more details on how to add, change and delete styles.

To create new style for a component

  1. Open your form in the Visual DesignerIn the drop-down list ("Selected item") at the top of the Display Panel find and select the page on which you want to apply styling.



  2. For this walk-through add a Group component by dragging "Group" from Toolbox panel and dropping it on the page. Drag and drop "package.size" and "amount" fields into the Group.
    Type "Package Selection" for Title setting in the Properties panel and save your change.



  3. In the Properties panel click on "More Settings..." link and select "Styles Management".

  4. In the "Style Management" window that will open click on "Create New Style" link. 


  5. In the "Style Editor" window type "Quote Group" in the Style Name field and "quote-group" in the CSS Classes field of the COMPONENT section. 
    Click Update button to save your changes and exit the Editor.




  6. The new style is now shown in the Available Styles column. Drag the style into Selected Styles column, the style settings appear in the Computed Style section.
    Save your assignment.



  7. Commit your changes by clicking on "Commit" button in Controls panel and then click "Preview Form" button to see the effect of your changes. The "quote-group" class is defined in the form CSS, see here.


    The color of the Group's title, "Package Selection", is defined in the Global CSS, see here.

To modify a style assigned/to be assigned to a component

Note: component styles are shared on a form, if you modified a style for a particular component, this modification will affect other components that have this style assigned. It is safe to change style name.


  1. Open your form in the Visual Designer.

  2. Find the page on which the component you want to modify a style for is located and click on the component. The component is now highlighted and its settings are displayed in the Properties panel. Click on "Modify" button in the section that states "Field has XX selected style(s)". 

  3. In the "Styles Management" window that will open, in the Available Styles or Selected Styles lists click on the "cog" icon of the style you want to modify. 

  4. The Style Editor will open displaying the style settings and will have two buttons: "Delete this style" and "Cancel". As soon as you start applying the changes to the style elements the "Delete this style" is replaced with "Update" button. To understand which elements a style consists of, see Create & Modify Component Style

  5. Commit your changes by clicking on "Commit" button in the Controls panel and then click "Preview" button to see the effect of the modification of the style.  

To remove assigned style for a component

  1. Open your form in the Visual Designer.

  2. Find the page on which the component you want to remove assigned style for is located and click on the component. The component is now highlighted and its settings are displayed in the Properties panel. Click on "Modify" button in the section that states "Field has XX selected style(s)". 

  3.  In the "Styles Management" window that will open, in the Selected Styles list click on the "cross" icon of the style you want to remove. The style disappears from the Selected Styles list and appears in the Available Styles list.

  4. Click "Save" button to save the change. 

  5. Commit your changes by clicking on "Commit" button in the Controls panel and then click "Preview" button to see the effect of the removing of the style.  

To delete a style for a component

Note: component styles are shared on a form, if you delete a style for a particular component and this style has been assigned to other components, the style assignments will be removed for them too.
  1. Open your form in the Visual Designer.

  2. Find the page on which the component you want to delete the style for is located and click on the component. The component is now highlighted and its settings are displayed in the Properties panel. Click on "Modify" button in the section that states "Field has XX selected style(s)".

  3. In the "Styles Management" window that will open find the style you want to delete in the Available Styles or Selected Styles list

  4. The Style Editor will open displaying the style settings. Click on "Delete Style" button. Click "Confirm" button in the "Confirmation Required" window.

  5. The style is no longer in the Selected Styles or Available Styles lists.

  6. Commit your changes by clicking on "Commit" button in the Controls panel and then click "Preview" button to see the effect of the style deletion.  


See Styles Management for more details.


Go to Styles Management Example to see component styling in action.
  • No labels