Navigation

Thursday, July 24, 2014

Upgrading Your Users' Web to Lead Experience

Have you tried using dependent picklists with web-to-lead, but were tragically letdown upon realizing that dependencies aren't spit out standard? Are you confused by the non-form-like format and complete lack of alignment of the output of the web to lead form? Do you need to make fields required, but aren't sure how to require them?

If you've answered "yes" to any of the questions above, I can help!

Tools used: Ajax, JavaScript, HTML, inline CSS (unless you prefer external style sheets)

If you've never used HTML before, I promise it's super fun and quick to get your form input fields to be aligned and look beautiful, and even require the user input data before form submission.

Before we get started, let me just say that I'm pretty sure that you can be a complete n00b with zero HTML experience and still manage to rip and rob this methodology. Don't let lack of experience draw you away from this simple fix.

Okay, enough intro. Let's get to it.

Setup in Salesforce First

First, I've created a lead record type with two custom fields - Favorite Color and Favorite Color Thing. Then, I made Favorite Color the controlling field to Favorite Color Thing.

Important note! Any validation rules that you have setup need to be satisfied by the input you're flowing in via web-to-lead! If they are not satisfied, the lead will not import into your instance of Salesforce correctly. 

Favorite Color (controlling field) choices:
  • Blue
  • Green
  • Orange
  • Pink

Favorite Color Thing Dependent Choices:
  • Blue - Sky, Water, Blueberries
  • Green - Grass, Turtles
  • Orange- Tiger Lilies, Sunsets, Fall Foliage
  • Pink - Sky, Sunsets

I've also set Email to be required on the lead page layout.

Now, I go to Setup > Leads > Web-to-Lead, enable the functionality, click Create Web-to-Lead Form, and add the custom fields to the form.



When I clicked Generate, this is what was spit out by Salesforce. The HTML linked renders the pictured form below. Notice the dependencies I've setup in Salesforce did not come over. Additionally, none of the fields look required (or are required) on this form.





Layout Changes

Let's start with the easy fixes first. To create the aligned, pretty table that you see below, we need to add a table element.


For those who don't need explanations, here are quick steps. 

  1. Setup the Web-to-Lead fields in Salesforce.
  2. Grab the code that Salesforce spits out. 
  3. Encapsulate all of the input fields and field labels in a <table> tag. Read fully commented code here
  4. Add a <tr> tag before the first <label> tag to indicate you are creating a row in the table.
  5. Remove all of the <label> tags. For example, delete <label for "first_name"> and </label>.
  6. Separate the "guts" of the table into columns with <td> tags. For a visual, read fully commented code here
  7. Close the table row with a </tr> tag. For example, your final markup of the first row in the table is  <tr><td>First Name</td><td><input id="first_name" maxlength="40" size="20" type="text"/></td></tr>
  8. Rinse and repeat for all additional fields. 
  9. Close the table tag by adding </table> after the last row. 
  10. Optional: add a line break </br> before the Submit button.


For those who prefer to know more:

If you've ever used Word or Excel, odds are you know what a table looks like. We're using a table to create the view above, only we've set our borders to be hidden. Since we're using elements that are really typical and may be altered by your webmaster's Cascading Style Sheet (CSS) on the webpage you're posting to, you'll want to make sure that any styles are defined in your code unless you want your webmaster to handle font colors and whatnot. For more about CSS and styling HTML, check out w3schools.


Here's what we had before the table tags.


Here's our first row, including the table, tr, and td tags. 

A bit more detailed view of our selections in the table. Notice that our custom selects assign the field id for name and element id. Do not change this. 

When you view your table, it may or may not include the borders. To exclude the borders, modify your beginning <table> tag to be <table border="0">. Alternatively, you can modify the CSS on the page in the head element, then add a class to the table.  

I have uploaded the fully commented basic table code with helpful tips here


Required Fields

For those who prefer steps...
  1. Inside the input tag, add required = "true". For example,
    <input id="email" maxlength="80" name="email" size="20" type="text" required="true"/>
  2. Make the input field look required by adding a label tag and an asterisk to the end of the field name. For example,
    <tr><td>Email<label style="color:red;font-size:15px">*</label></td>

