WordPress.org

Forums

Contact Form 7
Red alert/error won't disappear (7 posts)

  1. plukasz
    Member
    Posted 1 year ago #

    Note: I have the newest version of WP 3.8.1, WordPress theme from TemplateMonster.

    1) Problem shows when I want to fill with wrong data my form... It's shows red alert, but won't disappear after click or drag mouse into filed. The problem is only when I work with updated module to newest version of CF7 3.6. It's work fine when I use old version 3.2 which was given to me with wordpress template files source. I try to fix this problem with tips (f.ex. http://contactform7.com/faq/does-contact-form-7-support-html5-input-types/) but won't help. Any advice?

    Solution: In this moment the one solutions is back to old version. :/

    2) My second questions. Can I put in somehow: captcha, captcha filed, reset and sent in one line? Solution which I found on forum: http://www.wpsnippet.com/create-a-two-column-form-using-contact-form-7/.
    Can I make it easier? For now I have only RESET and SENT button in one line:

    <em><p class="field">[text* your-name watermark "Imię i nazwisko:"]</p>
    <p class="field">[email* your-email watermark "E-mail:"]</p>
    <p class="field">[text* your-phone watermark "Telefon:"]</p>
    <p class="field">[text* your-subject watermark "Temat wiadomości:"]</p>
    <p class="field">[textarea* your-message watermark "Wiadomości:"]</p>
    [captchac captcha-878 size:l] [captchar captcha-878]
    <p class="submit-wrap"><input type="reset" value="reset" />[submit "wyślij"]</p></em>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Thanks for any help and advice,
    Lukasz

    http://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 1 year ago #

    RE: Problem shows when I want to fill with wrong data my form...

    This now standard behaviour. Floating validation tip has been removed for accessibility improvement. See the changelog of v3.6.

    See also http://wordpress.org/support/topic/validation-errors-dont-disappear-when-trying-to-correct-form-field

    RE: Can I put in somehow: captcha, captcha filed, reset and sent in one line?

    I use Ordered List elements to display multiple fields on single line.

    HTML:

    <ol class="singleline">
    <li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
    <li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>

    Added to Form section of CF7 interface. Labels are added for improved accessability.

    CSS:

    .wpcf7-form .singleline ol {
    list-style: none;
    margin: 0;
    }
    
    .wpcf7-form .singleline li{
    display: inline-block;
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    }

    Added to Child Theme style.css

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

  3. SiteDesignUSA
    Member
    Posted 1 year ago #

    Hello. I just wanted to chime in and say I'm having the same issue. Red covers the field and the user can't see input. They become discouraged and frustrated.

    I changed the style on the selector

    .wpcf7 span.wpcf7-not-valid-tip
    remove right: 0;
    and change top to
    top: -2px;

    At least it moves the red span out of the users way so they can see. What happened to the jquery?

    Thanks for the plugin

  4. buzztone
    Member
    Posted 1 year ago #

    RE: What happened to the jquery?

    Floating validation tip has been removed for accessibility improvement. See the changelog of v3.6.

  5. Jeroen Sormani
    Member
    Posted 1 year ago #

    I made multiple fixes, these fixes make sure that the validation error of the element you are on dissapears.

    Error dissapears on hover

    jQuery( ".wpcf7-form-control-wrap" ).hover( function() {
    	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
    });

    Error dissapeasr on click

    jQuery( ".wpcf7-form-control-wrap" ).hover( function() {
    	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
    });

    CSS fix, error dissapears on hover and focus of the element

    .wpcf7-form-control-wrap:hover .wpcf7-not-valid-tip, .wpcf7-form-control:focus + .wpcf7-not-valid-tip { display:none; }

    Hope this helps :)

  6. buzztone
    Member
    Posted 1 year ago #

  7. SternsbergerM
    Member
    Posted 1 year ago #

    Thank you @ Sormano - cool and helpful solution!

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