Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Validation Text Color

cc
ccondo 20 Nov, 2007
How do I change the color of the text when someone fails validation?

IE: This field cannot be blank, etc?
Gr
GreyHead 20 Nov, 2007
Hi ccondo,

The validation failure is flagged by changing the class of the form element to 'validation-failed'. If you set up some CSS to work with this class you can easily change the formatting of the messages.

Bob
cc
ccondo 20 Nov, 2007
Is this something I do in the HTML of the form or in one of the chrono files?

IE: Where does this code or change take place?
cc
ccondo 20 Nov, 2007
OK - I actually got this figured out - and it changes the text color of the drop downs, etc. But it does not change the color of the text that actually says: "Please make a selection" etc.

What style would that be?
Gr
GreyHead 20 Nov, 2007
Hi ccondo,

Here's the code from Andrew Tetlaw's site (click the demo link from that page). The html message
<div style="opacity: 0.999999;" id="advice-validate-selection-field7" class="validation-advice">Please make a selection</div>
and the css that goes with it
.validation-advice {
background-color:#FF3300;
color:#FFFFFF;
font-weight:bold;
margin:5px 0pt;
padding:5px;
}
Bob<br><br>Post edited by: GreyHead, at: 2007/11/20 18:05
Mi
Mizpah 20 Nov, 2007
Hi Bob,

The to the demo page seems to go to this article ?

Cheers,

miz

