DotCMS Account Creation VTL

account-create.vtl

#set($session = $request.getSession())
#set($createAccountForm = $request.getAttibute("createAccountForm"))

<div class="errorMessage">
  #parse('static/messages.html')
  #parse('/static/messages.html')
</div>


<script languaje="javascript">
  function submitForm(){
    var fm = document.getElementById("createAccountForm");
    fm.submit();
  }
  function cancel(){
      window.location = "/";
  }
</script>

<div class="createAccount">
  
  <form id="createAccountForm" action="/dotCMS/createAccount">
    <input type="hidden" name="dispatch" value="quickCreate">
    <input type="hidden" id="return" name="return" value="/application/createaccount/thank_you.html">

    <div class="formRow clearfix">
      <label for="emailAddress">Email:</label>
      <input tabindex="4" type="text" name="emailAddress" size="30" value="$!{createAccountForm.emailAddress}">
    </div>
    
    <div class="formRow clearfix">
      <label for="password1">Password:</label>
      <input tabindex="5" type="password" maxlength="20" name="password1" value="$!{createAccountForm.password}">
    </div>
  
    <div class="formRow clearfix">
      <label for="verifyPassword">Verify Password:</label>
      <input tabindex="6" type="password" maxlength="20"  onchange="passFieldChanged()" name="verifyPassword" value="$!{createAccountForm.verifyPassword}">
    </div>
  
    <div class="formRow clearfix">
      <label for="prefix">Prefix:</label>
      
      #set( $mr = "")
      #set( $mrs = "")
      #set( $miss = "")
      #set( $dr = "")
      #if($!{createAccountForm.prefix} == "mr")
        #set( $mr = "selected")
      #end
      #if($!{createAccountForm.prefix} == "mrs")
        #set( $mrs = "selected")
      #end
      #if($!{createAccountForm.prefix} == "miss")
        #set( $miss = "selected")
      #end
      #if($!{createAccountForm.prefix} == "dr")
        #set( $dr = "selected")
      #end
      <select tabindex="7" name="prefix" value="$!{createAccountForm.prefix}">
        <option value="mr" $!{mr}>Mr.</option>
        <option value="mrs" $!{mrs}>Mrs.</option>
        <option value="miss" $!{miss}>Ms.</option>
        <option value="dr" $!{dr}>Dr.</option>
      </select>
    </div>
  
    <div class="formRow clearfix">
      <label for="firstName">First Name:</label>
      <input tabindex="8" type="text" name="firstName" value="$!{createAccountForm.firstName}">
    </div>
  
    <div class="formRow clearfix">
      <label for="lastName">Last Name:</label>
      <input tabindex="9" type="text" name="lastName" value="$!{createAccountForm.lastName}">
    </div>
  
    <div class="formRow clearfix">
      <label for="suffix">Suffix:</label>
      <input tabindex="10" type="text" name="suffix" value="$!{createAccountForm.suffix}">
    </div>
  
    <div class="formRow clearfix">
      <label for="title">Title:</label>
      <input tabindex="11" type="text" name="title" value="$!{createAccountForm.title}">
    </div>
  
  <div style="padding:8px;margin:40px 0 10px 0;background:#eee;color:#5D5D60;">
    #set( $work = "")
    #set( $home = "")
    #if($!{createAccountForm.description} == "work")
      #set( $work = "checked")
    #end
    #if($!{createAccountForm.description} == "home")
      #set( $home = "checked")
    #end
    <div style="display:inline-block;margin:3px 15px 3px 20px;">
      <input tabindex="19" style="position:relative;display:inline;left:auto;" type="radio" name="description" value="work" $!{work} id="descriptionWork" />
      &nbsp;&nbsp;<label for="descriptionWork" style="position:relative;display:inline;left:auto;">Work Address</label>
    </div>
    <div style="display:inline-block;margin:3px 15px;">
      <input tabindex="20" style="position:relative;display:inline;left:auto;" type="radio" name="description" value="home" $!{home} id="descriptionHome" />
      &nbsp;&nbsp;<label for="descriptionHome" style="position:relative;display:inline;left:auto;">Home Address</label>
    </div>
  </div>
  
    <div class="formRow clearfix">
      <label for="street1">Street1:</label>
      <input tabindex="21" type="text" name="street1" value="$!{createAccountForm.street1}">
    </div>
  
    <div class="formRow clearfix">
      <label for="street2">Street 2:</label>
      <input tabindex="22" type="text" name="street2" value="$!{createAccountForm.street2}">
    </div>
  
    <div class="formRow clearfix">
      <label for="city">City:</label>
      <input tabindex="23" type="text" name="city" value="$!{createAccountForm.city}">
    </div>
  
    <div class="formRow clearfix">
      <label for="state">State:</label>
      <input tabindex="23" type="text" name="state" value="$!{createAccountForm.state}">
    </div>
  
    <div class="formRow clearfix">
      <label for="country">Country:</label>
      <input tabindex="23" type="text" name="country" value="$!{createAccountForm.country}">
    </div>
  
    <div class="formRow clearfix">
      <label for="zip">Zip:</label>
      <input tabindex="25" type="text" name="zip" value="$!{createAccountForm.zip}">
    </div>
  
    <div class="formRow clearfix">
      <label for="phone">Phone:</label>
      <input tabindex="26" type="text" name="phone" value="$!{createAccountForm.phone}">
    </div>
  
    <div class="formRow clearfix">
      <label for="fax">Fax:</label>
      <input tabindex="27" type="text" name="fax" value="$!{createAccountForm.fax}">
    </div>
  
    <!-- My Profile And Preferences -->
    #if($UtilMethods.isSet($theCategories))
      Please select the areas that interest you most.
      $theCategories
    #end
    <!-- END My Profile And Preferences -->  
  
      
    <div style="margin:20px 0 30px 160px;">
      <input type="button" onclick="cancel();" value="Cancel" />
      <input type="button" onclick="submitForm();" value="Next Step" />
    </div>

  </form>
</div>​