For those who would like to read more...

To make the fields required, we will add additional attributes to the input tags. This required attribute makes the fields required, but they won't look required until we add a required, red asterisk to the code. 


All we've done is found an input tag that we need to require, email, and added required="true" inside the tag. Now that it is required, we'll make it look required, too.

Remember, your webmaster may already have classes to use for forms like this, and this step may require that you speak with your webmaster about their site design. We've added the label tag to the first cell in the row because the font tag is not supported in HTML5 and I am trying to stay away from creating external CSS for sake of condensing this blog post. Most webmasters prefer to maintain external CSS, though, since it is a better way to ensure consistency throughout the domain.

To add the red asterisk to the end of the Email field's label, we added <label style="color:red; font-size:15px:>*</label> before the closing cell tag, </td>. The size does not necessarily need to be adjusted, but 15 pixels looked the best for our layout.


Conditional Picklists

For those who prefer steps:
  1. Add ajax and javascript to your head element. 
  2. Create the arrays for your parent picklist and child picklist values. 
  3. Add the "action" functions for the parent field. 
  4. Add the "action" functions for the child field. 
  5. Add a <div> element before the table.
  6. In the body of the table, modify the picklist for the child field. 
  7. Close the <div> element after the table.
I suggest everyone read the explanation or the fully commented code here


It's time for the fun part. Let's make our Favorite Color Thing picklist conditional, and dependent on Favorite Color. This step requires adding Ajax and JavaScript to our header element and modifying our selections a tiny bit with a div tag. 

First, let's define our relationships again. 

Favorite Color - Favorite Color Thing Dependent Choices:
Blue - Sky, Water, Blueberries
Green - Grass, Turtles
Orange- Tiger Lilies, Sunsets, Fall Foliage
Pink - Sky, Sunsets

Now, we'll add the script and values to the header of our page. We've assigned each "parent" color selection to a variable, and list each "child" favorite color thing to its parent's array.


Notice we assign a display and a value. If you are creating a parent/child selection for country/state fields, note that Salesforce cares about the value you assign for state/province code picklists. For example, you can display "Florida" as a selection, but you need to assign the value to "FL" if your child is the standard state/province code field.

Next, we'll setup the action for these arrays. You can see we call to the Favorite Color field id then assign the variable favorite_color to it, just to make things easier to read. Our JavaScript will run on the id to insert the array values.We set the default below using the Favorite Color Thing field id. Our default option is blank.


We'll add the function that populates the values for the Favorite Color Thing field, depending on the parent Favorite Color that has been selected. We are using the Favorite Color Thing field id here.


Now, we'll update our table by adding a div tag outside of each of the table tags. 



And our last step is adding our updated Favorite Color and our Favorite Color Thing selects. Note, if you are not using dependent picklists, you should have options listed. 



Now, we have a form with required fields and dependent picklists. Our final code is available here

TIP: Before you finalize, test a few times. If you run into errors, uncomment the debug comments. If you have validations on the Lead object, they may negatively impact your creation of new leads. Make sure your required lead fields are included on the Web-to-Lead form - either as hidden inputs or as required fields for the user to complete.




