WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: Contact Form 7] incorrect CSS ? can’t find it being echoed in PHP

[Resolved] [Plugin: Contact Form 7] incorrect CSS ? can’t find it being echoed in PHP

  • The Span class encasing the Submit button has a class of
    “frame-outer ajax-loader”

    The space in between seems (and I’m guessing here) to be causing the CSS to treat “ajax loader” as a child element of span.frame-outer when i add it to the style sheet and I can’t apply the needed styles to it (spacing issue).

    I looked through the CSS, PHP, and JS files (of the plug in) but can’t find where that line is being echoed. It appears to be a combination of two terms possibly in two different places in the code, but i’m either going blind from looking for it or I’m looking for the wrong thing/place altogether.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi, I’m the author of Contact Form 7. I don’t know the “frame-outer” code and where it’s from. Contact Form 7 only puts “ajax-loader” as long as I know.

    well that would explain why i can’t find it…
    but I’m not sure how it would echo the span class that way otherwise…
    here’s the line in question:
    <input type="submit" value="Send" /><span class="frame-outer ajax-loader" style="visibility: hidden;"><span><span><span> <img class="ajax-loader" alt="ajax loader" src=

    I’ll keep looking in other places to see if I can find it, but here is the full html of the Contact 7 form, in case looking at it helps you see something I don’t.

    <div id="body">
    
    				<div class="post" id="post-24">
    		<h2>Contact</h2>
    			<div class="entry">
    				<div class="wpcf7" id="wpcf7-f1-p24-o1">
    <form action="/Clayton/contact/#wpcf7-f1-p24-o1" method="post" class="wpcf7-form">
    <div style="display: none;"><input type="hidden" name="_wpcf7" value="1" /><input type="hidden" name="_wpcf7_version" value="1.8.0.3" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p24-o1" /></div>
    <p>Your Name (required)<br />
    
        <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span> </p>
    <p>Your Email (required)<br />
        <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span> </p>
    <p>Subject<br />
         <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" /></span> </p>
    <p>Your Message<br />
        <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"></textarea></span> </p>
    
    <p>Please Enter the Code in the Box Below<Br /><input type="hidden" name="_wpcf7_captcha_challenge_captcha-781" value="411371300" /><img alt="captcha" src="http://SITEURL/wp-content/uploads/wpcf7_captcha/411371300.png" class="wpcf7-captcha-captcha-781" width="72" height="24" /><br />
    <span class="wpcf7-form-control-wrap captcha-781"><input type="text" name="captcha-781" value="" size="40" /></span><br />
    <input type="submit" value="Send" /><span class="frame-outer  ajax-loader" style="visibility: hidden;"><span><span><span> <img class="ajax-loader"  alt="ajax loader" src="http://localhost:8888/Clayton/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></span></span></span></span></form>
    <div class="wpcf7-response-output"></div>
    </div>
    
    			</div>
    		</div>
    
    </div>

    This is the only issue I’ve had, great plugin!! Many thanks!!

    -davis

    hmm, what theme are you using? I asked Google with “frame-outer span” and found a WordPress theme

    http://michael.tyson.id.au/2008/10/10/elegant-grunge-wordpress-theme/

    I don’t know if this is related, though.

    It’s related, that’s the theme I’m using for a starting point.

    just changing this to resolved. your last update solved the issue.
    many thanks!

    I found i was having this same problem, it occurs when you have the elegant grunge photo frame enabled.

    Now its only supposed to be done on images larger than 25×25 but because the ajax loader gif used in contact form 7 doesnt have a height and width specified the elegant grunge theme tries to add a photo frame to it which alters the position of the submit button.

    To fix this simply open up the file contact form 7 > modules > submit.php and where it says:

    $html .= ‘ <img class=”ajax-loader” style=”visibility: hidden;” alt=”ajax loader” src=”‘ . $ajax_loader_image_url . ‘” />’;

    add in:

    height=”16″ width=”16″

    So it should now be:

    $html .= ‘ <img class=”ajax-loader” style=”visibility: hidden;” height=”16″ width=”16″ alt=”ajax loader” src=”‘ . $ajax_loader_image_url . ‘” />’;

    The elegant grunge theme will now stop trying to add a photo frame to this image and the form will look as it should.

    Contact Form 7 is a great Plugin.
    But I do not know how to add following information into the table:
    Company name
    Telephone
    Post address
    If possible, please give us some guidence.
    Thank you very much in advance!

    I found this and it answered a few questions, maybe it will help you as well.
    Check the text area with column (width) and row (height)
    http://ideasilo.wordpress.com/2008/01/04/contact-form-7-tag-syntax/

    Good luck!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] [Plugin: Contact Form 7] incorrect CSS ? can’t find it being echoed in PHP’ is closed to new replies.