Announcement

Collapse
No announcement yet.

Customers Enter Wrong Email Addresses At Signup and Checkout

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Customers Enter Wrong Email Addresses At Signup and Checkout

    Just had another fiasco with a customer having typed in his email address wrong when placing an order, the order confirm went to the person whose address was typed in (wrong by a couple of characters), p*ssed off THAT person who didn't know what was going on so we got nasty emails and phonecalls from someone who thought we were scamming him and we ended up cancelling a valid order for a customer due to a simple typo.

    THIS IS RIDICULOUS. We've been saying that we need a 2nd field to confirm email address entry on the account sign up and checkout pages since the day we started with 3dCart nearly 5 years ago. Other people have complained here in the forum about it again and again and again to no avail. And the "User Voice" feature request system is and has been a complete waste of time and isn't even taking new suggestions.

    So, if you as a 3dCart user are tired of your customers entering wrong email addresses, which means they don't get order confirmations, they don't get tracking information, they don't get follow up emails, they don't get your newsletters, etc, all of which contributes to confused customers and unnecessary customer service contacts...

    PLEASE ADD YOUR VOICE HERE - Make yourself heard here and submit a ticket to request it be added.

    This is not rocket science. It's a simple check field that would eliminate hours of unnecessary customer problems.

    There is no reason 3dCart can't do something this simple that is on EVERY SINGLE OTHER website I've ever signed up for anything on or bought anything from.

    Come on 3dCart, please make this much needed correction to your system to make what we have actually work properly before adding even more extraneous "features" that no one is asking for.

  • #2
    Seems like a relatively simple change that really would alleviate problems before they happen. I vote "yes"!
    Joanne Barker
    VS Web Design
    [email protected]

    Comment


    • #3
      this is easy code to add. link me your page and tell me how you want the validator to behave (i.e. disable the proceed button until all items are valid, pop up a warning etc) and i'll paste the code here.

      Comment


      • #4
        So, what happens when the user that made a typo on their email copies/pastes their email into the second box?
        ----------------------------
        Gonzalo Gil
        3dCart Support
        800-828-6650 x111

        Comment


        • #5
          its impossible to idiot proof an email, but the double check would filter out some mistakes. its a valid request, there should be a confirmation. Adding one, however, is not difficult and can be done as needed, like I am offering to do for the op.

          Mr Gil, good to see you getting involved in the forums. Hope to see that screen name show up more often.

          Comment


          • #6
            I seen on many websites that the validator field disables the ability to paste. So even if the user copies their email address from the first field, when they try and paste it into the second field, it just won't paste and therefore forces them to actually type their email address a second time.

            Originally posted by GonzaloGil View Post
            So, what happens when the user that made a typo on their email copies/pastes their email into the second box?

            Comment


            • #7
              Hi there! Thanks, that would be awesome!

              We just use the standard single page checkout template with some minor "cosmetic" changes. I'll PM you the website.

              Ideally, we'd like the validator field to disable the ability to paste anything into it so that user's can't just cut/paste their email address. However, just the fact that the field is there will help a LOT as it makes customers pay more attention.

              If it could pop up with a warning that the email addresses do not match, and not allow the user to proceed until the error has been fixed. (ie. they can click on Checkout, however the page does not proceed and displays the error message about the email addresses not matching).

              Originally posted by jleclair View Post
              this is easy code to add. link me your page and tell me how you want the validator to behave (i.e. disable the proceed button until all items are valid, pop up a warning etc) and i'll paste the code here.

              Comment


              • #8
                Count me in on this should be built in. I have only been a customer of 3dcarts since 01/01/13 but have already had 15 orders where the email is incorrect.

                Comment


                • #9
                  This happens to us all the time! We too asked (years ago) to have this implemented. Count my vote for email verification without cut/paste function!

                  Comment


                  • #10
                    ok sounds like theres a bit of interest on this. ill post some code and steps later when i have some free time.

                    Comment


                    • #11
                      Thanks, sir! :-) I still hope that it becomes part of the standard offering instead of everyone having to add it piecemeal.
                      Joanne Barker
                      VS Web Design
                      [email protected]

                      Comment


                      • #12
                        Add my vote here too. We get too many typos in e-mail address then we get screamed at by these same customers none the less for not sending them order confirmations and tracking numbers.

                        Little things like this make all the difference.

                        jleclair, thanks for volunteering to take this on.

                        Comment


                        • #13
                          The Tut

                          For some of you who aren't html/javascript savvy, I'm going to do my very best to break down what each code change is doing and why. I hope you all will learn something from this.

                          I have tested this on my nano site and can confirm it is working as designed. If you would like a more robust behavior when the email does not match, you may want to seek someone to help you tailor to your needs.

                          You can test it for yourself here. Add a test item to the cart and proceed to checkout.

                          With that said, lets get into it. I am going to assume the following:
                          -You are using one page checkout
                          -It's default code at the HTML level (appearance can vary, but your elements are essentially the same as what is in the common/checkout-singlepage.html file)

                          The first thing we will need to do is.. add another box to confirm the email with. Make sure you are in the appropriate folder for the template you are using and edit your checkout-singlepage.html file.

                          Found it? Great.

                          Navigate your way through the file until you find the input with an ID of "billing_email" (if you are using a text editor, it is around line 894 or so.. cmd+f or ctrl+f should still be able to locate it in either your browser or text editor.. use it.. love it)

                          Once you've found the input, we essentially want to duplicate MOST of it. some of the onFocus, onBlur, onChange function's aren't necessary. I'm displaying the surrounding code for context, and i've commented in the code I'm adding.

                          Code:
                                                      <tr>
                                                        <td align="right" class="item"><b>[CustomerInfo_email]</td>
                                                        <td nowrap><input name="billing_email" type="text" id="billing_email" maxlength="40" onBlur="fillEmailDiv();" onKeyUp="fillEmailDiv();" onChange="clearContent(this);fillEmailDiv();updateOrderEmail();" value="[email]" size="25" class="txtBoxStyle">
                                                          
                                                          <!--START: emailrequired--> 
                                                          <!--START: req_email--> 
                                                          <img src="assets/templates/common/images/error2.gif" width="12" height="12"> 
                                                          <!--END: req_email--> 
                                                          <!--END: emailrequired--></td>
                                                      </tr>
                          
                                          <!--insert changes-->
                                                      <tr>
                                                      	<td align="right" class="item"><b>Confirm Email</b></td>
                                                      	<td nowrap><input name="billing_email_confirm" type="text" id="billing_email_confirm" maxlength="40" size="25" class="txtBoxStyle">
                                                      	<img src="assets/templates/common/images/error2.gif" width="12" height="12"> 
                                                      </tr>
                                          <!-- end insert changes-->
                                                  
                                                      <tr>
                                                        <td align="right" class="item"><input type="checkbox" value="1" name="maillist" [maillist] id="Checkbox1"></td>
                                                        <td class="item">[checkout1_joinmailinglist]</td>
                                                      </tr>
                                                    </table>
                          If you want to get fancy, you can mess with the onBlur and clearing the boxes back out, but it's really not necessary unless you desire that higher level of code. Your website won't explode if it's not there. I promise.

                          "So what did that just do?" I'm glad you asked. We simply added another box right below the email field. Giving it a similar, but different ID gives us a unique way to reference what text is in the box. This is important for validation later. I also added the red asterisk image to the right of the box so the users understand they MUST use this field or they will be shot on sight.. ok it's just not going to let them through.

                          Now that the input box is created, there's another html change we must do in preparation.

                          Navigate your way to the input button named B1. Searching for B1 will only return 1 result in the entire document, so its a safe string to run a find operation from.

                          Once you locate the input, you'll see the following:

                          Code:
                          <input type="button" value="[checkout3_submitbutton]" name="B1" class="btn" onClick="doCheckout(this.form);"/>
                          change it to this:

                          Code:
                          <input type="button" value="[checkout3_submitbutton]" name="B1" class="btn" onClick="checkEmail(this.form);"/>
                          "Will this break my code if I replace this very important function?" No. You aren't replacing it. We are just adding a detour. Trust me.

                          Now, scroll down your page till you find the first opening <script> tag. You can essentially put this next part of the code anywhere within the script blocks, just make sure its AFTER YOUR HTML. <-- I yell because that part is important. If the inputs aren't brought in first, they technically wont exist to the script code.

                          The script you'll want to enter is this:

                          Code:
                            	function checkEmail(objForm){
                            		var mainVal = jQuery('#billing_email').val();
                            		var confirmVal = jQuery('#billing_email_confirm').val();
                            		if(mainVal == confirmVal){
                            			//allow the old function to proceed as normal
                            			doCheckout(objForm);
                            		}else{
                            			alert('Your email addresses did not match, please check them and try again');
                            		}
                            	}
                          Remember that function we added to the button? Here is where we define what it does. The text within the parens, objForm, doesn't concern us.. so I won't go in depth on why it's there. Just know it needs to be there, because we are passing it through to doCheckout, which is expecting that information.

                          So mainVal and confirmVal are defined to cache references to each input's text values (thats what .val() is in jQuery) before we operate on it. Best practice rocks.

                          Now all the if statement is doing is checking to see if one matches the next - thats what the double == sign is for. If they do match, it just passes through the same function that existed before - doCheckout(); <-- theres your detour.

                          If the values don't match the screen will throw an alert box (or popup message) that tells the user to check their email addresses. If you prefer some other kind of behavior here, this is where you would put it. Consult your friendly neighborhood coder if you want to get fancy and don't know how to do it yourself.

                          Last but not least. You guys wanted to disable copy pasting between the fields. It cant be done! (hah.. just kidding)

                          Add this code to do just that:
                          Code:
                            	jQuery(document).ready(function(){
                            		jQuery('#billing_email_confirm').bind("cut copy paste", function(e){
                            			e.preventDefault();
                            		});
                            	});
                          Without using too much technical jargon, the function will only fire once the document (or page) is completely loaded. It will watch for any of the operations of cut copy or paste and stop them from doing their default behavior. As a result a paste will do nothing to the field we just added, forcing the user to type in what they want.



                          That about does it for now. If anyone has any questions, please feel free to reach me here or by pm anytime. I'm here to help. Thanks for dealing with my rambling.
                          Last edited by jleclair; 01-19-2013, 07:51 AM.

                          Comment


                          • #14
                            We also requested this over two years ago.
                            http://www.pack-secure.com

                            Packaging and Shipping Supply Specialists

                            Comment


                            • #15
                              Originally posted by GonzaloGil View Post
                              So, what happens when the user that made a typo on their email copies/pastes their email into the second box?
                              Not the type of response I would expect from the head of a company in the business of providing an ecommerce platform. I will chalk it up to you having a bad day.

                              As I am sure you are well aware, many ecommerce platforms and common websites have this feature.

                              And no, you can't prevent people from making mistakes in the first email.
                              However, you can write code to prevent copying the email address into the second email box.

                              Validation of the second email address entry to match the first, as well as validating that it contains an @ symbol, are not difficult to implement for a software platform such as yours.

                              If written correctly it can also be used in the contact page email field as well.

                              Comment

                              Working...
                              X