40 comments:

  1. Thank you for taking the time to write this up for us, Shannon! :-)

    ReplyDelete
  2. Followed to the a T, but cannot get my dependent values to appear in my web to lead form. That select statement in the form - shouldn't I be calling one of the variables I created in the javascript? Thanks in advance!

    ReplyDelete
    Replies
    1. Sorry, just seeing this comment! Ah! What browser are you using? Have you enabled the JavaScript? Do you have a link of your template so I can take a look at it?

      Delete
  3. The web to lead form? Do you need to make fields required, but aren't sure how to require them?learn web deisgn

    ReplyDelete
  4. Splendidly imparted. Stunning quality. Worth Reading.
    infographic design

    ReplyDelete
  5. This is genuinely an awesome read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome!
    Web Development

    ReplyDelete
  6. very interesting post.this is my first time visit here.i found so mmany interesting stuff in your blog especially its discussion..thanks for the post!
    software development company in delhi

    ReplyDelete
  7. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. Easy tables

    ReplyDelete
  8. I hope you will share such type of impressive contents again with us so that we can utilize it and get more advantage. long island seo company

    ReplyDelete
  9. Intriguing and stunning how your post is! It Is Useful and supportive for me That I like it in particular, and I am anticipating Hearing from your next..
    local internet marketing company

    ReplyDelete
  10. I am unquestionably making the most of your site. You unquestionably have some extraordinary knowledge and incredible stories. Web design company

    ReplyDelete
  11. Can I just now say such a relief to discover one who truly knows what theyre dealing with on-line. You actually know how to bring a concern to light and earn it important. Lots more people have to look at this and see why side of the story. I cant think youre not more popular because you certainly develop the gift. top web designers in new york

    ReplyDelete
  12. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. lemigliorivpn

    ReplyDelete
  13. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  14. Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. https://webceed.co.uk

    ReplyDelete
  15. On this page you can read my interests, write something special.
    mason soiza

    ReplyDelete
  16. Find the best essays on is my friend's profile page.
    mason soiza

    ReplyDelete
  17. This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..
    Mason Soiza

    ReplyDelete
  18. This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..
    web design singapore

    ReplyDelete
  19. PHP is very well known and recognized programming language for custom website development with its fully functional scripting language. Significantly it can be quickly mixed up into HTML easily. https://www.dbdesigner.net

    ReplyDelete
  20. Programmers or programming developers develop the rationale of programs which a bundle will in the long run use to work. userfeel

    ReplyDelete
  21. A superb web designer ought to be in a position to comprehend the emerging trends in the market, the expected changes in web design, current and future trends as well as the most recent web development tools.reklamos paslaugos

    ReplyDelete
  22. This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. I have been meaning to write something like this on my website and you have given me an idea. Web design dubai

    ReplyDelete
  23. thank you due to the fact you've got been first-class to allocation tell once us. we will continually respect all you have got curtains right here due to the fact I recognize you're each one concerned next to our. Web Design

    ReplyDelete
  24. Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. web design company in dubai

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. Thanks for sharing this information. I really like your blog post very much. aviation website development

    ReplyDelete
  27. Good post but I was wondering if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit further. Appreciate it..! More information

    ReplyDelete
  28. The initial introduction of your organization for a client will presumably be your logo, which they will use to make assumstions about your business. Webdesign Webshop

    ReplyDelete
  29. Webdesign. Sterke groeiambities en hoge ROI verwachtingen? Webdesign bureau Sempris lanceert uw bedrijf digitaal met professioneel en betaalbaar webdesign..Webdesign

    ReplyDelete
  30. Going to graduate school was a positive decision for me. I enjoyed the coursework, the presentations, the fellow students, and the professors. And since my company reimbursed 100% of the tuition, the only cost that I had to pay on my own was for books and supplies. Otherwise, I received a free master’s degree. All that I had to invest was my time. Webdesign

    ReplyDelete
  31. A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a one. Webdesign

    ReplyDelete
  32. I found Hubwit as a transparent s ite, a social hub which is a conglomerate of Buyers and Sellers who are ready to offer online digital consultancy at decent cost. Webdesign

    ReplyDelete
  33. Hello! I just wish to give an enormous thumbs up for the nice info you've got right here on this post. I will probably be coming back to your weblog for more soon! Webdesign

    ReplyDelete
  34. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well.. Webdesign

    ReplyDelete
  35. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well.. Webdesign

    ReplyDelete
  36. On the off chance that I didn't have the cash (which I don't) I would concentrate on structure pertinent connects to my site. I would turn between 10 or so extraordinary grapple messages however I would be overwhelming on my principle 1 or 2 terms. Webdesign

    ReplyDelete
  37. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work. Webdesign bureau

    ReplyDelete
  38. Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? Best Web Design Toronto

    ReplyDelete
  39. Whoi, excellent, t wondered just how to cure icne. ind found your webstte by google, dtscovered todiy t'm i ltttle obvtous i greit deil. t’ve ilso idded RSS ind sive your webstte. keep us updited. web design agency london

    ReplyDelete