Web FormsCustomized, Optimized and Ready forMobile
What is a web form?A look at the different types of web formsWeb form customization optionsOptimizing web forms for mobile...
What is a web form?Flexible. Simple. Powerful.
What is a web form?A web form is an online form used to interact with and gatherinformation from existing and/or soon-to-b...
What is a web form?Flexible.
What is a web form?Simple.
What is a web form?Powerful.
Types of web forms……and how to use them
Types of web forms•  Add Contacts•  Subscription Confirmation•  Manage Preferences•  Unsubscribe•  Forward to a Friend•  T...
Customization optionsLet’s make these forms even better!
Customizing web forms
Customizing web formsCSS Styles
Customizing web formsCSS Styles… continued
Customizing web formsCSS Styles… continued
Customizing web formsEmbedding HTML
Customizing web formsTips, Tricks & Best Practices•  Add new contacts to a unique list•  Use multi-step forms to gather ad...
Customizing web formsAdd new contacts to a unique list
Customizing web formsMulti-step form overviewMethod 1: Send a Welcome / Manage Preferences email•  Works with Bronto hoste...
Customizing web formsHidden Fields<input type="text" id="field_318860" class="text field"size="35" name="49771[318860]" va...
Customizing web formsHidden Fields<input type=”hidden" id="field_318860" class="textfield" size="35" name="49771[318860]" ...
Customizing web formsHidden Fields<input type=”hidden" id="field_318860" class="textfield" size="35" name="49771[318860]"v...
Mobile WebformsOptimizations for contact collection on the go!
Mobile Web Forms
Mobile Web Forms
Mobile WebformsOptimizing for mobile – Embedded Forms•  Create separate forms for desktop and mobile viewing•  Use a meta ...
Mobile WebformsOptimizing for mobile – Separate formsTips for designing your mobile friendly form•  Keep the form short an...
Mobile WebformsOptimizing for mobile – Separate forms<script type="text/javascript"><!--if (screen.width <= 640) {window.l...
Mobile Webforms•  <meta name="viewport" content="initial-scale=1, user-scalable=no"/>•  @media screen and (max-width:640px...
Mobile Webforms
Leverage Your Existing FormsAlternative methods for getting your data into Bronto
Leverage your existing Forms•  Direct Add feature•  Bronto API
Leverage your existing FormsDirect Add<img src="http://app.bronto.com/public/?q=direct_add&fn=Public_DirectAddForm&id=ascg...
Leverage your existing FormsDirect Add – more data•  &list1=listID•  &field1=fieldname,set,value
Leverage your existing FormsDirect Add – more data•  &list1=0bc403ec0000000000000000000000051d6c•  &field1=fname,set,Lucas...
Leverage your existing FormsDirect Add – more data<img src="http://app.bronto.com/public/?q=direct_add&fn=Public_DirectAdd...
Leverage your existing FormsAPI
Leverage your existing Formshttp://community.bronto.com
Thank youQuestions?Lucas Weber – Support Services Manager – lucas@bronto.com
Webforms: Customized, Optimized and Ready for Mobile
Upcoming SlideShare
Loading in …5
×

Webforms: Customized, Optimized and Ready for Mobile

1,514 views

Published on

This presentation will provide attendees with an in-depth look at Bronto’s webforms and their many features. We’ll cover the basics of understanding what a webform is, how to build a webform using Bronto’s simple drag and drop editor, various options for using webforms on your website, tips and tricks and some advanced customization techniques. Additionally, information on mobile compatibility and rendering will be included. Finally, we’ll cover the use of Bronto’s Direct Add feature that allows clients to use existing signup forms on their site to push information into their Bronto account.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,514
On SlideShare
0
From Embeds
0
Number of Embeds
452
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webforms: Customized, Optimized and Ready for Mobile

  1. 1. Web FormsCustomized, Optimized and Ready forMobile
  2. 2. What is a web form?A look at the different types of web formsWeb form customization optionsOptimizing web forms for mobileLeveraging your existing signup formsQ&ALucas WeberSupport Services Managerlucas@bronto.comSpeaker InfoAgenda
  3. 3. What is a web form?Flexible. Simple. Powerful.
  4. 4. What is a web form?A web form is an online form used to interact with and gatherinformation from existing and/or soon-to-be contacts.
  5. 5. What is a web form?Flexible.
  6. 6. What is a web form?Simple.
  7. 7. What is a web form?Powerful.
  8. 8. Types of web forms……and how to use them
  9. 9. Types of web forms•  Add Contacts•  Subscription Confirmation•  Manage Preferences•  Unsubscribe•  Forward to a Friend•  Thank-You•  Lookup Contacts
  10. 10. Customization optionsLet’s make these forms even better!
  11. 11. Customizing web forms
  12. 12. Customizing web formsCSS Styles
  13. 13. Customizing web formsCSS Styles… continued
  14. 14. Customizing web formsCSS Styles… continued
  15. 15. Customizing web formsEmbedding HTML
  16. 16. Customizing web formsTips, Tricks & Best Practices•  Add new contacts to a unique list•  Use multi-step forms to gather additional data•  Use hidden fields to pass additional info on contacts
  17. 17. Customizing web formsAdd new contacts to a unique list
  18. 18. Customizing web formsMulti-step form overviewMethod 1: Send a Welcome / Manage Preferences email•  Works with Bronto hosted or embedded forms•  Requires an additional click-through to gather additional info•  No additional development required!Method 2: Thank You page as second form•  Works best with embedded forms•  Can require additional client side development to be effective•  No additional waiting for a welcome email or additional click required
  19. 19. Customizing web formsHidden Fields<input type="text" id="field_318860" class="text field"size="35" name="49771[318860]" value="" />
  20. 20. Customizing web formsHidden Fields<input type=”hidden" id="field_318860" class="textfield" size="35" name="49771[318860]" value="" />
  21. 21. Customizing web formsHidden Fields<input type=”hidden" id="field_318860" class="textfield" size="35" name="49771[318860]"value=”homepage_footer_signup" />
  22. 22. Mobile WebformsOptimizations for contact collection on the go!
  23. 23. Mobile Web Forms
  24. 24. Mobile Web Forms
  25. 25. Mobile WebformsOptimizing for mobile – Embedded Forms•  Create separate forms for desktop and mobile viewing•  Use a meta tag and CSS to determine form layout
  26. 26. Mobile WebformsOptimizing for mobile – Separate formsTips for designing your mobile friendly form•  Keep the form short and to the point•  Keep content above the fold•  Minimize intro text•  Position field labels above field inputs
  27. 27. Mobile WebformsOptimizing for mobile – Separate forms<script type="text/javascript"><!--if (screen.width <= 640) {window.location = "http://hosting-source.bm23.com/21234/public/mobileform1.html";}//--></script>
  28. 28. Mobile Webforms•  <meta name="viewport" content="initial-scale=1, user-scalable=no"/>•  @media screen and (max-width:640px) {.container { width: 280px !important; }}Optimizing for mobile - CSS
  29. 29. Mobile Webforms
  30. 30. Leverage Your Existing FormsAlternative methods for getting your data into Bronto
  31. 31. Leverage your existing Forms•  Direct Add feature•  Bronto API
  32. 32. Leverage your existing FormsDirect Add<img src="http://app.bronto.com/public/?q=direct_add&fn=Public_DirectAddForm&id=ascghwaxypuybqzpzfgxyrjhnjxkblp&email=example@example.com" width="0” height="0" border="0”alt=""/>
  33. 33. Leverage your existing FormsDirect Add – more data•  &list1=listID•  &field1=fieldname,set,value
  34. 34. Leverage your existing FormsDirect Add – more data•  &list1=0bc403ec0000000000000000000000051d6c•  &field1=fname,set,Lucas&list1=0bc403ec0000000000000000000000051d6c&field1=fname,set,Lucas•  Each Direct Add snippet can contain up to 10 field andlist parameters•  Separated by ‘&’•  Parameter labels are field1, field2, field3, etc.
  35. 35. Leverage your existing FormsDirect Add – more data<img src="http://app.bronto.com/public/?q=direct_add&fn=Public_DirectAddForm&id=ascghwaxypuybqzpzfgxyrjhnjxkblp&email=lucas@bronto.com&list1=0bc403ec0000000000000000000000051d6c&field1=fname,set,Lucas&field2=lname,set,Weber&field3=DOB,set,12/05/1980" width="0"height="0" border="0" alt=""/>
  36. 36. Leverage your existing FormsAPI
  37. 37. Leverage your existing Formshttp://community.bronto.com
  38. 38. Thank youQuestions?Lucas Weber – Support Services Manager – lucas@bronto.com

×