Greyhead: Oops, fixed thank you (the site url has 'javascript' in it and isn't allowed by these forums).<br><br>Post edited by: GreyHead, at: 2007/11/20 18:07
we
wex 17 Dec, 2007
I am having a same question here.

Can someone post easy explanation how to change that color?


Thank you very much.
Gr
GreyHead 17 Dec, 2007
Hi wex,

You just need to include a little css snippet like the one below into your form code and make sure that you have the validation advice class set. 
<style>
.validation-advice {
background-color:#FF3300;
color:#FFFFFF;
font-weight:bold;
margin:5px 0pt;
padding:5px;
}
</style>
Bob
we
wex 18 Dec, 2007
Thank you Greyhead so much.

Cant wait to play with it🙂
we
wex 18 Dec, 2007
I am so happy🙂

It worked like a charm.

You are the best.<br><br>Post edited by: wex, at: 2007/12/18 09:06
hu
hungryOrb 10 Mar, 2008
GreyHead, ehm.. Sorry for my naivety, but please could you explain how to attach the Validation-Advice class to the validation advice? I don't see the validation advice in page source, so cant get an id or class :/

I should perhaps add that I tried adding the class of the field, which only changed the field contents and nothing outside of it. But that was expected. ^^<br><br>Post edited by: hungryOrb, at: 2008/03/10 17:50
hu
hungryOrb 10 Mar, 2008
Oh! I see in your referral of Andrew Tetlaw's site, you mention the <div>. Does this line replace the default "This is a required field" line? I guess there is no way to identify that actual line, but just replace it with that line? and then set the colour etc with that added class?
Gr
GreyHead 12 Mar, 2008
Hi hungryOrb,

What are you trying to do? This all sounds very complicated. You don't need to change any classes, the validation code does that. You just need to supply the appropriate css - see the example above.

Bob
Sa
Sapient 18 Mar, 2008
I hope this simplifies much of the styling issues I see on this forum. I am going to use an actual form to demonstrate. I will reference Dreamweaver as the editor in this example but it applies to any editor you may be using.

I am going to explain this from a Joomla installation prospective.

In every form, that you create, you can define the styles you want by simply calling a CSS file. This is actually placed between the <head> </head> tags in the editor (Dreamweaver).

When you copy it into Chrono Forms remove the head tags and just copy it at the top of the form code in the “Form Code” TAB / in the Form HTML section.

At the top of your form code add the following: 

<style type="text/css">
<!--
@import url(http:www.site.com/templates/css/forms.css);
-->
</style>


This will import a CSS file that will be used in your form. You can call this as an actual URL or as a relative link. If you use the full URL path, you will be able to test the form layout from your editor (Dreamweaver, etc…) without being in Joomla.

Once you have the layout the way you want it to be, you can change the above to be:

<style type="text/css">
<!--
@import url(../templates/css/forms.css);
-->
</style>


You will notice the CSS file is called forms.css. This file can be located in the template CSS folder / directory (templates/css/). Alternatively, it can be placed anywhere in your directory structure. Just be sure when you import it that the path is correct to where it physically is.

I recommend creating a separate CSS file rather than using your template CSS file (template_css.css). This will allow you to change templates without affecting your form styling.

The file forms.css can be called anything. If you want each form that you create to have different styles then you can create and import that specific file for each form.

An example would be:

For my logo design form I can create and import a css file called logo_design.css. For my Website Design form I can create and import a css file called website_design.css. This has no limit. For many like myself I prefer to have a standard feel and layout for all forms on a particular site. Therefore, I use a single css for all of my forms.

Form CSS layout using the “This is a required field.” as an example of changing the default display.

So using the forms.css file as an example, I would create a forms.css file and put the following in the file.

/* CSS Document */

.validation-advice {
background-color:#FF3300;
color:#FFFFFF;
font-weight:bold;
margin:5px 0pt;
padding:5px;
}


I would copy/ftp this file to the directory folder where I want to call it from. In this example I am using the /templates/css/forms.css directory.

I am now going to create my form code and at the top, place the following:

<head>

<style type="text/css">
<!--
@import url(http:www.site.com/templates/css/forms.css);
-->
</style>

</head>



Again, remember to remove the <head> tags when you copy to the Chrono Forms component. Also remember the URL path can be relative (Once moved to your website).
i.e. @import url(../templates/css/forms.css);

The above example will change your “This is a required field.” text without doing anything else. It will actually give it a red background with white font. This can be modified to your preferences.


Now I am going to give a complete form and CSS file as an example. I would like to apologize in advance to the original creator of this code. I just copied it and modified it to show a form requesting a Logo Design.

If anyone finds a mistake in the code, please let me know and I will make adjustments.

The following is how the FORM code would look in the editor (Dreamweaver): Notice I left the full URL path so that I could test the styles without pasting into Joomla/Chrono Forms Component.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Logo Design Form</title>

<style type="text/css">
<!--
@import url(http://69.94.30.224/templates/bosnia1.0/css/forms.css);
-->
</style>


</head>
<body>


<table border="0" cellpadding="3" cellspacing="0">
  <tr>
    <td>
      <div align="left" class="heading">
        Logo Design
								<br />
								<br />
      </div>
      <div align="left" class="subheading">
        Project Information
								<br />
      </div>
      <div class="details">
        Project Title:
        <input type="text" name="projtitle" size="40">
        (Required)
								<br clear="all" />
								<br clear="all" />


        Due Date:
        <select name="month" id="month" size="1">
          <option selected value="none">Select Month</option>
          <option value="Jan">Jan</option>
          <option value="Feb">Feb</option>
          <option value="Mar">Mar</option>
          <option value="Apr">Apr</option>
          <option value="May">May</option>
          <option value="Jun">Jun</option>
          <option value="Jul">Jul</option>
          <option value="Aug">Aug</option>
          <option value="Sep">Sep</option>
          <option value="Oct">Oct</option>
          <option value="Nov">Nov</option>
          <option value="Dec">Dec</option>
        </select>
        <select name="day" id="day" size="1">
          <option selected value="none">Select Day</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
        <select name="year" id="year" size="1">
          <option value="2008" selected="selected">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
        </select>
        (Required)
      </div>

      <br clear="all" />

      <div class="field-label">
      <p class="details">Are you uploading elements, such as photos?
        <input type="radio" name="elem" value="Yes_elem" id="elemyes"> Yes 
        <input type="radio" name="elem" value="No_elem" id="elemno"> No (Required)
      </p>
						</div>
																														
      <br clear="all" />

      <div class="details">
        Name/Text to be used in logo:
        <input type="text" name="logotext" size="60">
        (Required)

      <br clear="all" />
      <br clear="all" />

        Motto to be used:
        <input type="text" name="mottotext" size="60">
        (Required)

      <br clear="all" />
      <br clear="all" />

        Please give us a description of what you would like. <br />
        <textarea cols="50" name="logo_descrip" style="height: 63; width: 612" rows="4"></textarea>

      <br clear="all" />
      <br clear="all" />

        Number of colors desired?
        <input type="radio" name="colors" value="1 Color" id="color1">
        <label id="color1" for="color1"> 1 </label>
        <input type="radio" name="colors" value="2 Colors" id="color2">
        <label id="color2" for="color2"> 2 </label>
        <input type="radio" name="colors" value="3 Colors" id="color3">
        <label id="color3" for="color3"> 3 </label>
        <input type="radio" name="colors" value="Not Sure" id="colorns">
        <label id="colorns" for="colorns"> Not Sure </label>

      <br clear="all" />
      <br clear="all" />

        Please give us a brief description of the company. <br />
        <textarea cols="50" name="comp_descrip" style="height: 63; width: 612" rows="4"></textarea>

      <br clear="all" />
      <br clear="all" />

        Are there any logos in our portfolio or at a web site that are similar to what you are looking for? <br />
        <textarea cols="50" name="examp_descrip" style="height: 63; width: 612" rows="4"></textarea>
      </div>
      <br clear="all" />
    </td>
  </tr>
		<tr>
		<td>

      <fieldset>
      <legend>
      Contact Information Required:
      </legend>
      <div class="details">
        Company Name
        <input type="text" name="comp_name" size="40">
								<br />
        Web Address
        <input type="text" name="web_address" size="40">
        <br />
        Contact Name
        <input type="text" name="contact_name" size="40">
        <br />
        Address
        <input type="text" name="address" size="40">
        <br />
        City
        <input type="text" name="city" size="40">
        State
        <input type="text" name="state" size="2">
        Zip
        <input type="text" name="zip" size="5">
        <br />
        Telephone
        <input type="text" name="phone" size="10">
        Fax
        <input type="text" name="fax" size="10">
								<br />
        eMail Address
        <input type="text" name="email" size="40">
      </div>
      </fieldset>

						<br clear="all" />

      <p class="details">
        A company representative will contact you within 24 hours to discuss your requirements.
      </p>

						<br clear="all" />

      <p>
        <input type="submit" value="Send to GenoGraphix" name="Submit" style="font-style: italic; font-weight: bold">
        <input type="reset" value="Reset (cancel form)" name="reset" style="font-size: 8pt; font-style: oblique">
      </p>

    </td>
  </tr>
</table>





</body>
</html>


Here is the forms.css file that I moved to /templates/css/

/* CSS Document */


.heading {
	color:#000000;
	font-weight: bold;
	font-size: 24px;
}

.subheading {
	color:#000000;
	font-weight: bold;
	font-size: 16px;
}

.details {
	color:#000000;
	font-weight: bold;
	font-size: 16px;
 float: left;
 text-align: left;
 margin-right: 0.5em;
	padding: 10px 0px 0px 0px;
}

legend {
  color:#000000;
  background:#009EAE;
  border: 1px solid #781351;
  padding: 2px 6px;
}

fieldset {
	border: 1px solid #781351;
	width: 90%;
	background-color:#E9FEFE;
}

select {
  width: 8em;
  text-align: left;
}
  
input {
	color: #000000;
	background: #7FEEF7;
	border: 1px solid #781351;
}

.submit input {
	color: #000;
	background: #ffa20f;
	border: 2px outset #d7b9c9;
	background-color: ffa20f;
}

 .validation-advice {
background-color:#FF3300;
color:#FFFFFF;
font-weight:bold;
margin:5px 0pt;
padding:5px;
}


Here is how it looks after being copied into the Chrono Forms Component “Form Code” TAB / in the Form HTML section:


<style type="text/css">
<!--
@import url(../templates/bosnia1.0/css/forms.css);
-->
</style>



<table border="0" cellpadding="3" cellspacing="0">
  <tr>
    <td>
      <div align="left" class="heading">
        Logo Design
								<br />
								<br />
      </div>
      <div align="left" class="subheading">
        Project Information
								<br />
      </div>
      <div class="details">
        Project Title:
        <input type="text" name="projtitle" size="40">
        (Required)
								<br clear="all" />
								<br clear="all" />


        Due Date:
        <select name="month" id="month" size="1">
          <option selected value="none">Select Month</option>
          <option value="Jan">Jan</option>
          <option value="Feb">Feb</option>
          <option value="Mar">Mar</option>
          <option value="Apr">Apr</option>
          <option value="May">May</option>
          <option value="Jun">Jun</option>
          <option value="Jul">Jul</option>
          <option value="Aug">Aug</option>
          <option value="Sep">Sep</option>
          <option value="Oct">Oct</option>
          <option value="Nov">Nov</option>
          <option value="Dec">Dec</option>
        </select>
        <select name="day" id="day" size="1">
          <option selected value="none">Select Day</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
        <select name="year" id="year" size="1">
          <option value="2008" selected="selected">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
        </select>
        (Required)
      </div>

      <br clear="all" />

      <div class="field-label">
      <p class="details">Are you uploading elements, such as photos?
        <input type="radio" name="elem" value="Yes_elem" id="elemyes"> Yes 
        <input type="radio" name="elem" value="No_elem" id="elemno"> No (Required)
      </p>
						</div>
																														
      <br clear="all" />

      <div class="details">
        Name/Text to be used in logo:
        <input type="text" name="logotext" size="60">
        (Required)

      <br clear="all" />
      <br clear="all" />

        Motto to be used:
        <input type="text" name="mottotext" size="60">
        (Required)

      <br clear="all" />
      <br clear="all" />

        Please give us a description of what you would like. <br />
        <textarea cols="50" name="logo_descrip" style="height: 63; width: 612" rows="4"></textarea>

      <br clear="all" />
      <br clear="all" />

        Number of colors desired?
        <input type="radio" name="colors" value="1 Color" id="color1">
        <label id="color1" for="color1"> 1 </label>
        <input type="radio" name="colors" value="2 Colors" id="color2">
        <label id="color2" for="color2"> 2 </label>
        <input type="radio" name="colors" value="3 Colors" id="color3">
        <label id="color3" for="color3"> 3 </label>
        <input type="radio" name="colors" value="Not Sure" id="colorns">
        <label id="colorns" for="colorns"> Not Sure </label>

      <br clear="all" />
      <br clear="all" />

        Please give us a brief description of the company. <br />
        <textarea cols="50" name="comp_descrip" style="height: 63; width: 612" rows="4"></textarea>

      <br clear="all" />
      <br clear="all" />

        Are there any logos in our portfolio or at a web site that are similar to what you are looking for? <br />
        <textarea cols="50" name="examp_descrip" style="height: 63; width: 612" rows="4"></textarea>
      </div>
      <br clear="all" />
    </td>
  </tr>
		<tr>
		<td>

      <fieldset>
      <legend>
      Contact Information Required:
      </legend>
      <div class="details">
        Company Name
        <input type="text" name="comp_name" size="40">
								<br />
        Web Address
        <input type="text" name="web_address" size="40">
        <br />
        Contact Name
        <input type="text" name="contact_name" size="40">
        <br />
        Address
        <input type="text" name="address" size="40">
        <br />
        City
        <input type="text" name="city" size="40">
        State
        <input type="text" name="state" size="2">
        Zip
        <input type="text" name="zip" size="5">
        <br />
        Telephone
        <input type="text" name="phone" size="10">
        Fax
        <input type="text" name="fax" size="10">
								<br />
        eMail Address
        <input type="text" name="email" size="40">
      </div>
      </fieldset>

						<br clear="all" />

      <p class="details">
        A company representative will contact you within 24 hours to discuss your requirements.
      </p>

						<br clear="all" />

      <p>
        <input type="submit" value="Send to GenoGraphix" name="Submit" style="font-style: italic; font-weight: bold">
        <input type="reset" value="Reset (cancel form)" name="reset" style="font-size: 8pt; font-style: oblique">
      </p>

    </td>
  </tr>
</table>


Here is what the field titles section looks like (Field Titles TAB )


projtitle=Project Title
month=Month
day=Day
year=Year
elem=Uploads
logotext=Logo Text
mottotext=Motto
logo_descrip=Description of what you want
colors=Number of Colors
comp_descrip=Company Description
examp_descrip=Examples
comp_name=Company Name
web_address=Web URL
contact_name=Contact Name
address=Contact Address
city=Contact City
state=Contact State
zip=Contact Zip
phone=Contact Phone
fax=Contact Fax
email=Contact eMail


Here is what the Validation TAB section looks like (no spaces).
1-Required

projtitle,logotext,mottotext,contact_name,phone,email


Here is what the Validation TAB section looks like (no spaces).
12- Radio/Checkbox

elemno




Disclaimer:
This is my first form in Chrono Forms. Though this seems to work as intended for myself, I realize I may have made a few mistakes in the code. If you find any, please let me know and I will change accordingly.

Thanks,
Brian

Edit:
03-18-2008 Changed <p> to <div> for formatting consistency in IE and Firefox.<br><br>Post edited by: Sapient, at: 2008/03/18 14:35
Gr
GreyHead 18 Mar, 2008
Hi Brian,

Great thank you. I'll take a closer look when I get back to France then copy this into a tutorial.

Bob
mj
mjplowcha 07 Dec, 2008
Great help. Thanks!

With Joomla 1.5, I logged in to the admin area of my site. Then I went to the Extensions / Template Manager tab and selected my template. From there, I selected "Edit CSS" and added the line from your code...
.validation-advice {
background-color:#FF3300;
color:#FFFFFF;
font-weight:bold;
margin:5px 0pt;
padding:5px;
}


This pretty much covered all of the editing I needed to do. Of course, as you previously mentioned, you will want to create a new CSS and call it to the form if you are in need of specific styles throughout the site. But for a single style CSS throughout my site, this was exactly what I was looking for and covered all of the forms!
Max_admin
Max_admin 08 Dec, 2008
Thanks for posting this good tutorial!🙂

Regards
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.