Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Styling Sitecore’s         Web Forms for Marketers                             A step-by-step guide© COPYRIGHT   2012 OSHY...
Styling Sitecore’s Web Forms for MarketersThe Sitecore’s Web Forms for Marketers module isdesigned to create simple forms ...
Create a Contact Us formThe Web Forms for Marketers module defines formsusing items that are stored in the appropriate fol...
Create a Contact Us form1. To create a new web   form, go to   /sitecore/system/Modules   /Web Forms for Marketers   right...
› To edit the success message or to redirect to  another page in form success, click in Success Mode› Click “Show Message”...
Now, click on “Form Designer” to edit or add the fields.    © COPYRIGHT   2012 OSHYN INCORPORATED                  6
Once we click on the Form Designer, we will see adifferent screen:To add a field, we have to click on “Add a field”   © CO...
› We will add the following fields:   › “Name” title to “Single Line Text” type.   › “Email” title to “Email” type.   › “Y...
Once the fields are ready, we have to set up the actions for the“Submit” button; every form has a Submit button and you ca...
How to style the fieldsIn the Form Designer, you can use CSS Class propertythat is available for all fields.   © COPYRIGHT...
How to extend or add new CSS classes to the list:1. Add definition of the CSS class to the site .css class file.2. Create ...
After we’ve created a new style, we canassign it to the fields:© COPYRIGHT   2012 OSHYN INCORPORATED     12
Key Points› The Web Form for Marketers module is a great  module, easy to use to create web forms with a  variety of setti...
Learn more about                            Oshyn’s Sitecore work at:                            www.oshyn.com/sitecore© C...
Upcoming SlideShare
Loading in …5
×

Styling Sitecore's Web Forms for Marketers

5,589 views

Published on

This step-by-step guide (with screenshots) shows you how to style Web Forms for Marketers within your Sitecore site.

Published in: Technology, Design
  • Be the first to comment

Styling Sitecore's Web Forms for Marketers

  1. 1. Styling Sitecore’s Web Forms for Marketers A step-by-step guide© COPYRIGHT 2012 OSHYN INCORPORATED 1
  2. 2. Styling Sitecore’s Web Forms for MarketersThe Sitecore’s Web Forms for Marketers module isdesigned to create simple forms in a user-friendlymanner. It provides users with web analytics andreporting capabilities. It also records and reports userinformation provided in forms, in both failure andsuccess scenarios.Here, I’ll show you how to create a simple ContactWeb Form as well as how to create and assign stylesto it using Sitecores Web Forms for Marketers. © COPYRIGHT 2012 OSHYN INCORPORATED 2
  3. 3. Create a Contact Us formThe Web Forms for Marketers module defines formsusing items that are stored in the appropriate foldersunder /sitecore/system/Modules/Web Forms forMarketers.Each form is based on the /sitecore/templates/WebForms for Marketers/Form template and can containany number of sections or fields © COPYRIGHT 2012 OSHYN INCORPORATED 3
  4. 4. Create a Contact Us form1. To create a new web form, go to /sitecore/system/Modules /Web Forms for Marketers right click and select Insert > Form2. Enter the name “Contact Us Form”Once the form is created, wecan edit the options in theContent tab. © COPYRIGHT 2012 OSHYN INCORPORATED 4
  5. 5. › To edit the success message or to redirect to another page in form success, click in Success Mode› Click “Show Message” and edit “Success Message” © COPYRIGHT 2012 OSHYN INCORPORATED 5
  6. 6. Now, click on “Form Designer” to edit or add the fields. © COPYRIGHT 2012 OSHYN INCORPORATED 6
  7. 7. Once we click on the Form Designer, we will see adifferent screen:To add a field, we have to click on “Add a field” © COPYRIGHT 2012 OSHYN INCORPORATED 7
  8. 8. › We will add the following fields: › “Name” title to “Single Line Text” type. › “Email” title to “Email” type. › “Your Message” title to “Multiple Line Text” type. © COPYRIGHT 2012 OSHYN INCORPORATED 8
  9. 9. Once the fields are ready, we have to set up the actions for the“Submit” button; every form has a Submit button and you canassociate actions with this button. Actions are executed on theserver. To set up the actions, first select the Submit button. You willsee the options to edit the actions on the left side. © COPYRIGHT 2012 OSHYN INCORPORATED 9
  10. 10. How to style the fieldsIn the Form Designer, you can use CSS Class propertythat is available for all fields. © COPYRIGHT 2012 OSHYN INCORPORATED 10
  11. 11. How to extend or add new CSS classes to the list:1. Add definition of the CSS class to the site .css class file.2. Create a classes folder new item under the /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes using the /sitecore/templates/Web Forms for Marketers/Meta Data/Extended List Item template.3. Add the name of your CSS class to the “Value” field of the created item. © COPYRIGHT 2012 OSHYN INCORPORATED 11
  12. 12. After we’ve created a new style, we canassign it to the fields:© COPYRIGHT 2012 OSHYN INCORPORATED 12
  13. 13. Key Points› The Web Form for Marketers module is a great module, easy to use to create web forms with a variety of settings› The markup that the module generates is complex and difficult for a front-end developer to configure starting from a prototype, I recommend configuring the web form prior to the start of the project and then begin from that markup to change styles in order to accomplish a specific design. © COPYRIGHT 2012 OSHYN INCORPORATED 13
  14. 14. Learn more about Oshyn’s Sitecore work at: www.oshyn.com/sitecore© COPYRIGHT 2012 OSHYN INCORPORATED 14

×