WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Submitted Text Disappearing (12 posts)

  1. Guy1347
    Member
    Posted 1 year ago #

    I just installed the Contact 7 Form plugin and created a web form which is working fine, except for a problem of disappearing text. When the user types text in a text submission box the text they entered is visible, but when they click outside of text box (or on a different text box) then text they have already entered disappears. If you click back in the completed box, the text reappears. I have a feeling it may be a CSS issue, but I'm not sure where/how to correct it.

    You can see the form here: http://guaranty-solutions.com/?page_id=628

    Can someone tell me what I need to do to correct this? Thanks.

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

  2. biswajeet
    Member
    Posted 1 year ago #

    You have css problem from your theme style

    Correct the text color for this rule -

    input[type="text"], input.text, input.title, textarea, select {
    color: #000;
    }
  3. Guy1347
    Member
    Posted 1 year ago #

    I tried making this change, but the text still disappears when I click outside of the text box. :(

  4. biswajeet
    Member
    Posted 1 year ago #

    @Guy1347
    Where did you make the correction...? I can still see the wrong color value. You need to rectify the correction on your theme style.css for the above rule that I wrote!

  5. Guy1347
    Member
    Posted 1 year ago #

    i made the change and tried it and it still disappeared, so I changed it back to the original value.

  6. Guy1347
    Member
    Posted 1 year ago #

    Here are the current CSS settings:

    input[type=text],input.text, input.title, textarea, select {
    color: #000;
    }
    input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
    input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
    textarea { padding: 4px; }
    //input[type="text"], input.text, input.title, textarea, select {
    color: #000;
    }

    The text is still disappearing when you click outside of the text input box.

  7. biswajeet
    Member
    Posted 1 year ago #

    Hi, your correction is still not visible and hence the problem remain. If you are unsure then fix the color value as color: #000 !important;

  8. Guy1347
    Member
    Posted 1 year ago #

    I have discovered this is not a CSS issue but a browser issue. When I use Firefox Mozilla, the text remains visible as it should, but when I use the Safari browser and certain versions of Internet Explorer, the text disappears as I have described.

    Is there any way to make this work properly on all browsers?

  9. Infoprincess
    Member
    Posted 1 year ago #

    I'm having a similar issue except my fonts don't show up at all, probably because they're white. I've tried following your instructions above to change the font color, but it did nothing.

    I've also checked other browsers. The problem is universal.

    http://www.infoprincess.com/contact

  10. trdgeorge
    Member
    Posted 1 year ago #

    Please advise as to whether this issue has been resolved, and if so how as I am experiencing the same problem.

  11. buzztone
    Member
    Posted 1 year ago #

    @trdgeorge - There is no issue to be resolved as such. All of the above comments relate to people looking to style their CF7 forms.

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don't loose your changes when you update the theme.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don't inadvertantly effect other elements on your website.

    If you are uncomfortable editing CSS style sheets you may prefer to use a custom CSS plugin like My Custom CSS.

  12. trdgeorge
    Member
    Posted 1 year ago #

    Thank You!
    Downloaded My Custom CSS and worked like a dream.
    Problem resolved instantly!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic