WordPress.org

Support

Support » Plugins and Hacks » Contact Form 7 » Contact Form 7 – Issues Displaying Across Browsers

Contact Form 7 – Issues Displaying Across Browsers

  • twilitegxa

    @twilitegxa

    I have a from setup in thw sets of div tags: one for the left side of the form and one for the right. Everything displays as expected in Safari, but when I checked in Firefox, the CAPTCHA image and textbox are showing up at the top of the form. Ho can I fix this? Here is my form:

    [code]
    <div id=”rightside”>Email :
    [email* email 30/ class:formtxt tabindex:2]
    <p> </p>
    <p> </p>
    Phone :
    [text* phone 30/ class:formtxt tabindex:4]
    <p> </p>
    <p> </p>
    How did you hear about me? :
    [text about 30/ class:formtxt tabindex:6]</div>
    <div id=”leftside”>Name :
    [text* name 30/ class:formtxt tabindex:1]
    <p> </p>
    <p> </p>
    Location (city/country) :
    [text* location 30/ class:formtxt tabindex:3]
    <p> </p>
    <p> </p>
    Age of Baby :
    [text* age 30/ class:formtxt tabindex:5]
    <p> </p>
    <p> </p>
    Brief Explanation of Baby’s Issues :
    [textarea* issues 40x x5 tabindex:7]
    <p> </p>
    <p> </p>
    Other comments :
    [textarea comments 30x x5 tabindex:8]
    <p> </p>
    <p> </p><div id=”clear”> </div>
    Enter the Captcha Code :
    [captchac captcha fg:#4d63ca bg:#c3cce6 class:leftcap] [captchar captcha 30/ class:formtxt tabindex:9]
    <div id=”clear”> </div>
    <p> </p>
    <p> </p>
    [submit class:submit]
    </div>
    [/code]

    And here is the CSS for Contact Form 7:

    [code]
    div.wpcf7 {
    margin: 0;
    padding: 0;
    }

    div.wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    }

    div.wpcf7-mail-sent-ok {
    /*border: 2px solid #398f14;
    clear: both;*/
    color: #ffffff;
    display: none;
    visibility: hidden;
    }

    div.wpcf7-mail-sent-ng {
    /*border: 2px solid #ff0000;*/
    }

    div.wpcf7-spam-blocked {
    border: 2px solid #ffa500;
    }

    div.wpcf7-validation-errors {
    clear: both;
    border: 2px solid #f7e700;
    }

    span.wpcf7-form-control-wrap {
    position: relative;
    }

    span.wpcf7-not-valid-tip {
    position: absolute;
    top: 150%;
    left: 0%;
    z-index: 100;
    background: #fff;
    border: 1px solid #ff0000;
    font-size: 10pt;
    width: 180px;
    padding: 2px;
    }

    span.wpcf7-not-valid-tip-no-ajax {
    color: #f00;
    font-size: 10pt;
    display: block;
    }

    span.wpcf7-list-item {
    margin-left: 0.5em;
    }

    .wpcf7-display-none {
    display: none;
    }

    div.wpcf7 img.ajax-loader {
    border: none;
    vertical-align: middle;
    margin-left: 4px;
    }

    div.wpcf7 .watermark {
    color: #888;
    }

    #rightside {
    margin-top: 0px;
    margin-left: -250px;
    float: right;
    z-index: 2;
    }

    #leftside {
    float: left;
    z-index: 1;
    }

    .formtxt {
    height: 20px;
    }

    .leftcap {
    float: left;
    }

    .rightcap {
    float: right;
    }

    #clear {
    clear: both;
    }

    .submit{
    width:61px; height:22px; color:#337581; background:url(images/submit.png) top center no-repeat; border:0px; font-size: 16px; padding-bottom: 25px;}

    [/code]

    What am I doing wrong? Here are the links for what the form looks like in Firefox and how it looks in Safari (the way I want it to look):

    [IMG]http://i452.photobucket.com/albums/qq246/twilitegxa/ff.png[/IMG] – Firefox
    [IMG]http://i452.photobucket.com/albums/qq246/twilitegxa/safari.png[/IMG] – Safari

Viewing 1 replies (of 1 total)
  • twilitegxa

    @twilitegxa

    Well, I took the left div tag out and now it looks better, but my redirect is not working. It is supposed to go to: domainname.com/thanks but it is going to domainname.com/#wpcf7-f2-p60-o1

    and saying the page could not be found. Any help? Issue us still on Firefox. Works on Safari.

Viewing 1 replies (of 1 total)
  • The topic ‘Contact Form 7 – Issues Displaying Across Browsers’ is closed to new replies.
Skip to toolbar