• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Styling Sitecore's Web Forms for Marketers
 

Styling Sitecore's Web Forms for Marketers

on

  • 4,232 views

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

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

Statistics

Views

Total Views
4,232
Views on SlideShare
4,197
Embed Views
35

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 35

http://phtn-cons.ck.com 23
https://twitter.com 7
http://campbellcons 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Styling Sitecore's Web Forms for Marketers Styling Sitecore's Web Forms for Marketers Presentation Transcript

    • Styling Sitecore’s Web Forms for Marketers A step-by-step guide© COPYRIGHT 2012 OSHYN INCORPORATED 1
    • 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
    • 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
    • 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
    • › 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
    • 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” © COPYRIGHT 2012 OSHYN INCORPORATED 7
    • › 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
    • 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
    • How to style the fieldsIn the Form Designer, you can use CSS Class propertythat is available for all fields. © COPYRIGHT 2012 OSHYN INCORPORATED 10
    • 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
    • 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 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
    • Learn more about Oshyn’s Sitecore work at: www.oshyn.com/sitecore© COPYRIGHT 2012 OSHYN INCORPORATED 14