fbpx

Include a Signup Form on your Login page

If you want to replace your login page with one that also offers a signup form, you can simply copy and paste the following code snippets. The HTML snippet will go into your “text” tab of your page editor or within an HTML box. Due to how WordPress handles script tags, you will need to use a 3rd party plugin in order to place the script code into your <head>…</head> tag.

HTML code:

<div class="mm-field-column">
          <input id="loginF" name="login-signup" type="radio" value="Login" checked="checked"> <label style="display:inline;" for="loginF">Login</label>
          <input id="signUp" name="login-signup" type="radio" value="SignUp"> <label style="display:inline;width:auto;" for="signUp">Sign Up</label>
</div></br>
<div id="loginForm">
[MM_Member_Decision isMember='true']
You are already logged in! Need to log out? You can do that <a href="[MM_CorePage_Link type='logout']" title="Log out">here</a>.
[/MM_Member_Decision]

[MM_Member_Decision isMember='false']
[MM_Form type='login']
<div class="mm-login">
[MM_Form_Message type='error']
[MM_Form_Message type='success']

<h3>Enter your username and password below</h3>

<table>
    <tr>
        <td class="mm-label-column">
          <span class='mm-label'>Username</span>
        </td>
        <td class="mm-field-column">
          [MM_Form_Field name='username']
        </td>
    </tr>
    <tr>
        <td class="mm-label-column">
          <span class='mm-label'>Password</span>
        </td>
        <td class="mm-field-column">
          [MM_Form_Field name='password']
        </td>
    </tr>
    <tr>
        <td class="mm-label-column"></td>
        <td class="mm-field-column">
          [MM_Form_Button type='login' label='Login']
          [MM_Form_Field name='rememberMe' label='Remember me']
        </td>
    </tr>
    <tr>
        <td class="mm-label-column"></td>
        <td class="mm-field-column">
          <a href="[MM_CorePage_Link type='forgotPassword']" class="mm-forgot-password">Forgot Password</a>
        </td>
    </tr>
</table>
</div>
[/MM_Form]
[/MM_Member_Decision]</div>

<div id="signUpForm">
<h3>Sign up for Free</h3>
[MM_Form type='checkout' membershipLevelId='1']   
[MM_Form_Message type='error']
   
[MM_Form_Section type='accountInfo']
Account Information           
<table>
    <tr>
        <td class="mm-label-column">
          <span class='mm-label'>First Name:</span>
        </td>
        <td class="mm-field-column">
          [MM_Form_Field type='input' name='firstName']
        </td>
    </tr>
    <tr>
        <td class="mm-label-column">
          <span class='mm-label'>Last Name:</span>
        </td>
        <td class="mm-field-column">
          [MM_Form_Field type='input' name='lastName']
        </td>
    </tr>
<tr>
        <td class="mm-label-column">
          <span class='mm-label'>Email:</span>
        </td>
        <td class="mm-field-column">
          [MM_Form_Field type='input' name='email']
        </td>
<tr>
        <td class="mm-label-column">
          <span class='mm-label'>Password:</span>
        </td>
        <td class="mm-field-column">
          [MM_Form_Field type='input' name='password'][MM_Form_Field type='hidden' name='phone' isRequired='false']
 </td>
    </tr>
    <tr>
<td class="mm-label-column"></td>      
 <td class="mm-field-column">
          <a href="[MM_Form_Button type='submit' paymentMethod='default']" class="mm-button">Sign Up</a></TD>
    </tr>
</table>
[/MM_Form_Section]
[/MM_Form]
</div> 

Script code:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('input:radio').click(function() {
   if (jQuery(this).val() === 'Login') {
      jQuery('#loginForm').show('fast');
      jQuery('#signUpForm').hide('fast');
   } else if ($(this).val() === 'SignUp') {
      jQuery('#signUpForm').show('fast');
      jQuery('#loginForm').hide('fast');
   }
 });
  
jQuery('#signUpForm').hide('fast');
});
</script>

The result of putting the code into the correct place:

Was this article helpful?

Related Articles

Can’t find the answer you’re looking for?

Reach out to our Customer Success Team
Contact us!