FAQ - CloudChat 3 - SignUp Form

CloudChat 3 - SignUp Form

02.11.2018 730

We get asked a lot how to put the signup form on a different page or your own website. That is fairly easy and you will need following code and one javascript file on your page.

<h2 class="section-heading">Start your 10 days trial today.</h2>
                    <p>We have one simple price, $2 USD per Month, paid Yearly.</p>
                    <div id="jak-thankyou"></div>
                    <form role="form" class="jak-ajaxform" method="post" action="process/form.php">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="sr-only" for="username">Your username</label>
                                    <input type="text" class="form-control input-lg" name="username" id="username" placeholder="Your username">
                                    <span id="username-help" class="help-block"></span>
                                </div><!-- /form-group -->
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="input-group input-group-lg">
                                        <label class="sr-only" for="signup">Your Email Address</label>
                                        <input type="text" class="form-control" name="signup" id="signup" placeholder="Your Email Address">
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary jak-submit" type="submit">Go!</button>
                                        </span>
                                    </div><!-- /input-group -->
                                    <span id="signup-help" class="help-block"></span>
                                </div>
                            </div>
                        </div>
                        <div id="dsgvo">
                          <div class="checkbox">
                            <label>
                              <input type="checkbox" value="1" name="dsgvo" id="dsgvo">
                              I accept the privacy agreement.
                            </label>
                          </div>
                        </div>
                        <!-- <div class="form-group">
                                <label for="location">Select a location nearby</label>
                                <select name="location" class="form-control input-lg">
                                    <option value="1">Europe</option>
                                    <option value="2">America</option>
                                    <option value="3">Asia</option>
                                    <option value="3">Australia / New Zealand</option>
                                </select>
                        </div> -->
                        <input type="hidden" name="location" value="1">
                    </form>
                    <p><img src="img/comodo_secure_seal_113x59_transp.png" alt="ssl"></p>
                    <p><a href="https://mychatservicedomain.com" class="btn btn-lg btn-success">Already registered? Login Now!</a></p>

The form can also be find in the index.html file.

You will also need the javascript file that sends the form data to the server.

js/new-age.js

In case you use the new-age.js file in a custom build page or in another website, it is necessary to remove following part from the file:

// jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 100
    });

    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a').click(function() {
        $('.navbar-toggle:visible').click();
    });

    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 50
        }
    });

Make sure jQuery is available on your page or website and the path to the javascript file is correct. We are looking forward for some great websites made by you!