[resolved] [Plugin: Contact Form 7] incorrect CSS ? can't find it being echoed in PHP (9 posts)

  1. daviscomedy
    Posted 7 years ago #

    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.

  2. Takayuki Miyoshi
    Posted 7 years ago #

    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.

  3. daviscomedy
    Posted 7 years ago #

    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">
    			<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="" /><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>

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


  4. Takayuki Miyoshi
    Posted 7 years ago #

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


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

  5. daviscomedy
    Posted 7 years ago #

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

  6. daviscomedy
    Posted 7 years ago #

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

  7. Brian Jones
    Posted 7 years ago #

    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 25x25 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.

  8. Donald
    Posted 6 years ago #

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

  9. 2TheSchultzs
    Posted 6 years ago #

    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)

    Good luck!

Topic Closed

This topic has been closed to new replies.

About this Topic