How To Create Custom Signup Pages

alt=
Ekwe
@ekwe
10 years ago
212 posts
Is there anywhere, where I can have a sample code of signup pages, want to customize the look of our sign ups. Please, thanks. This is what I was able to get from view source, but how to generate the keys and put in the correct variables became the issue. Thanks in advance for your time

<form class="jrform" id="jrUser_signup" name="jrUser_signup" action="http://jamroom/user/signup_save" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input id="jr_html_form_token" name="jr_html_form_token" value="c0d968194a4e5bb347124fbcec3fd864" type="hidden">
<table class="page_content">
<tbody><tr>
    <td colspan="2" class="page_banner_box">
        <table class="page_banner">
            <tbody><tr>

                    <td class="page_banner_right"></td>
                            </tr>
        </tbody></table>
    </td>
</tr>
<tr>
  
  <td colspan="2" class="page_notice_drop"><div id="jrUser_signup_msg" class="page_notice form_notice"></div></td>
</tr><tr>
  <td class="element_left form_input_left text_left user_name_element_left">
    <a id="ff-user_name"></a>user name
      </td>
  <td class="element_right form_input_right text_right user_name_element_right" style="position:relative">
    <input id="user_name" class="form_text" name="user_name" value="" tabindex="1" autocorrect="off" autocapitalize="off" type="text">
              <input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_name').slideToggle(250);" type="button">
      </td>
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_user_name" class="form_help" style="display:none">

      <table class="form_help_drop">
        <tbody><tr>
          <td class="form_help_drop_left">
            please enter your user name
            
                      </td>
          <td class="form_help_drop_right">
            
                      </td>
        </tr>
      </tbody></table>

    </div>
  </td>
</tr>
<tr>
  <td class="element_left form_input_left text_left user_email_element_left">
    <a id="ff-user_email"></a>email address
      </td>
  <td class="element_right form_input_right text_right user_email_element_right" style="position:relative">
    <input id="user_email" class="form_text" name="user_email" value="" tabindex="2" autocorrect="off" autocapitalize="off" type="text">
              <input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_email').slideToggle(250);" type="button">
      </td>
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_user_email" class="form_help" style="display:none">

      <table class="form_help_drop">
        <tbody><tr>
          <td class="form_help_drop_left">
            please enter a valid email address or user name to log into the system.
            
                      </td>
          <td class="form_help_drop_right">
            
                      </td>
        </tr>
      </tbody></table>

    </div>
  </td>
</tr>
<tr>
  <td class="element_left form_input_left password_left user_passwd1_element_left">
    <a id="ff-user_passwd1"></a>password
      </td>
  <td class="element_right form_input_right password_right user_passwd1_element_right" style="position:relative">
    <input id="user_passwd1" class="form_text" name="user_passwd1" value="" tabindex="3" type="password">
              <input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_passwd1').slideToggle(250);" type="button">
      </td>
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_user_passwd1" class="form_help" style="display:none">

      <table class="form_help_drop">
        <tbody><tr>
          <td class="form_help_drop_left">
            please enter your password
            
                      </td>
          <td class="form_help_drop_right">
            
                      </td>
        </tr>
      </tbody></table>

    </div>
  </td>
</tr>
<tr>
  <td class="element_left form_input_left password_left user_passwd2_element_left">
    <a id="ff-user_passwd2"></a>repeat password
      </td>
  <td class="element_right form_input_right password_right user_passwd2_element_right" style="position:relative">
    <input id="user_passwd2" class="form_text" name="user_passwd2" value="" tabindex="4" onkeypress="if (event &amp;&amp; event.keyCode == 13 &amp;&amp; this.value.length > 0) { jrFormSubmit('#jrUser_signup','c0d968194a4e5bb347124fbcec3fd864','ajax'); }" type="password">
              <input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_passwd2').slideToggle(250);" type="button">
      </td>
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_user_passwd2" class="form_help" style="display:none">

      <table class="form_help_drop">
        <tbody><tr>
          <td class="form_help_drop_left">
            repeat the password you entered to be sure there are no typos
            
                      </td>
          <td class="form_help_drop_right">
            
                      </td>
        </tr>
      </tbody></table>

    </div>
  </td>
</tr>
<tr>
  <td class="element_left form_input_left select_left quota_id_element_left">
    <a id="ff-quota_id"></a>Account Type
      </td>
  <td class="element_right form_input_right select_right quota_id_element_right" style="position:relative">
    <select id="quota_id" class="form_select" name="quota_id" tabindex="5"><option value="1" selected="selected"> TruSpotters</option>
<option value="2"> Artists</option>
</select>
              <input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_quota_id').slideToggle(250);" type="button">
      </td>
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_quota_id" class="form_help" style="display:none">

      <table class="form_help_drop">
        <tbody><tr>
          <td class="form_help_drop_left">
            Select the Type of Account you would like to sign up for.
            
                      </td>
          <td class="form_help_drop_right">
            
                      </td>
        </tr>
      </tbody></table>

    </div>
  </td>
</tr>
<tr>
  <td class="element_left form_input_left custom_left _element_left">
    <a id="ff-"></a>social login
      </td>
  
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_" class="form_help" style="">

      

    </div>
  </td>
</tr>
<tr>
  <td class="element_left form_input_left checkbox_spambot_left user_is_human1972726_element_left">
    <a id="ff-user_is_human1972726"></a>human check
      </td>
  <td class="element_right form_input_right checkbox_spambot_right user_is_human1972726_element_right" style="position:relative">
    <span id="sb_user_is_human1972726"><input id="user_is_human1972726" name="user_is_human1972726" tabindex="5" type="checkbox"></span>
              <input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_is_human1972726').slideToggle(250);" type="button">
      </td>
</tr>
<tr>
  <td class="element_left form_input_left" style="padding:0;height:0px"></td>
  <td>
    <div id="h_user_is_human1972726" class="form_help" style="display:none">

      <table class="form_help_drop">
        <tbody><tr>
          <td class="form_help_drop_left">
            check this to let us know you are human, and not a spam bot.
            
                      </td>
          <td class="form_help_drop_right">
            
                      </td>
        </tr>
      </tbody></table>

    </div>
  </td>
</tr>
<tr>
  <td colspan="2" class="form_submit_box">
    <div class="form_submit_section">
        
        <img id="form_submit_indicator" src="http://jamroom/image/img/skin/mytruspot/submit.gif" alt="working..." height="24" width="24"><input id="jrUser_signup_submit" class="form_button" value="create account" tabindex="6" onclick="jrFormSubmit('#jrUser_signup','c0d968194a4e5bb347124fbcec3fd864','ajax');" type="button">&nbsp;&nbsp;<input id="jrUser_signup_cancel" class="form_button" value="cancel" onclick="jrCore_window_location('http://jamroom/login')" type="button">
    </div>
  </td>
</tr>
</tbody></table>
</form>


updated by @ekwe: 11/03/14 12:46:18AM
michael
@michael
10 years ago
7,746 posts
Take a look at these docs:

"Using the Form Designer"
http://www.jamroom.net/the-jamroom-network/documentation/getting-started/1275/using-the-form-designer

You can customize the signup from from here:
YOUR-SITE.com/user/form_designer/m=jrUser/v=signup
alt=
Ekwe
@ekwe
10 years ago
212 posts
I did, I want to put the form on a different template

Tags