Problem with contact form

[onlinegamesnz]

Hi, im quite new to HTML and CSS etc.

I have a contact form at http://megahosting.co.nz/contact.php

I am trying to add the contact form in the footer on all pages. I have manged to intergrate it and it works. But there a few small yet large issues.

The text fields backgrounds always change white when you click into the textfield and stay white until you refresh the page. The page with the text field in the footer is

http://megahosting.co.nz/indextest.php

At the bottom left.

Also, with the contact page when you submit a message, a green message appears above the contact form, saying that the message has been sent sucessfully. However, it does not display on the footer. However, the loading message appears on both.

I cant find anything in the CSS or HTML to fix this.

I would really appreciate any help with this!!

Thanks guys!!

 

[CaldwellYSR]

Hi, im quite new to HTML and CSS etc.

I have a contact form at http://megahosting.co.nz/contact.php

I am trying to add the contact form in the footer on all pages. I have manged to intergrate it and it works. But there a few small yet large issues.

The text fields backgrounds always change white when you click into the textfield and stay white until you refresh the page. The page with the text field in the footer is

http://megahosting.co.nz/indextest.php

At the bottom left.

Also, with the contact page when you submit a message, a green message appears above the contact form, saying that the message has been sent sucessfully. However, it does not display on the footer. However, the loading message appears on both.

I cant find anything in the CSS or HTML to fix this.

I would really appreciate any help with this!!

Thanks guys!!

I didn't look at the green message you were talking about. There must be something in the contact form that puts the inline style on there when you click it. The reason your style gets overwritten is the inline style that's thrown on there. A quick fix would be to throw and !important tag on the border and background color of your CSS.

 

[onlinegamesnz]

Thanks for the reply!

Ill try the !important tag after background-color

background-color="#000000# !important

Ill try this now and see how i get on

Thanks again!

 

[onlinegamesnz]

Ok i tried the following

background-color: #F4F4F4 !important;

with no luck. Where else could this be? There is a ContactForm.js

could this rule be defined in JS?

Thanks, its really annoying lol

 

[onlinegamesnz]

Heres what i found. I found it here in the ContactForm.js

$('#name, #subject, #email,#message').focus(function(){
$(this).css({"background":"#F4F4F4","border":"2px solid #666666"});

Changed it and it works

Is there a way i can maybe remove this, or setup a seperate style in the CSS as the focus instead of having it in a different document?

Thanks!

 

[CaldwellYSR]

Heres what i found. I found it here in the ContactForm.js

$('#name, #subject, #email,#message').focus(function(){
$(this).css({"background":"#F4F4F4","border":"2px solid #666666"});

Changed it and it works

Is there a way i can maybe remove this, or setup a seperate style in the CSS as the focus instead of having it in a different document?

Thanks!

Yeah if you remove that it shouldn't be too big of a deal, then any of your :focus pseudo classes will work just fine.

 

[onlinegamesnz]

yea the reason its focusing back is when you type an invalid entry into the text field it makes the border red, then when you click back in to correct it changes it back.

Ive never used focus in CSS, could you give me an example.

Thanks!

 

[onlinegamesnz]

is the CSS where abouts to put the :foucs code

I tried searching but they just showing the HTML css code

Thanks!

 

[CaldwellYSR]

is the CSS where abouts to put the :foucs code

I tried searching but they just showing the HTML css code

Thanks!

Yes there's no reason to do "HTML css code". In your css you would just put:

/*input class name*/:focus {
    
}

Obviously you don't have the comment in there it's just class name then :focus.

Now if you're really trying to get that red border if there are errors then you'll need to handle that with javascript because CSS has no way of knowing if there are errors. However what I would do is in the javascript if there's an error add an "error" class to the input that had the error then in your css define a .error class with what you want an input with an error to look like.

 

[onlinegamesnz]

Yea i already have the red border on error, i just want it to restore on the original style when you click into the input field to correct the error.

Is this :focus a new style, or do i just put infront an thats it

.textfield-footer:focus;
background-color #000000;
Etc
Etc

Thanks man

 

[CaldwellYSR]

It's a new style. The :focus will put in anything that changes from the basic .textfield-footer property. If you're doing the error method the way I describe then in your javascript you would just remove the error class on focus. If you're not doing it that way then I'd have to know how you're changing the border red when you discover an error...

 

[onlinegamesnz]

The error and red border side of things already work, there is a seperate .js javascript handling it.

The problem i have is,

I have made another contact form, with different styles to the default one on the contact page, i have put one in the footer of the page

http://megahosting.co.nz/indextest.php

I couldnt use the same style for both as it didnt look right, so i created a new style for the footer contact form, but then was faced with the problem that when i clicked in the footer input fields of the contact form, the style would change back to the default style on the contact page (like focus) as it was set in the javascript to do so

So i deleted that, which now when i onclick one of the textfields on the footer contact form, the style remains the same, which is right.

However as a result of removing this from the javascript, it doesnt focus back to the default style in order to remove the red border, until the page is reloaded.

So basicly i want the footer one to focus with the same css as it currently shows, so when onlicked (focus), it will restore the red border.

Visa vera for the contact form on the contact page

So, two different forms, 2 different styles, 2 different focus styles to restore the red border

Thanks

 

[CaldwellYSR]

Then in your contact.js change the $(#name,#message... ) part to:

var color = /* bgcolor */
var border = /* border css */

$(.textfield-footer).focus(function() {
    $(this).css({"background":color,"border": border});
});

This way it only effects the ones in the footer.

 

[onlinegamesnz]

This looks better haha... Cool

Can i put two in, for the two styles. Like....

$(.textfield-footer).focus(function() {
$(this).css({"background":color,"border": border});

$(.textfield-maincontact).focus(function() {
$(this).css({"background":color,"border": border});


});

Thanks man, i didnt design the site, just a template im more the hosting/networking side

thanks

 

[onlinegamesnz]

Ive replaced with the code you gave me, but now its reversed things.

Footer contact form is working fine, but not on contact page.

Thanks!

 

[CaldwellYSR]

Ive replaced with the code you gave me, but now its reversed things.

Footer contact form is working fine, but not on contact page.

Thanks!

Put a class on the contact page inputs and use those you can't get them to both work with one functions without running some kind of check to see which one it is within the function

 

[onlinegamesnz]

Thanks, i cannot give them the same class (style) if thats what you mean, as they need to be different.

 

[CaldwellYSR]

Thanks, i cannot give them the same class (style) if thats what you mean, as they need to be different.

Yeah exactly. If you give them the same class they will have the same styles. If that's what you want then go for it (although the name is odd if it's not in the footer) but if you want different styles they will need different class names.