Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
Like Tree1Likes

Thread: How to change pre-loaded field text in contact form?

  1. #1
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times

    How to change pre-loaded field text in contact form?

    Hi,

    I am working with a contact form with three input fields where I'd like to swap out the pre-loaded words "name", "email" and "message" for ascii symbols smilie face, the @ symbol and the writing symbol respectively...or in code:

    Code:
    ☺ @ ✍

    The contact form code is here:

    Code:
    <!--Contact Form-->
                         <form id="contact" method="post" action="mail.php">
                             <input type="text" id="name" name="name" value="name" />
                          <input type="text" id="email" name="email" value="email" /><br /><br />
                          <textarea id="message" name="message" rows="" cols="">message</textarea>
                          <input type="image" id="submit" src="http://www.webdesignforums.net/forum/images/sendButtonDis.png" disabled="disabled" />
                      </form>

    The mail.php code is here:

    Code:
    <?php
    
    $EmailFrom = "anyemail@anydomain.com"; // 'From' Email
    $EmailTo = "youremail@yourdomain.com"; // Your Email (Where the Messages Are Sent)
    $Subject = "Message From Your Site"; // Email Subject Title
    $Name = Trim(stripslashes($_POST['name'])); 
    $Email = Trim(stripslashes($_POST['email'])); 
    $Message = Trim(stripslashes($_POST['message'])); 
    
    // Validation
    $validationOK=true;
    if (!$validationOK) {
      exit;
    }
    
    // Setup the Body of the Email
    $Body = "";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= $Message;
    $Body .= "\n";
    
    // Send Email 
    $success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
    ?>
    I would like to just replace the words in each field with the corresponding symbol and still have the contact form retain all the functions it has with the words. I've a number of different combinations but I'm not sure exactly how to edit the mail.php file. I can get the symbols to show up in the boxes but I can't get them to disappear onclick like the text does. Also there are two ways to paste them into the code, with the ascii code or the symbol itself. Can this be done or will it not work with symbols? Does anyone know what I have to change to get the symbols to disappear onclick?


    Thanks.
    Last edited by duck444; Apr 30th, 2014 at 10:16 AM.

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    First of all, you should NOT be hotlinking to this forum for a button image.
    <input type="image" id="submit" src="http://www.webdesignforums.net/forum/images/sendButtonDis.png" disabled="disabled" />
    As for your question, to change the values of the fields in the form, you shouldn't have to edit the mail.php code at all.

    Just change the form.
    <input type="text" id="name" name="name" value=":)" />
    Where this is ahowing the smiley face, I used the code for special characters - & # 58 ;& # 41 ; written including the semicolons and without the spaces.
    That should give you the smiley face, but I'm not 100% certain that the special characters will work in a textarea field, you may have to escape them ( and you can Google how to do that).
    If it does, just Google "special characters in HTML" and find the codes you need.
    Last edited by AlphaMare; Apr 30th, 2014 at 11:01 AM.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by AlphaMare View Post
    First of all, you should NOT be hotlinking to this forum for a button image.
    Sorry. I didn't realize that presents problems.

    Quote Originally Posted by AlphaMare View Post
    As for your question, to change the values of the fields in the form, you shouldn't have to edit the mail.php code at all.

    Just change the form.
    Where this is ahowing the smiley face, I used the code for special characters - & # 58 ;& # 41 ; written including the semicolons and without the spaces.
    That should give you the smiley face, but I'm not 100% certain that the special characters will work in a textarea field, you may have to escape them ( and you can Google how to do that).
    If it does, just Google "special characters in HTML" and find the codes you need.
    Those codes for the special characters you gave me didn't appear in the text field. Though, I have had success using getting the characters to appear, they don't disappear when I click in the text box like the word do. Thanks.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    I don't think he meant to do that, Mare. I think that's a vBulletin "feature". I've seen that happen with other people before. It's also inside of code, so all the code within is preformatted text and therefore nothing's hyperlinked.

    The disappearing of text in a default form field is accomplished using Javascript. You basically check for a default form value on focus and if it's there, you wipe it out.

    http://css-tricks.com/snippets/javas...ield-on-focus/ <-- here's the technique explained, although I personally prefer to put it inside of a function and call the function so I can use it in multiple spots.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Whoops...I didn't realize there is another file that works the contact form...a javascript file...I never edited javascript before but I'm going in....any tips would be appreciated...

    Code:
        
        // Handles Contact Form Behavior    
        $("#name").focus(function(){
            $("#name").css({"background-color":"#FFFFFF"});
            if ($("#name").val()=="name"){
                $("#name").val("");
                $("#name").css({"color":"#444444"});
            };
        });
        $("#name").blur(function(){
            if ($("#name").val()==""){
                $("#name").val("name");
                $("#name").css({"color":"#888888"});
                $("#name").css({"background-color":"#ffdddd"});
            };
        });
        $("#email").focus(function(){
            $("#email").css({"background-color":"#FFFFFF"});
            if ($("#email").val()=="email"){
                $("#email").val("");
                $("#email").css({"color":"#444444"});
            };
        });
        $("#email").blur(function(){
            if ($("#email").val()==""){
                $("#email").val("email");
                $("#email").css({"color":"#888888"});
                $("#email").css({"background-color":"#ffdddd"});
            };
            if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
                $("#email").css({"background-color":"#ffdddd"});
            };
        });
        $("#message").focus(function(){
            $("#message").css({"background-color":"#FFFFFF"});
            if ($("#message").val()=="message"){
                $("#message").val("");
                $("#message").css({"color":"#444444"});
            };
        });
        $("#message").blur(function(){
            if ($("#message").val()==""){
                $("#message").val("message");
                $("#message").css({"color":"#888888"});
                $("#message").css({"background-color":"#ffdddd"});
            };
        });
        $("#submit").mousedown(function(){
            $("#submit").attr({"src":"http://www.webdesignforums.net/forum/images/sendButtonSel.png"});
        });
        $("#submit").mouseup(function(){
            $("#submit").attr({"src":"http://www.webdesignforums.net/forum/images/sendButton.png"});    
        });
        $("#submit").mouseout(function(){
            $("#submit").attr({"src":"http://www.webdesignforums.net/forum/images/sendButton.png"});                                
        });
        $("#name,#email,#message").keyup(function(){
            if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
                EnableSubmitButton();
            } else {
                DisableSubmitButton();
            };
        });
        $("#submit").click(function(){
            DisableSubmitButton();
            var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
            $.ajax({  
                type: "POST",  
                url: "mail.php",  
                data: dataString,  
                success: function() {  
                    ResetForm();
                    $("#successMessage").fadeIn(10);
                    setTimeout('$("#successMessage").fadeOut(1000);',2000);
                }
            });
            return false; 
        });
    
    });
    
    function EnableSubmitButton(){
        $("#submit").attr({"disabled":""});
        $("#submit").attr({"src":"http://www.webdesignforums.net/forum/images/sendButton.png"});
    };
    
    function DisableSubmitButton(){
        $("#submit").attr({"disabled":"disabled"});
        $("#submit").attr({"src":"http://www.webdesignforums.net/forum/images/sendButtonDis.png"});
    };
    
    function ResetForm(){
        DisableSubmitButton();
        $("#name, #email, #message").css({"background-color":"#FFFFFF"});
        $("#name, #email, #message").css({"color":"#888888"});
        $("#name").val("name");
        $("#email").val("email");
        $("#message").val("message");
    };
    
    function ShowPanel(panel){
        currentPanel=panel;
        SelectButton(panel);
        $(".content").fadeOut(250);
            switch(panel){
                case "none":
                    $("#contentPanelWrapper").animate({"left":"100%"},500);
                    $("#arrow").fadeOut(50)
                break;
                case "about":
                    $("#contentPanelWrapper").animate({"left":"100%"},500,function(){
                        $("#aboutContent").show();
                        $("#contentPanelWrapper").animate({"left":"44%"},500);
                    });
                    $("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
                break;
                case "portfolio":
                    $("#contentPanelWrapper").animate({"left":"100%"},500,function(){
                        $("#portfolioContent").show();
                        $("#contentPanelWrapper").animate({"left":"44%"},500);
                    });
                    $("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
                break;
                case "services":
                    $("#contentPanelWrapper").animate({"left":"100%"},500,function(){
                        $("#servicesContent").show();
                        $("#contentPanelWrapper").animate({"left":"44%"},500);
                    });
                    $("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
                break;
                case "contact":
                    $("#contentPanelWrapper").animate({"left":"100%"},500,function(){
                        $("#contactContent").show();
                        $("#contentPanelWrapper").animate({"left":"44%"},500);
                    });
                    $("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
                break;
            };
    };
    
    function SelectButton(button){
        if (currentPanel!="about"){
            $("#aboutCaption").animate({"left":50},{queue:false, duration:250});
            $("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
            $("#aboutButton").css({"background-position":"0px 0px"});
        };
        if (currentPanel!="portfolio"){
            $("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
            $("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
            $("#portfolioButton").css({"background-position":"0px -64px"});
        };
        if (currentPanel!="services"){
            $("#servicesCaption").animate({"left":50},{queue:false, duration:250});
            $("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
            $("#servicesButton").css({"background-position":"0px -128px"});
        };
        if (currentPanel!="contact"){
            $("#contactCaption").animate({"left":50},{queue:false, duration:250});
            $("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
            $("#contactButton").css({"background-position":"0px -192px"});
        };
        switch(button){
            case "none":
            break;
            case "about":
                $("#aboutCaption").animate({"left":70},{queue:false, duration:250});
                $("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
                $("#aboutButton").css({"background-position":"65px 0px"});
            break;
            case "portfolio":
                $("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
                $("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
                $("#portfolioButton").css({"background-position":"65px -64px"});
            break;
            case "services":
                $("#servicesCaption").animate({"left":70},{queue:false, duration:250});
                $("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
                $("#servicesButton").css({"background-position":"65px -128px"});
            break;
            case "contact":
                $("#contactCaption").animate({"left":70},{queue:false, duration:250});
                $("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
                $("#contactButton").css({"background-position":"65px -192px"});
            break;
        };
    
    };

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Looks like everything's written for you on the surface.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    I did it! I can't believe I did it. I made all the characters appear and disappear onclick in their respective text fields. I tested it and it sent the email...However, the name field in the email was blank and also when I send the email from the contact form the form repopulates the fields with the old text of "name", "email" and "message"...and also the character in the message field is smaller than the two characters in the other two fields for some unknown reason..

    I sense I just have a little more to go to make it fully functional...to get there, any tips will be appreciated...Thanks.
    Last edited by duck444; May 02nd, 2014 at 09:04 AM.

  9. #8
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Okay, I fixed the repopulation problem...now I just have the blank name and the smaller message field character to contend with...come on almost there!

  10. #9
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Okay, I fixed the blank name issue...now all I have left to deal with is the small character font in the message box...all three box text sizes seem to be controlled under a single element in the css...only, for some odd reason, the character in the message text field is way smaller than the other characters in the other fields.

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    duck444 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com