How To customize signup template

Discussion in 'Templates customization' started by olliejames, Oct 25, 2013.

  1. olliejames

    olliejames aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    26
    I have been looking in the themes documentation section, and on this forum, but I can not find how to make simple changes to the signup page.

    If I check the source code of the signup page, I see stuff like:
    <div class="am-form"><form action="/signup/index" id="page-0" method="post" class="am-signup-form"><div class="row" id="row-product_id_page-0-0"><div class="element-title"><label for="product_id_page-0-0"><span class="required">* </span>Product</label></div><div class="element"><label for='product-10-11'><input type='radio' id='product-10-11' name='product_id_page-0[]' value='10-11' data-first_price="39.90" data-second_price="" checked="checked" />

    But I can not find anyplace in the templates to change this, is this hard coded into amember?

    Second question, where are all the building blocks located in amember on the signup page?

    I want to have a three column signup page, with the customer details in the firt column, the payment choices in the middle column and the product stuff in the third column.

    I had this working flawlessly on amember 3 but amember 4 seems a nightmare to customize the templates.

    Anybody know how to do this?
  2. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    1,659
  3. olliejames

    olliejames aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    26
    already tried that of course, but thanks nevertheless.

    That page is pretty useless because it does not tell you how things work under the hood.

    par example:
    <?php echo $frm['elements']['product_id-0']['htmle'] ?> does not do anything on my site < I had to change it to:

    <?php echo $frm['elements']['product_id_page-0-0']['htmle'] ?>
    But where can I find instructions and explanation that it had to be changed to that?

    Also, When I try

    <?php echo $frm['elements']['row-address-0']['htmle'] ?> it only throws a lot of blank fillable fields, but no explanation for what is what, now how am I to figure that out?

    It seems to me that the documentation is seriously lacking here, at least in amember 3 there was some logic that could be gathered from looking at the files themselves, but that is totally lost to me here.

    Help much appreciated!
  4. olliejames

    olliejames aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    26
    I got one step further, I figured out how to get the individual fields + input fields.

    Here is the code for a three column signup page that I use, it shows up, so I guess that is progress, but it does not look good yet because of some automatic settings...

    1 more questions therefore:
    1 - the size of the input fields is defined AUTOMATICALLY, yet I need to be able to specify that to make the form look good, where can I do that?

    Code:
    <?php
    $title = 'title'; // set title for usage in header
    $this->setLayout('layout.phtml');
    include $this->_script('_error.phtml');
    $this->headScript()
          ->appendFile(REL_ROOT_URL . '/application/default/views/public/js/jquery/jquery.validate.js');
    $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
    ?>
    <?php include $this->_script('js.country_state.js'); ?>
     
    <div id="signup">
    <div id="content">
    <?php include $this->_script('signup/_login-offer.phtml'); ?>
    <h1>Veilig en Makkelijk Bestellen</h1>
    <form <?php echo $frm['attributes'];?>>
    <?php echo $frm['hidden'];// insert hidden form elements  - REQUIRED ?>
    <?php echo $frm['javascript']; // insert javascript code - REQUIRED ?>
        <div class="checkout">
        <div class="checkout-heading"><span>Uw gegevens</span></div>
      <div class="checkout-content"><tr>
        <div class="left">
        <span class="required red">*</span>Voornaam<br />
        <?php echo $frm['elements']['name-0']['elements']['name_f-0'] ['htmle'] ?><br />
        </div>
        <div class="right">
          <span class="required red">*</span>Achternaam<br />
        <?php echo $frm['elements']['name-0']['elements']['name_l-0']['htmle'] ?><br />
        </div>
        <div class="clear">
        <span class="required red">*</span>Straat & huisnummer<br />
        <?php echo $frm['elements']['row-address-0']['elements']['street-0'] ['htmle'] ?><br />
        <div class="left">
        <span class="required red">*</span>Postcode<br />
        <?php echo $frm['elements']['row-address-0']['elements']['zip-0'] ['htmle'] ?><br />
        </div>
        <div class="right">
        <span class="required red">*</span>Plaats<br />
        <?php echo $frm['elements']['row-address-0']['elements']['city-0'] ['htmle'] ?><br />
        </div>
        <span class="required red">*</span>Land<br />
        <?php echo $frm['elements']['row-address-0']['elements']['f_country'] ['htmle'] ?><br />
        <span class="required red">*</span>Telefoon<br />
        <?php echo $frm['elements']['phone-0'] ['htmle'] ?><br />
        <span class="required red">*</span>E-mail adres<br />
        <?php echo $frm['elements']['email-0']['htmle'] ?>
        </div></div></div>
        <div class="checkoutmid">
        <div class="checkout-heading"><span>Betaalmethode</span></div>
        <div class="checkout-content">
            <?php echo $frm['elements']['paysys_id']['htmle'] ?>
                <div class="clear">
        </div></div></div>
     
        <div class="checkout">
        <div id="confirm">
          <div class="checkout-heading">Bestelling bevestigen</div>
          <div class="checkout-content">
          <div class="checkout-product">
            <?php echo $frm['elements']['product_id_page-0-0']['htmle'] ?><br />
                      <?php echo $frm['elements']['buttons']['htmle'] ?>
    </form><div class="clear">
    </div></div></div></div>
    Thanks!
  5. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    You can change element's width in styles. For example:
    Code:
    #email-0{
    width: 300px;
    }
    
    olliejames likes this.
  6. olliejames

    olliejames aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    26
    Thanks!

    That did the trick.
  7. olliejames

    olliejames aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    26
    One more question:

    How can I get the error messages to show above the form, like in amember 3?

    Thanks
  8. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    You should include this line in your template:
    PHP:
    include $this->_script('_error.phtml'); // display error if any
  9. sc0tsman

    sc0tsman Member

    Joined:
    Nov 25, 2009
    Messages:
    119
    Guru's referring to http://www.amember.com/docs/Custom_Signup_Forms is a waste of time. I have been trying for over a week and my eyes or sore, my head is sore. Can you please please please tell me in simple terms how to get a custom login form on my landing page.
    [​IMG]
    janea likes this.

Share This Page