Using Custom Button on Sign Up Form-Remove Original

Discussion in 'Templates customization' started by relapse, Aug 30, 2017.

  1. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    I have been trying to get an answer on this for a week in support but not having any luck as my questions are being ignored.

    I am trying to use a custom button on the signup form because the grey original button does not convert well and a css button color change is not going to cut it either.

    Therefore, I need to remove the original button and use the custom button built in the shopping cart section.

    I also need one for each product, as each product has it's own specific button.

    Can anyone give me any tips to get rid of this default button?

    Attached Files:

  2. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    I also realize there may be a better way to do this than I am attempting, so I am open for suggestions.

    Example:

    If I could connect a product to a regular amember html page, that would work also.
  3. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    2,295
    Hello,

    I recommend to customize default button on signup form.
    Here is example of CSS that you can use to customize button:
    HTML:
    .am-signup input[type=submit] {
        width: 363px;
        height: 91px;
        border: none;
        border-radius: 0;
        background: url('/cta.png');
        text-indent: 363px;
        overflow: hidden;
    }
    
    #row-buttons .element {
        text-align: center;
        margin-left: 0;
    }
    
    Second CSS rule center button on signup form.

    You can put this CSS code to site.css
    http://www.amember.com/docs/Site.css_file

    I made mock up with image from your screenshot with this CSS:
    signup-button-mockup.png

    Best Regards.
    relapse likes this.
  4. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    Hi Caesar,

    Thank you for your instructions.

    This does work with the default template, but not if using a custom template (.phtml).

    (also, the the pricing notice on the top of the button needs to be customized per product, but can be added tot he form with html block below password block in signup page config)

    In this case, my custom template has commented out pulling the default layout in order to allow full width page html to use a good converting sales page (see line 5):

    Code:
    <?php
    $body_class = "am-page-signup am-page-signup-$code";
    if (empty($title)) $title=___('Sign-up');
    else $title=___($title);
    //$this->setLayout('layout.phtml');
    include $this->_script('_error.phtml');
    
    $this->headScript()
            ->appendFile($this->_scriptJs('jquery/jquery.validate.js'));
    ?>
    
    <div align='center'>
    <div class="am-signup">
    <?php echo $this->blocks('signup/login/before', "%s", array('record' => $record, 'code' => $code)) ?>
    <?php include $this->_script('signup/_login-offer.phtml'); ?>
    <?php echo $this->blocks('signup/login/after', "%s", array('record' => $record, 'code' => $code)) ?>
    
    <?php echo $this->blocks('signup/form/before', "%s", array('record' => $record, 'code' => $code)) ?>
    <?php include $this->_script('_form.phtml'); ?>
    <?php echo $this->blocks('signup/form/after', "%s", array('record' => $record, 'code' => $code)) ?>
    </div>
    <?php include $this->_script('js.country_state.js'); ?>
    </div>

    This does allow full width (screen width) html to render, but it renders the content of the bricks without any formatting, which doesn't look good either.

    I have tried creating a custom layout and calling it from the line in red above, but I am less than a pro when it comes to php, so I can;t seem to get it to work properly.

    Can you give me any ideas on:

    1-How to keep the formatting for the content of the sign up form bricks, AND

    2-Allow for full with html ABOVE the content of the bricks

    ------------------------------------------------
    And here is what it looks like currently:

    http://myaffiliateapprentice.com/amember/signup/K5B85As5K


    I suppose, a more eloquent request would be:

    How do I get the top html brick (where the sales page copy is) to ignore the wrapper that restricts the width of the html brick while still keeping the wrapper for the other bricks on the sign up page?
  5. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    There is an option to include/avoid standard layout on:

    1-Pages
    2-OTO's

    Is it it possible for you to provide that snippet that can be applied to the html brick where my sales copy resides on the sign up form?

    I think that would work for me.
  6. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
  7. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    2,295
    I guess the best approach is use pages for your sales latter (aMember CP -> Protect Content -> Pages)
    and at the bottom of your latter just add link (button) to signup form.
  8. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    Thanks, @caesar .

    I am using a custom button from the shopping cart on a regular amember page and it's working perfectly while giving me the opportunity to use custom layout for sales page copy.

    aMember CP -> Setup -> Shopping Cart : Button/Link HTML

    Thanks for your help!

    Roger
  9. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    UPDATE:

    The buttons work and lead to shopping cart if user not logged in as long as the following procedure is followed:

    If I add button and html at the same time, button click always bypasses shopping cart and goes straight to paypal, creating a random username.

    Is this a bug or could it be something wrong with my server?

    If it is a bug, I hoped to give a little back by reporting it, but my confidence is shot on what I know about Amember and what I don't. :D
  10. relapse

    relapse Member

    Joined:
    Jun 15, 2010
    Messages:
    133
    Finally got back to this and got ii working, @caesar .

    Thanks for your help.
    caesar likes this.

Share This Page