Shows How to Use HelpImprove.us

index.html

<style type="text/css">
    #HI-Container
    {
        font: 14px Arial, Helvetica, sans-serif;
        position: absolute;
        top: 200px;
        right: 0;
        vertical-align: top;
    }
    #HI-Link
    {
        position: absolute;
        top: -25px;
        left: -117px;
        text-align: right;
        display: inline-block;
        color: transparent;
        height: 328px;
        width: 117px;
        background: url(http://helpimprove.us/Content/Images/HelpImproveUs.png);
    }
    #HI-Link:hover
    {
        background-position: top right;
    }
    #HI-Form
    {
        -moz-border-radius: 5px 0 0 5px;
        -webkit-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
        display: inline-block;
        width: 220px;
        color: #fff;
        background-color: #070b13;
        border: 1px solid #000;
        border-right: none;
        padding: 10px;
        box-shadow: #333 0 0 50px;
        -moz-box-shadow: #333 0 0 50px;
        -webkit-box-shadow: #333 0 0 50px;
    }
    #HI-Container label.HI-Question
    {
        display: block;
        font: 13px Tahoma, Geneva, sans-serif;
        font-weight: bold;
        margin: 0;
        padding: 0 0 15px 0;
    }
    #HI-Submit
    {
        border-style: solid;
        border-width: 0 0 0 1px;
        border-color: #d1d1d1;
        color: #000;
        display: block;
        height: 28px;
        width: 100%;
        font-weight: bold;
        font-size: 16px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: #fff;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #edeff3), color-stop(0.5, #edeff3), color-stop(0.51, #fff), color-stop(1, #fff));
        background-image: -moz-linear-gradient(center bottom, #edeff3 0%, #edeff3 50%, #fff 51%, #fff 100%);
        box-shadow: #000 0 1px 0;
        -moz-box-shadow: #000 0 1px 0;
        -webkit-box-shadow: #000 0 1px 0;
    }
    #HI-Submit:hover
    {
        color: #fff;
        background: #1e4ee1;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1e4ee1), color-stop(0.5, #1e4ee1), color-stop(0.51, #4069e5), color-stop(1, #7c98ed));
        background-image: -moz-linear-gradient(center bottom, #1e4ee1 0%, #1e4ee1 50%, #4069e5 51%, #7c98ed 100%);
        border-color: #000;
        text-shadow: 0 1px 0 #000;
    }
</style>
<div id="HI-Container">
    <a id="HI-Link" href="http://helpimprove.us/feedback" target="_BLANK">Help<br />
        Improve<br />
        Us! </a>
    <form id="HI-Form" style="display: none;" action="http://helpimprove.us/feedback"
    method="post" target="_BLANK">
    <label class="HI-Question" for="HI-Score">
        Would you recommend this page to a friend?</label>
    <input type="radio" name="Score" id="HI-Score0" value="0" />
    <label for="HI-Score0">
        Never</label>
    <br />
    <input type="radio" name="Score" id="HI-Score5" value="5" checked="checked" />
    <label for="HI-Score5">
        Maybe If You Change...</label>
    <br />
    <input type="radio" name="Score" id="HI-Score10" value="10" />
    <label for="HI-Score10">
        Yes</label>
    <br />
    <br />
    <label class="HI-Question" for="HI-Message">
        What can we change to make you happy?</label>
    <textarea cols="24" id="HI-Message" name="Message" rows="2"></textarea>
    <br />
    <br />
    <input type="hidden" id="HI-URL" name="URL" value="http://helpimprove.us/" />
    <input id="HI-Submit" type="submit" value="Send Feedback" class="button" />
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $('#HI-Link').click(function (evt) {
            $('#HI-Form').toggle();
            $('#HI-Message').focus();
            evt.preventDefault();
        });
        $('#HI-URL').val(window.location);
        $('#HI-Form').submit(function (evt) {
            $.getScript('http://helpimprove.us/feedback/give.jsonp?callback=HIGiveFinished&' + $('#HI-Form').serialize());
            evt.preventDefault();
        });
        function HIGiveFinished(data) {
            if (data && data.success) {
                $('#HI-Form').toggle()[0].reset();
                alert('Thank you! We will act on your feedback right away!');
            }
            else {
                alert('Whoops! Our feedback system is broken. Would you email [email protected] instead? We want to know what is on your mind!');
                // You can see the error message in "data.results".
            }
        }
    </script>
</div>