WordPress.org

Forums

Contact Form 7
[resolved] How to change the validation style from scripts.js ? (13 posts)

  1. cooljaz124
    Member
    Posted 4 years ago #

    Hi,

    This is my contact form structure

    <div><!-- Grand Parent -->
      <span class="wpcf7-form-control-wrap email-496">
        <input type="text" size="40" class="wpcf7-text wpcf7-validates-as-email email required hire-email" value="" name="email-496" title="*email">
      </span>
    </div>

    For each input field, I have a span element as parent( which contact form 7 appends ) and a div as Grand Parent.

    What I need to achieve is, to change the background color of the GrandParent div whenver there is a validation error.

    In scripts.js, i have edited from line 127

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Can someone please help ?

    Thanks in advance :)
    Jaz

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

  2. cooljaz124
    Member
    Posted 4 years ago #

    This the code that got moderated - http://pastebin.com/NB00iAgf

  3. shecky
    Member
    Posted 4 years ago #

    Try with this:
    parentDiv.css(backgroundColor, 'red');

    or whit this:
    parentDiv.css('background-color', 'red');

    Note: put $ before ;-)

  4. cooljaz124
    Member
    Posted 4 years ago #

    @@shecky Have tried both :) even $parentDiv.hide() isn't working :) Any idea ? Thanks for replying !

  5. shecky
    Member
    Posted 4 years ago #

    Remove all your code and try this:

    into.parent().parent().css('background-color', 'red');

  6. cooljaz124
    Member
    Posted 4 years ago #

    into.parent().css('background-color', 'red'); Worked :) Double parent found the outer div of form :)

    Thank you so much Shecky. I love the community :)

  7. shecky
    Member
    Posted 4 years ago #

    I did a double copy and paste, sorry =P

    See you later.

  8. naga2012
    Member
    Posted 4 years ago #

    how to get a contact form 7 in lightbox method through shortcode when clicking in navigation menu contactus menu

  9. cooljaz124
    Member
    Posted 4 years ago #

    @naga2012 - Make a page. Add shortcode there. Use a lightbox plugin.

    eg: Click "Submit" in http://tintumon.com/

  10. naga2012
    Member
    Posted 4 years ago #

    can i get that light box when clicking the contact us which is created as custom navigation menu (without going to page)

  11. shecky
    Member
    Posted 4 years ago #

    Give at link attribute rel=lightbox ;-)

  12. cooljaz124
    Member
    Posted 4 years ago #

    Yes. Write this code in the page template.

    <div id="contact-form-box">
    <?php echo do_shortcode( ** put contactform7 shortcode here ** ); ?>
    </div><!-- ends #contact-form-box -->

    Give #contact-form-box{ display: none; }

    In custom menu, make a new one with url http://www.site.com#contact-form-box

    Use a ColorBox plugin and get Inline HTML style from the demo.

    I guess, you should be able to work it out that way.

  13. naga2012
    Member
    Posted 4 years ago #

    hai colorbox plugin a encountered problem that the plugin not having header file....but i am using lightbox plus plugin in that way i tried to get the light box not working any solutions in this plugin to get light box contact form in navigation menu(custom menu) in wordpress

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