RDForm icon indicating copy to clipboard operation
RDForm copied to clipboard

self contained example

Open KonradHoeffner opened this issue 2 years ago • 1 comments

It would be very helpful to have a self contained example to download as HTML file that includes everything needed. I am trying out RDForm using the running example but after downloading the source code I have to download all the dependencies like bootstrap as well, it would be easier if at least the dependencies like bootstrap.min.css were from a CDN instead.

KonradHoeffner avatar Apr 27 '22 10:04 KonradHoeffner

That's how far I got it, only had to copy templates/form.html and js/hooks/hooks.js:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">


    <!-- JQueryUI Style -->
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- style -->
    <link href="https://unpkg.com/@donsi/[email protected]/css/rdform.css" rel="stylesheet" media="screen">

    <style type="text/css">
    body {
        background: url("img/noise.png"), -o-linear-gradient(top, #F4F4F4 0px, #EEEEEE 100%) transparent;
        background: url("img/noise.png") repeat scroll 0% 0%, -moz-linear-gradient(center top , #F4F4F4 0%, #EEEEEE 100%) repeat scroll 0% 0% transparent;
    }
    .container {
        border: 1px solid lightGray;
        padding: 2% 8%;
        border-radius: 10px;
        margin: 10px auto;
        background: white;
        max-width: 960px;
    }
    </style>

    <title>RDForm</title>
</head>
<body>

<div class="container">
    <h1>Welcome to RDForm!</h1>

    <!-- the form container -->
    <form action="#" class="form-horizontal rdform" role="form"></form>
</div>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <!-- JQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsonld/1.0.0/jsonld.min.js"></script>

    <!-- own stuff -->
    <script src="https://unpkg.com/@donsi/[email protected]/js/rdform.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('.rdform').RDForm({
            template: "templates/form.html",
            hooks: "js/hooks/hooks.js",
            debug: true,
            verbose: true,

            submit: function() {
                console.log( JSON.stringify(this, null, '\t') );
            }
        });
    });
    </script>

</body>
</html>

KonradHoeffner avatar Apr 27 '22 10:04 KonradHoeffner