Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

Is it possible to style confiforms controls or forms?

I have been using Confiforms to fulfill a number of request portals for my organization. I am working on an internal site and must abide by company branding standards and I would like to A) change the background of a Confiforms form and B) change the background or text color of the form registration button.

I have tried targeting the CSS using the built in style sheet and have looked into Vertuna's documentation to no avail.

Any help would be greatly appreciated.

(Also happy National Intern Day to all my fellow interns)


3 answers

1 accepted

You could use the stylesheet macro included with the Content Formatting for Confluence add-on to change the background color. Another option would be to create your own stylesheet user macro. Below is how you could create it.

Macro Name:

Macro Title:

Macro Body Processing:


## Developed by: Davin Studer
## Date created: 7/26/2018
## @noparams

<style type="text/css">


Has anyone been able to successfully modify Confiforms Form border color or background color. I have tried to target multiple ids and classes with the style sheet with no luck so far.



How about this for border ...

.confiFormsFormBorder {border: none !important;}


and this for background color ...

.confiFormsFormContent, table[id^="i_registrationFormTable"] tr {background: #AAAAAA !important;}

Hey @Davin Studer I have tried that. I tried the first one to change border-color and i wasn't able to get it to work but on another try it seems to work. As for the background color I ended up going about it a different way. I kept that background white and changed the color of my page to an offwhite to give contrast that way. Thanks for your answer!

Cool. Glad you got it working.

Like Curtis Freudigmann likes this

Hi @Davin Studer ,

I am used to working with macros but have never played with the source editor hence I am not sure where should I add the below text shared by you. I just want to get rid of the border line and the grey background of Save button.

.confiFormsFormBorder {border: none !important;}

You can either use HTML macro and place this into the <style></style> tags or use space stylesheets and put the space-wide CSS rule

Is this how you are suggesting me to use the command shared by Davin


P.S, I want to get rid of the border around the confiform and the grey background of Save button

This is a user macro that I created for our environment to hide certain pieces of ConfiForms. This user macro allows you to hide the frame around the form. You can create user macros in Confluence Administration -> User Macros.

Macro Name:

Macro Title:
ConfiForms Hide Elements

Macro Body Processing:
No macro body


## Developed by: Davin Studer
## Date created: 10/08/2015

## @param Admin:title=Hide Admin Menu|type=boolean|default=false|desc=This will hide the admin menu for the form.
## @param Meta:title=Hide Entry Meta Data|type=boolean|default=false|desc=This will hide the entry meta data button.
## @param Panel:title=Hide Form Panel|type=boolean|default=false|desc=This will hide the form panel.
## @param Title:title=Hide Form Title|type=boolean|default=false|desc=This will hide the form title.

#set( $d = '$' )
#set( $p = '#' )

<style type="text/css">
#if($paramAdmin && $paramAdmin == true)
.confiFormsFormBorder + .aui-button.aui-style-default.aui-dropdown2-trigger, .aui-button.aui-style-default.aui-dropdown2-trigger[aria-controls^='admin']  {display: none !important;}

#if($paramMeta && $paramMeta == true)
${p}showEntryMetadata {display: none !important;}

#if($paramPanel && $paramPanel == true)
.confiFormsFormBorder {border: none !important;}
.confiFormsFormContent {padding: 0 !important;}
.confiFormsFormFooter {background-color: #FFFFFF !important; padding-left: 0 !important;}

#if($paramTitle && $paramTitle == true)
.confiFormsFormTitle {display: none !important;}

input[readonly='readonly'] {background: #f5f5f5 !important; color: #999999 !important;}


Confiforms registration controls section has a CSS line to enter styling effects. So that answers problem B, however, I am still looking for a way to change form background colors.


Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Apps & Integrations

Marketplace Partner Spotlight: AppLiger

This month the spotlight is on AppLiger. We caught up with Pavel Pavlovsky, CEO and Product Manager, to learn how the company started and what fuels the team's creativity.    Atlassian:...

379 views 0 7
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you