WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: Contact Form 7] Captcha input field not displayed in IE (2 posts)

  1. Marventus
    Member
    Posted 4 years ago #

    Hello takayukister,

    I'm experiencing the strangest behavior using Contact Form 7 in this blog running on Thesis 1.6 theme: the captcha input field does not display in IE but the captcha image does. However, the input field displays just fine in FF, Chrome, Opera, and Safari. In these browsers, the code inputted validates just fine, but in IE it is not possible to input it.

    I looked at the relevant captcha Documentation and FAQ, and searched through all 45 pages of this support forum, but unfortunately I didn't find a single mention to this issue.

    This is the custom code I'm using:

    <p><span class="contactlabel">Your Name<span class="colorcur">*</span>:</span> [text* your-name class:contactfld] </p>
    
    <p><span class="contactlabel">Your Email<span class="colorcur">*</span>:</span> [email* your-email class:contactfld]</p>
    
    <p><span class="contactlabel">Subject:</span>[select* menu-449 id:contactsel class:contactfld include_blank "Share an Idea / Resource" "Submit General Feedback" "Report a Site Bug / Issue" "Other Feedback"]</p>
    
    <p><span class="contactlabel">File Upload:</span>[file file-46 limit:10mb class:contactfld filetypes:rar|tar|zip|gzip|doc|dotx|docx|pdf|xls|xlsx|xltx|ppt|pps|pptx|potx|ppsx|mdv|adp|adn|accdb|pub|ai|cdr|indd|swf|fla|avi|mpg|mp3|m4a]</p>
    
    <p><span class="contactlabel">Your Message<span class="colorcur">*</span>:</span> [textarea* your-message class:contactmsg]</p>
    
    <p>[captchar captcha-963 class:contactcapfld]  [captchac captcha-963 class:contactcaptcha fg:#AC0002 bg:#000 size:s]</p>
    
    <p><span class="requiredtxt"><span class="colorcur">*</span>  Field is required.</span></p>
    <p>[submit class:form_submit "Submit"]</p>

    Here's what I have tried and discovered so far:

    1. Removing all custom styling: By deleting the class asignations. Didn't work.
    2. Regenerating the tag: Through the Tag Generator and also manually (typing it) .Didn't work.
    3. Check the html output in IE: All the relevant html appears just fine in the source code and, as far as I can tell, it is identical to the one outputted by the other browsers.
    4. Adding a second captcha tag: Two captcha images display but only one input field is visible in IE. Fully or partially deleting either one of them leads to the same result.
    5. Inserting html directly inside the form: I tried replacing the captcha tag with the outputted html code extracted from Firebug and IE: same result.
    6. Disabling all plugins: Except for CF7 and RSC. Same result.
    7. Trying the plugin in a different blog with fresh theme install: Works in this test blog, which is also running on Thesis, and with the same theme and plugin versions.

    I'm really out of ideas and I would really like to use this plugin because I think it's wonderful, so if you have any suggestions please let me know.

    Thanks!

  2. Marventus
    Member
    Posted 4 years ago #

    UPDATE:

    I figured it out! Turns out it WAS a CSS issue after all. The reason why I didn't pick up on it before is because the culprit was a "float: right" command applied to the text, select, and textarea inputs' class (thus not contained in the captcha's class styles). When I was trying to troubleshoot the issue, I was only disabling the captcha's styles, not the other form elements' styles. So what I did is I added a "clear:both" in the captcha input field's class and it solved the problem.

    Hope this is useful for anyone else who is as methodically absentminded as me! :-)

    Take care!

Topic Closed

This topic has been closed to new replies.

About this Topic