Your SlideShare is downloading. ×
Webforms: Customized, Optimized and Ready for Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webforms: Customized, Optimized and Ready for Mobile

792
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 …

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
792
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web FormsCustomized, Optimized and Ready forMobile
  • 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. What is a web form?Flexible. Simple. Powerful.
  • 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. What is a web form?Flexible.
  • 6. What is a web form?Simple.
  • 7. What is a web form?Powerful.
  • 8. Types of web forms……and how to use them
  • 9. Types of web forms•  Add Contacts•  Subscription Confirmation•  Manage Preferences•  Unsubscribe•  Forward to a Friend•  Thank-You•  Lookup Contacts
  • 10. Customization optionsLet’s make these forms even better!
  • 11. Customizing web forms
  • 12. Customizing web formsCSS Styles
  • 13. Customizing web formsCSS Styles… continued
  • 14. Customizing web formsCSS Styles… continued
  • 15. Customizing web formsEmbedding HTML
  • 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. Customizing web formsAdd new contacts to a unique list
  • 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. Customizing web formsHidden Fields<input type="text" id="field_318860" class="text field"size="35" name="49771[318860]" value="" />
  • 20. Customizing web formsHidden Fields<input type=”hidden" id="field_318860" class="textfield" size="35" name="49771[318860]" value="" />
  • 21. Customizing web formsHidden Fields<input type=”hidden" id="field_318860" class="textfield" size="35" name="49771[318860]"value=”homepage_footer_signup" />
  • 22. Mobile WebformsOptimizations for contact collection on the go!
  • 23. Mobile Web Forms
  • 24. Mobile Web Forms
  • 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. 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. 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. 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. Mobile Webforms
  • 30. Leverage Your Existing FormsAlternative methods for getting your data into Bronto
  • 31. Leverage your existing Forms•  Direct Add feature•  Bronto API
  • 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. Leverage your existing FormsDirect Add – more data•  &list1=listID•  &field1=fieldname,set,value
  • 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. 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. Leverage your existing FormsAPI
  • 37. Leverage your existing Formshttp://community.bronto.com
  • 38. Thank youQuestions?Lucas Weber – Support Services Manager – lucas@bronto.com

×