[Plugin: Contact Form 7] Automatically highlight text in text boxes when it gets the focus?

  • Hey there,

    I want to have it so when a user clicks on or tabs to a text box, the default text in there is automatically highlighted, so it will be easy for them just to type instead of having to erase the default text themselves.

    Example: Phone number text field contains “(xxx)xxx-xxxx” by default. When the user wants to enter their phone number, they have to manually highlight the default text or delete it with the keyboard. I would like the text to automatically highlight, so all they have to do is begin typing their phone number.

    Is there a way to do this from within Contact Form 7? If not, what Javascript code do I need to type and where do I type it? Please be elaborate, since I know very little about coding!

    Much appreciated!

    Cheers,
    A

Viewing 4 replies - 1 through 4 (of 4 total)

  • Pretty easy,

    Here are the steps:

    1. You should have your form designed as a basic HTML page. what I mean by basic, is that it should have the following tags in it before you attempt to design your form, or even easier, you should place a <body> at the top of your form code and a </body> at the end.

    So this is what you should have before we proceed to the next stage:

    <html>
<head>
</head>
<body>
HERE'S WHERE ALL YOUR FORM CODE SHOULD BE PLACED
</body>
</html>

    You’ll notice, for each HTML tag you open, you must close it after the tag’s contents.
    You’ll also notice that all your form code should be placed between <body> and </body>.

    2. Now for the highlighting part of the form fields, we’re going to use CSS to do the trick:

    Place the following code in between you <head> and </head> tags:

    <style type="text/css">
<!--
textarea:focus, input:focus {
            background-color: #edfbff;
      }
-->

    After you’ve done this, your HTML should look like this:

    <html>
<head>
<style type="text/css">
<!--
textarea:focus, input:focus {
background-color: #edfbff;
      }
-->
</style>
</head>
<body>
HERE'S WHERE ALL YOUR FORM CODE SHOULD BE PLACED
</body>
</html>

    You might like to change the highlight color of your form fields. For this, you should just insert the HEX code for your desired color in the CSS tag background-color.

    To make your life easier, here are a few color codes which look nice and don’t hurt the eyes when viewed on screen:

    Mild Blue: #edfbff
    Mild Pink: #ffedf2
    Mild Custard Cream: #feffe1
    Mild Green: #e4ffda

    As a rule of thumb, you should always use mild colors for form field content to stand out.

    For example, if you’d like to change the default Mild Blue to Mile Green, simply replace #edfbff in front of the CSS tag background-color to #e4ffda.

    Never omit this fellow ;
    because all CSS tags must end with ; in order to work.

    Hope this works. Should be a piece of cake with all these examples and tips.

    Cheers,

    Mohammad

    Seems like I misinterpreted your request,

    What you’re looking for is to highlight the text, not the form field.

    I’m not sure how to do the last part, but:

    In order to make CF7 run JavaScript code, you will need to insert this code in your WordPress wp-config.php file: (default location is in your site’s root directory)

    define('WPCF7_AUTOP', false);

    Having done that, you go to your form design page and having the above HTML code layout, insert the following code in between <head> and </head> either after the </style> tag or before <style>, but not in between them.

    <script language="JavaScript">
function highlight(field) {
       field.focus();
       field.select();
}</script>

    Now this is the tricky part which I don’t have an idea about where you put the last code, but maybe the plugin developer can help us out with this.
    For each field that you want to select all the text in when clicked, add this ‘onClick’ action:

    <input type="text" name="phone-number" size="30" value="+12345789613" onClick='highlight(this);'>

    Thread Starter arthurgcom

    (@arthurgcom)

    Hey thanks so much for the elaborate response – I really appreciate your help. I’m going to give this a shot!

    Cheers…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: Contact Form 7] Automatically highlight text in text boxes when it gets the focus?’ is closed to new replies.