healthchecks_healthchecks/templates/front/add_check_modal.html

<div id="add-check-modal" class="modal simple with-slug-suggestions">
    <div class="modal-dialog">
        <form class="form-horizontal" method="post" action="{% url 'hc-add-check' project.code %}">
            {% csrf_token %}
            <input type="hidden" name="timeout" value="86400" />
            <input type="hidden" name="grace" value="3600" />

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Add Check</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="add-check-name" class="col-sm-3 control-label">
                            Name
                        </label>
                        <div class="col-sm-9">
                            <input
                                id="add-check-name"
                                name="name"
                                type="text"
                                maxlength="100"
                                class="form-control" />
                            <span class="help-block">
                                Give this check a human-friendly name.
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="add-check-slug" class="col-sm-3 control-label">
                            Slug
                        </label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input
                                    id="add-check-slug"
                                    name="slug"
                                    type="text"
                                    maxlength="100"
                                    value="{{ check.slug }}"
                                    pattern="[a-z0-9_\-]+"
                                    class="form-control" />
                                <span class="input-group-btn">
                                    <button
                                        class="btn btn-default use-suggested-slug"
                                        type="button">Use Suggested</button>
                                </span>
                            </div>
                            <span class="help-block slug-help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="add-check-tags" class="col-sm-3 control-label">
                            Tags
                        </label>
                        <div class="col-sm-9">
                            <input
                                id="add-check-tags"
                                name="tags"
                                type="text"
                                maxlength="500" />
                            <span class="help-block">
                                Separate multiple tags with spaces.
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            Schedule
                        </label>
                        <div id="add-check-kind" class="col-sm-9">
                            <label class="radio-container">
                                <input type="radio" name="kind" value="simple" checked>
                                <span class="radiomark"></span>
                                Simple
                            </label>
                            <label class="radio-container">
                                <input type="radio" name="kind" value="cron">
                                <span class="radiomark"></span>
                                Cron
                            </label>
                            <label class="radio-container">
                                <input type="radio" name="kind" value="oncalendar">
                                <span class="radiomark"></span>
                                OnCalendar
                            </label>
                        </div>
                    </div>

                    <div class="form-group create-simple-extra">
                        <label for="add-check-period" class="col-sm-3 control-label">
                            Period
                        </label>
                        <div class="col-sm-9">
                            <input
                                id="add-check-period"
                                type="number"
                                min="1"
                                class="form-control period-input"
                                value="1" />
                            <select id="add-check-period-unit" class="form-control period-input">
                                <option value="60">minutes</option>
                                <option value="3600">hours</option>
                                <option value="86400" selected>days</option>
                            </select>
                            <span class="help-block">
                                The expected time between pings.
                            </span>
                        </div>
                    </div>

                    <div class="form-group create-cron-extra">
                        <label for="add-check-schedule" class="col-sm-3 control-label">
                            Cron Expression
                        </label>
                        <div class="col-sm-9">
                            <input
                                id="add-check-schedule"
                                name="schedule"
                                type="text"
                                maxlength="100"
                                value="* * * * *"
                                class="form-control" />
                            <span class="help-block">
                                <code>m h dom mon dow</code>
                            </span>
                        </div>
                    </div>

                    <div class="form-group create-oncalendar-extra">
                        <label for="add-check-schedule-oncalendar" class="col-sm-3 control-label">
                            OnCalendar Expression(s)
                        </label>
                        <div class="col-sm-9">
                            <textarea
                                id="add-check-schedule-oncalendar"
                                name="schedule"
                                class="form-control"
                                rows="3"
                                maxlength="100">*-*-* *:*:*</textarea>
                        </div>
                    </div>

                    <div class="form-group create-cron-extra create-oncalendar-extra">
                        <label for="add-check-tz" class="col-sm-3 control-label">
                            Time Zone
                        </label>
                        <div class="col-sm-9">
                            <select id="add-check-tz" name="tz" class="form-control"></select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="add-check-grace" class="col-sm-3 control-label">
                            Grace Time
                        </label>
                        <div class="col-sm-9">
                            <input
                                id="add-check-grace"
                                type="number"
                                min="1"
                                class="form-control grace-input"
                                value="1" />
                            <select id="add-check-grace-unit" class="form-control grace-input">
                                <option value="60">minutes</option>
                                <option value="3600" selected>hours</option>
                                <option value="86400">days</option>
                            </select>
                            <span class="help-block">
                                When a check is late, or has received a "start" signal, how long to wait to send an alert.
                            </span>
                        </div>
                    </div>
                </div> <!-- modal-body -->

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button id="add-check-submit" type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>