Problem with contact form

Discussion in 'Web Design' started by onlinegamesnz, Jul 2, 2012.

to remove all ads.
  1. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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!!
     
  2. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  3. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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!
     
  4. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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 ;)
     
  5. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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!
     
  6. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  7. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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!
     
  8. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    is the CSS where abouts to put the :foucs code

    I tried searching but they just showing the HTML css code

    Thanks!
     
  9. CaldwellYSR

    CaldwellYSR Member

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

    Code:
    /*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.
     
  10. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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
     
  11. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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...
     
  12. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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
     
    Last edited: Jul 2, 2012
  13. CaldwellYSR

    CaldwellYSR Member

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

    Code:
    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.
     
  14. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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
     
  15. onlinegamesnz

    onlinegamesnz New Member

    Messages:
    46
    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!
     
  16. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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
     
  17. onlinegamesnz

    onlinegamesnz New Member

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

    CaldwellYSR Member

    Messages:
    658
    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.
     

Share This Page