Home Web Development aiContactSafe change form background color

aiContactSafe change form background color


One of my Joomla! Sites is using aiContactSafe as their contact form provider and wanted to change the background color of the form so that they can see the form fields on their template (both were white before).

The way to do this is through the CSS on the form.  For this example I used a copy of the Default Form.

1. Click on Profiles –> Default Form and open it
2. Where it says: CSS code of the profile:  You search for the text that reads:

div#aiContactSafe_mainbody_1 #aiContactSafeForm {

3. Add background:#xxxxxx; under that text and set xxxxxx to the color you want the contact form to be.  It’s that easy.

Tip:  When I don’t know what the color value is that I want to match from a template, I PrintScreen the page and paste it into Photoshop.  Then I use the eyedropper to select the color and get the code that way.


  1. hello sir, your post most certainly help me, though i have other questions if its ok.

    1. how do i put the message field area on the right side of the other field areas?
    2. how do i put some background color for the field areas itself just like how you did in your comment form
    3. I like your comment form can i use it on my joomla site?

    thanks a lot i am currently building my first ever joomla site by the way.


Please enter your comment!
Please enter your name here