Custom Signup Forms

From aMember Pro Documentation
Revision as of 16:38, 19 September 2012 by Alex-scott (Talk | contribs)

Jump to: navigation, search

aMember Pro allows easy editing of signup forms via aMember Cp -> Forms Editor. The visual form editor is very flexible and easy to use, and is quite enough for 99% of our customers.

However, form editor may not flexible enough for advanced customers. So if you have strong PHP, HTML and JavaScript skills, this guide will allow you to build completely custom signup forms and still use aMember form handling and Javascript.

How to build a custom signup form

  • NOTE. This functionality is available from the 4.2.10 release and forward.
  • Create a new file amember/application/default/views/signup/signup_my_custom.phtml with the following content
<?php
$title = 'Signup'; // set title for usage in header
 
$this->setLayout('layout.phtml'); // include header and footer around this page
 
include $this->_script('_error.phtml'); // display error if any
 
$frm = $this->form->renderEasyArray(); // get html elements to include into your custom html
//echo '<pre>'.htmlentities(print_r($frm, true)).'</pre>'; // dump elements to your review
?>
<form class="am-form" <?php echo $frm['attributes'];?>>
<?php echo $frm['''hidden'''];// insert hidden form elements  - REQUIRED ?>
<?php echo $frm['''javascript''']; // insert javascript code - REQUIRED ?>
    <b>Products</b>: 
        <?php echo $frm['elements']['product_id-0']['htmle'] ?>
        <!-- ['htmle'] combines the element HTML and error message 
             You may use separate ['html'] and ['error'] elements 
             instead of ['htmle'] -->
    <hr /> 
    <b>Paysystem</b>: 
        <?php echo $frm['elements']['paysys_id']['htmle'] ?>
    <hr>
    <b>E-Mail Address</b>: 
        <?php echo $frm['elements']['email-0']['htmle'] ?>
    <hr />
        <?php echo $frm['elements']['buttons']['htmle'] ?>
</form>
  • Go to aMember Cp -> Forms Editor and create a new form for testing. Disable "username" and "password" bricks, as template does not contain these fields. In the "Template" field choose signup_my_custom.phtml. Save
  • Open your new form. You will see the form generated by your new template. You can tweak the HTML code to display input fields in desired positions on the page.


Array values explained

To see contents of $frm variable, uncomment line

echo '<pre>'.htmlentities(print_r($frm, true)).'</pre>'; // dump elements to your review
['htmle'] 
array value contains error message (if present) + the element input itself
['error'] 
the error message
['html'] 
the input element html code
['label'] 
element label
['elements'] 
some elements are groups and contains other elements. Normally you do not have to worry about - aMember contactenates HTML for these child elements into parent element. However, in rare cases you may want to handle these elements separately.


If you want to go even further and modify input fields itself, you can use str_replace/preg_replace functions to modify ['htmle'] or ['html'] variables.