[SOLVED] Form Builder CSS problems ...

[pamelina]

Hi CMSms users ,

I have builded feedback form with Form Builder without any problems ...
However I do have some problems when it comes to CSS ...

{cms_module module='FormBuilder' form='star_night'} when I put it to website works great ....

I decided to put {.....} around it so I would be able to style CSS ...

{cms_module module='FormBuilder' form='star_night'}

The problem is when it comes down to styling it ...

In CSS I added ...

/*contact_form*/

.contact_form {   
     color:#c0c0c0;    
}   This one changes all written text next to input fields to desired color ...


.contact_form input {
  color:#8b4c39;
}   This one changes color for text that is inputed in 'Text Input' field but fails to change the color of inputed text in
      'Text Area' field ... ??!

I'm also trying to change color of text in 'Country Picker' field ...
Looking do add half of 'group check boxes' to the right side of first half that is positioned on a left side ...
And to change color of 'input text' fields and 'text area' field when clicked on it ... (hover)

How to delete <--- Please enter a value for "Your Name" on the right side of a form when it come to form submition problems ...

Also how to delete or style problem notice on form submition above/ on top of a form ...

Hope to get some feedback on this matter ...

[KO]

.contact_form input {
  color:#8b4c39;
}   This one changes color for text that is inputed in 'Text Input' field but fails to change the color of inputed text in
      'Text Area' field ... ??!

I'm also trying to change color of text in 'Country Picker' field ...

Maybe

.contact_form input, .contact_form textarea, .contact_form select {
  color:#8b4c39;}

changes color to some other places. Just look the source what you find there.

Hope this helps...

[pamelina]

KO, Thanks for your quick reply !

.contact_form input, .contact_form textarea, .contact_form select {
  color:#8b4c39;}  Solved half of my problem ... thanks again

Now I'm looking into 'hover' and 'error' message styling ...

If there's anyone with quick solution to second part of a problem, please be so kind
and point me into right direction ...

[pamelina]

Now I have managed to style form builder template ... however when contact form is not entered correct it
shows submition errors in regular template which is not styled ... ??! 
My question is how to style that second tempate that comes up upon failed input ... and how to remove



    * Please enter a value for "Name"
    * Please enter a value for "Surname"
    * Please enter a value for "E-mail"
    * Please enter a value for "E-mail verfication"
    * Please enter a value for "telephone number"
    * Please enter a value for "country"
    * Please enter a value for "Comments"

above template and how to remove

<--- Please enter a value for "Name"
<--- Please enter a value for "Surname"
.
.
.
.
etc. ... on the right side of a template ...

and replace it only with icon-image next to 'text input field' ...

just can't figure it out ... CSS on this subject is not my strong value ...

[KO]

Usually the easiest way is to look the source and see what is there and can something be used to style things. If you look source for those errors on top they could (maybe on yours also) be styled with:

div.error_message {}

if you put ...

.formbuilderform div.error_message {display:none;}

those are gone.

Second one seems to be inside

Code: Select all

<div class="required fb_invalid"> </div>

so ..

.fb_invalid {color:pink}

could be used to style them. If you want to add some icon you probably need edit right Form "Form Template" in Form Builder.

Hope this helps.

[pamelina]

KO you helped out a lot ... a BIG THANKS !  I'm getting to finish now, but there are still some obstacles ...

However I'm still facing some difficulties, when 'contact form' is submited with false or no required data it
jumps back to same template ... somehow ALL THE CSS styling for 'contact form' is lost ... ?
I'm having the same problem that is happening with one of website(s)  calguy1000  mentioned in his post
http://forum.cmsmadesimple.org/index.ph ... 970.0.html
website is having same problem as mine http://www.precedeohs.com/index.php/contact when 'Submit Form'
is clicked look what happens ...

The additional styling problem with my contact form is border around 'group check boxes' in IE 7.
Look at the images ...

in css I have ...

.contact_form input, .contact_form textarea, .contact_form select {
border: 1px solid #104e8b;
}

in firefox there are no problems ... in IE 7 there are 'group check box' problems ...

also there is no border and color around 'country picker' in IE 7 ... ?

[pamelina]

Is there any one out there who would be so kind and help me out with above mentioned problem ...
I have turned source code couple of times up and down, still not working ...

[KO]

Well styling forms is somehow limited. You can do something but certain things come from browser that you cannot touch. If you look those pages with Safari or Chrome they look different again. With javascript you can do something but it does get tricky.

[pamelina]

KO I have figure it out at last ... thanks for pointing me in right direction ...

Everithing is O.K. exept <--- Please enter a value for "Name" at right side of a webform ...
I sitll wish to modify that one, maybe change wording or just delete <--- in front
of it ... best would be if I could replace it with an icon ...
Where can this be done ...

Cheers 

[KO]

If you want to add some icon you probably need edit right Form "Form Template" in Form Builder.

You should find that "Form template" in Form you want to modify. That's the place where to change, remove, edit, etc. your form template.

[pamelina]

Thanks again KO ,

I already managed to modify it ... it was difficult ( was working on it whole weekend ) but now finaly shows correct in all
browser and also after false input or empty submit ...