Samples

Signup Form for External API

NOTE: Use the “Sitetheory Registration” component for capturing signups locally.

This is a sample form for submitting to an external third-party API for processing the signup and returning success. This is useful if you have your data stored elsewhere, and/or want to create custom functionality (e.g. customized email response). A great solution would be to use a Heroku node.js server to quickly setup logic to process the API call that we make below.

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
{% block script %}
    {{ parent() }}

    {# SIGNUP FORM #}
    <script>
        (function (root, factory) {
            if (typeof require === 'function') {
                require(['stratus', 'underscore', 'angular', 'angular-material'], factory);
            } else {
                factory(root.Stratus);
            }
        }(this, function (Stratus, _) {

            Stratus.Controllers.SignupController = function ($scope, $element, $http, $attrs, $window) {

                $scope.options = {
                    pattern: {
                        email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                        zip: /[a-zA-Z0-9 \-]{5,}/
                    },
                    // URL to
                    url: 'https://api.thirdpartydomain.com/signup',
                    response: {
                        success: 'Thanks for signing up! We\'ll be in touch shortly.',
                        error: 'Sorry ;( looks like there was an error saving your info. Please email us directly so we can help.'
                    },
                    redirect: {
                        // NOTE: browsers block popups so this isn't advised
                        popup: false,
                        url: false,
                        config: null // 'width=400,height=500,toolbar=no,menubar=no,scrollbars=yes,resizable=yes'
                    }
                };

                // Merge Custom Options
                if($attrs.options) _.extend($scope.options, JSON.parse($attrs.options));

                $scope.response = '';
                $scope.status = null;

                $scope.data = {
                    email: '',
                    zip: ''
                };


                $scope.submit = function(form) {
                    var prototype = {
                        method: 'POST',
                        url: $scope.options.url,
                        data: JSON.stringify($scope.data)
                    };
                    $scope.status = 'sending';
                    $http(prototype).then(
                        // Success
                        function successCallback(response) {
                            if (response && (response.status === 200)) {
                                if($scope.options.redirect.url) {
                                    if ($scope.options.redirect.popup) {
                                        var win = $window.open($scope.options.redirect.url, '_blank', $scope.options.redirect.config);
                                        if(win) win.focus();
                                    } else {
                                        $window.location($scope.options.redirect.url);
                                    }
                                }
                                $scope.response = $scope.options.response.success;
                                $scope.status = 'success';
                            } else {
                                $scope.response = $scope.options.response.error;
                                $scope.status = 'error';
                            }
                        },
                        // Error
                        function errorCallback(response) {
                            $scope.response = $scope.options.response.error;
                            $scope.status = 'error';
                        }
                    );
                }

            };
        }));
    </script>

{% endblock script %}

Twig

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{% block registrationForm %}

<form name="Signup" ng-submit="submit(form)" ng-controller="SignupController" options='{"redirect":{"url":"https://secure.actblue.com/contribute/page/bncdec", "popup":false}}' ng-class="status" ng-cloak>

    <md-progress-linear md-mode="indeterminate" ng-show="status === 'sending'"></md-progress-linear>
    <p class="message" ng-show="response.length" ng-bind-html="response"></p>
    <ul class="listInline divCenter fontSecondary">

        {{ registrationFormBefore|default('')|raw }}

        {% verbatim %}
        <li>
            <md-input-container>
                <label>Email</label>
                <input name="email1" type="email" ng-pattern="options.pattern.email" ng-model="data.email" required>
                <div ng-messages="Signup.email1.$error" role="alert">
                    <div ng-message-exp="['required', 'pattern']">
                        Please enter a valid email.
                    </div>
                </div>
            </md-input-container>
        </li>
        <li>
            <md-input-container>
                <label>Zip</label>
                <input name="zip" ng-pattern="options.pattern.zip" ng-model="data.zip" required>
                <div ng-messages="Signup.zip.$error" role="alert">
                    <div ng-message-exp="['required', 'pattern']">
                        Please enter a valid zip code.
                    </div>
                </div>
            </md-input-container>
        </li>
        {% endverbatim %}
        <li>
            <button type="submit" class="btn fakeFormSubmit" ng-disabled="Signup.$invalid">{{ textSubmit|default('Count Me In') }}</button>
        </li>

        {{ registrationFormAfter|default('')|raw }}

    </ul>
</form>
{% endblock registrationForm %}

<div id="footerJoinForm" class="joinForm purple" ng-cloak>
    {% set registrationFormBefore = '<li><div class="starLeft"></div></li><li><h1>Add Your Name</h1></li>' %}
    {% set registrationFormAfter = '<li><div class="starRight"></div></li>' %}
    {{ block('registrationForm') }}
</div>

Count Up

A counter that changes a number from a start to an end value. You can also tell countUp to animate other elements like a progress bar.

This sample code is using a Custom API to fetch custom data results.count which is set to fetch on load and then every 10 seconds afterwards.

1
2
3
4
<div ng-controller="CustomApi" options='{"controller":"/people/count", "onLoad": "fetch", "onTime": {"time": "10s", "method":"fetch"}}'>
    <div id="progressBar" class="positionLeftTop salmon" style="max-width: 100%"></div>
    <div id="totalSignUp" class="borderDashed fontSecondary salmonText" count-up start-val="0" end-val="results.count" count-instance="countUp" related-target="progressBar" related-style="{ width: (100*(frameVal/500000))+'%' }" duration="1.5" decimals="0" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy></div>
</div>