form.html

---
layout: basic
app: formioForm
controller: FormController
---
<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div ng-if="!!form"><h3>You are viewing <span id="form-url"></span></h3></div>
                <div ng-if="!form">Enter the form API url into the box below and press <strong>Show Form</strong> to view the form.</div>
            </div>
            <div class="panel-body">
                <div ng-if="!form">
                    <form action="/form/" method="get">
                        <div class="form-group">
                            <label for="form">Form API URL</label>
                            <input type="text" name="form" id="form" class="form-control" placeholder="Enter your form URL">
                        </div>
                        <div class="form-group">
                            <label for="form">Form CSS Styles</label>
                            <input type="text" name="css" id="css" class="form-control" placeholder="Enter the URL for the style sheet.">
                            <p>We recommend using <a href="https://gist.github.com/">Github Gists</a> and then paste the <strong>Raw URL</strong> here.</p>
                        </div>
                        <button class="btn btn-primary" type="submit" style="z-index:111111;">Show Form!</button>
                    </form>
                </div>
                <div id="formio-form"></div>
            </div>
            <div class="panel-footer">
                <a class="btn btn-default" href="/form/"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Reset</a>
            </div>
        </div>
    </div>
</div><br/>
<script type="text/javascript">
    var QueryString = function () {
        // This function is anonymous, is executed immediately and
        // the return value is assigned to QueryString!
        var query_string = {};
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            // If first entry with this name
            if (typeof query_string[pair[0]] === "undefined") {
                query_string[pair[0]] = decodeURIComponent(pair[1]);
                // If second entry with this name
            } else if (typeof query_string[pair[0]] === "string") {
                var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
                query_string[pair[0]] = arr;
                // If third or later entry with this name
            } else {
                query_string[pair[0]].push(decodeURIComponent(pair[1]));
            }
        }
        return query_string;
    }();

    // Inject the styles.
    if (QueryString.css) {

        // Replace with rawgit so that
        if (QueryString.css.indexOf('https://gist.githubusercontent.com') !== -1) {
            QueryString.css = QueryString.css.replace('https://gist.githubusercontent.com', 'https://cdn.rawgit.com');
        }

        var $head = $("head");
        var $headlinklast = $head.find("link[rel='stylesheet']:last");
        var linkElement = "<link rel='stylesheet' href='" + QueryString.css + "' type='text/css' media='screen'>";
        if ($headlinklast.length){
            $headlinklast.after(linkElement);
        }
        else {
            $head.append(linkElement);
        }
    }

    $('#form-url').text(QueryString.form);

    angular.module('formioForm', ['formio'])
        .controller('FormController', [
            '$scope',
            '$compile',
        function(
            $scope,
            $compile
        ) {
            $scope.form = QueryString.form;
            if ($scope.form) {
                var formio = angular.element(document.createElement('formio'));
                var attributes = {src: "'" + $scope.form + "'"};
                angular.element('#formio-form').html($compile(formio.attr(attributes))($scope));
            }
        }]);
</script>