# Contact Form Error Messages



## EspressoBean (Feb 29, 2016)

So I am trying to get the contact form error messages to show up as they do in the Parsley JS demo but they aren't. The input box isn't highlighting in red and the messages don't appear in their proper color and I am not sure why. Can someone please help?

*Page:*

www.polarpos.com/md/contactus.html

*Form Source:*

http://hastebin.com/usodoruyud.html

*Page Source:*

http://hastebin.com/emodupiqoz.html

*CSS Source:*

http://hastebin.com/iyumujocin.css

*Parsley JS Demo:*

http://codepen.io/anon/pen/GNQzoL


----------



## JiminSA (Dec 15, 2011)

Please read the "Installation" section of this link , because you need to download and link to jQuery; Parsley js. and also to Parsley css.


----------



## EspressoBean (Feb 29, 2016)

I do have that at the bottom of my style.css which is used on all pages:

http://hastebin.com/qiviriyulu.css


----------



## JiminSA (Dec 15, 2011)

Your hastebin.com version of style.css does indeed include the parsley css, but your style.css online does not.
You also need to include the following in your contactus.html:

```
...
```


----------



## EspressoBean (Feb 29, 2016)

Ok I got it in there but still doesn't follow the style.

The script form is there.

http://hastebin.com/ruzayemawu.html


----------



## JiminSA (Dec 15, 2011)

The following css:

```
/* Parsley JS CSS */
  input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}
/* Parsley JS CSS */
}
/* Smallest Devices, Phones */
```
appears at the bottom of your style.css script. You obviously put it there, but the presence of the last 2 lines is a bit disconcerting and may well be the reason that the browser is not picking up the parsley css.
I suggest you take out exactly what you inserted and place the parsley css in the head section of your contactus.html, thus:

```
<style>
  /* Parsley JS CSS */
  input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}
/* Parsley JS CSS */
</style>
```


----------



## EspressoBean (Feb 29, 2016)

Ok added as you suggested but still the same.


----------



## JiminSA (Dec 15, 2011)

In the codepen example, the css is in a file called parsley.css. So let us emulate them and do the same ...
Create a css file called parsley.css and upload it to your root folder and replace these lines in your section:

```
<!-- Main Style -->
        <link rel="stylesheet" href="style.css">
```
with

```
<!-- Main Style -->
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="parsley.css">
```
and let's see if it will pick it up
Oh almost forgot - take out the inline css we inserted in the section, please.


----------



## EspressoBean (Feb 29, 2016)

parsley css:

http://hastebin.com/orarewuqah.css

But still the same.


----------



## JiminSA (Dec 15, 2011)

The css *is* being picked up, but it is being overridden by these classes - form-contact-warp form-apply-job & cb-form as declared in this line:

```
<form name="contactus" id="contactus" class="form-contact-warp form-apply-job cb-form" method="post" action="processing.php" data-parsley-validate>
```
So you should resolve the class conflict by removing the class="form-contact-warp form-apply-job cb-form" from the form and see what happens.


----------



## EspressoBean (Feb 29, 2016)

Removed it but it just breaks the error messages where it should say "required"


----------



## JiminSA (Dec 15, 2011)

EspressoBean said:


> Removed it but it just breaks the error messages where it should say "required"


Sorry, I don't understand what you mean ...
I think you should also take out this div:

```

```


----------



## EspressoBean (Feb 29, 2016)

it is better now but the "Oh Snap!" is still showing up incorrectly compared to the examples.


----------



## JiminSA (Dec 15, 2011)

These 2 classes seem to be totally missing from parsley.css

```
.bs-callout-warning {
    background-color: #fcf8f2;
    border-color: #f0ad4e;
}

.bs-callout {
    margin: 20px 0;
    padding: 20px;
    border-left: 3px solid #eee;
}
```
... if you remove the superfluous } and put the above code in your parsley.css ...


----------



## EspressoBean (Feb 29, 2016)

Nope still not showing up correctly. Maybe another conflict?


----------



## JiminSA (Dec 15, 2011)

Add these ...

```
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
```


----------



## EspressoBean (Feb 29, 2016)

Got it. Ok. This conflict resolution is going to be tricky.


----------



## JiminSA (Dec 15, 2011)

Yes - to be frank, I am not impressed with parsley - stuff missing, poor installation instructions, etc.,
Incidentally, without wishing to appear fussy, could you change "Send an Message" to "Send a Message", please?


----------



## EspressoBean (Feb 29, 2016)

Ok I will change that.


----------



## JiminSA (Dec 15, 2011)

Thanks - it was bugging me


----------



## JiminSA (Dec 15, 2011)

JiminSA said:


> ... if you remove the superfluous } and put the above code in your parsley.css ...


The superfluous '}' is still there ... in the online parsley.css


----------



## JiminSA (Dec 15, 2011)

JiminSA said:


> Add these ...
> 
> ```
> .bs-callout-warning h4 {
> ...


Still needs to reflect in the online parsley.css


----------

