WordPress.org

Forums

Contact Form 7
Contact Form 7 - Issues Displaying Across Browsers (2 posts)

  1. twilitegxa
    Member
    Posted 4 years ago #

    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

  2. twilitegxa
    Member
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic