Salesforce B2C Commerce 23.5 > Developing Your Site > Legacy Developer Documentation > Site Genesis > SGJC Forms > Developing Forms with Pipelines > Forms Tutorial > Forms Tutorial: UX Studio

3 Forms Tutorial: Add Templates

You add a new template, user.editinterests.isml, that shows the interest and newsletter choices on the browser.

  1. In UX Studio, from the Navigator view, select the cartridge/templates/default/account/user directory.
  2. Click File > New and select ISML Template.
  3. Select the parent folder (template/account/user).
  4. Enter the template name editpreferences.
  5. Click Finish.
  6. Use the following to create the contents:
    <!--- TEMPLATENAME: editpreferences.isml renders fields
    			on browser --->
    		<isdecorate template="account/pt_account">
    		 <iscontent type="text/html" charset="UTF-8"
    			compact="true">
    		 <!-- Start: user/editpreferences -->
    		 <isinclude template="util/modules">
    		 <div id="service">
    		
    			<h1>${Resource.msg('user.editpreferences.001','user',null)}</h1>
    		 <div class="editprofile">
    		
    			<h2>${Resource.msg('user.editpreferences.002','user',null)}</h2>
    		 <form action="${URLUtils.httpsContinue()}"
    			method="post" id="EditProfileForm">
    		
    			<h3>${Resource.msg('user.editpreferences.003','user',null)}</h3>
    		 <div id="editprofile">
    		 <fieldset>
    		 <table class="simple">
    		 <tr>
    		
    			<isinputfield formfield="${pdict.CurrentForms.
    			preferences.outerwear}"
    			type="checkbox">
    		
    		 </tr>
    		 <tr>
    		
    			<isinputfield formfield="${pdict.CurrentForms.
    			preferences.footwear}"
    			type="checkbox">
    		
    		 </tr>
    		 </table>
    		 </fieldset>
    		 </div>
    		
    			<h3>${Resource.msg('user.editpreferences.004','user',null)}</h3>
    		 <div id="editprofile">
    		 <fieldset>
    		 <table class="simple">
    		 <tr>
    		
    			<isinputfield formfield="${pdict.CurrentForms.
    			preferences.newsletter}"
    			type="checkbox">
    		
    		 </tr>
    		 </table>
    		 ...
    		 </fieldset>
    		 <fieldset>
    		
    			<input class="image imageright" type="image"
    			name="${pdict.CurrentForms.
    			preferences.apply.htmlName}"
    			value="Edit" src="${URLUtils.staticURL('/images/bttn_apply.gif')}"
    			/>
    		
    		 </fieldset>
    		 </div> 
    		 </form>
    		 </div>
    		 </div>
    		 <!-- End: user/editpreferences -->
    		</isdecorate>
X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used. By continuing to use this site you are giving us your consent to do this. Privacy Policy.