Ghost/ghost/admin/app/components/settings/integrations/webhook-form-modal.hbs

<div class="modal-content" data-test-modal="webhook-form">
    <header class="modal-header" data-test-modal="webhook-form">
        <h1 data-test-text="title">{{if @data.webhook.isNew "New" "Edit"}} webhook</h1>
    </header>
    <button class="close" href title="Close" type="button" {{on "click" @close}} {{on "mousedown" this.noop}}>
        {{svg-jar "close"}}
    </button>

    <div class="modal-body">
        <fieldset>
            <GhFormGroup @errors={{@data.webhook.errors}} @hasValidated={{@data.webhook.hasValidated}} @property="name">
                <label for="webhook-name" class="fw6">Name</label>
                <input
                    type="text"
                    value={{@data.webhook.name}}
                    id="webhook-name"
                    class="gh-input mt1"
                    autocapitalize="off"
                    autocorrect="off"
                    {{autofocus}}
                    {{on "input" (fn this.setProperty "name")}}
                    {{on "blur" (fn this.validate "name")}}
                    data-test-input="webhook-name"
                />
                <GhErrorMessage @errors={{@data.webhook.errors}} @property="name" data-test-error="webhook-name" />
            </GhFormGroup>
        </fieldset>
        <fieldset>
            <GhFormGroup @errors={{@data.webhook.errors}} @hasValidated={{@data.webhook.hasValidated}} @property="event">
                <label for="webhook-event" class="fw6">Event</label>
                <span class="gh-select">
                    <OneWaySelect
                        @value={{@data.webhook.event}}
                        @options={{this.availableEvents}}
                        @optionValuePath="event"
                        @optionLabelPath="name"
                        @optionTargetPath="event"
                        @groupLabelPath="group"
                        @class="mt1"
                        @includeBlank={{true}}
                        @prompt="Select an event"
                        @update={{this.selectEvent}}
                        @id="webhook-event"
                        @name="event"
                        data-test-select="webhook-event" />
                    {{svg-jar "arrow-down-small"}}
                </span>
                <GhErrorMessage @errors={{@data.webhook.errors}} @property="event" data-test-error="webhook-event" />
            </GhFormGroup>
        </fieldset>
        <fieldset>
            <GhFormGroup @errors={{@data.webhook.errors}} @hasValidated={{@data.webhook.hasValidated}} @property="targetUrl">
                <label for="webhook-targetUrl" class="fw6">Target URL</label>
                <input
                    type="text"
                    value={{@data.webhook.targetUrl}}
                    id="webhook-targetUrl"
                    class="gh-input mt1"
                    placeholder="https://example.com"
                    autocapitalize="off"
                    autocorrect="off"
                    {{on "input" (fn this.setProperty "targetUrl")}}
                    {{on "blur" (fn this.validate "targetUrl")}}
                    data-test-input="webhook-targetUrl"
                />
                <GhErrorMessage @errors={{@data.webhook.errors}} @property="targetUrl" data-test-error="webhook-targetUrl" />
            </GhFormGroup>
        </fieldset>
        {{#if (enable-developer-experiments)}}
            <fieldset>
                <GhFormGroup @errors={{@data.webhook.errors}} @hasValidated={{@data.webhook.hasValidated}} @property="secret">
                    <label for="webhook-secret" class="fw6">Secret</label>
                    <input
                        type="text"
                        value={{@data.webhook.secret}}
                        id="webhook-secret"
                        class="gh-input mt1"
                        placeholder="https://example.com"
                        autocapitalize="off"
                        autocorrect="off"
                        {{on "input" (fn this.setProperty "secret")}}
                        {{on "blur" (fn this.validate "secret")}}
                        data-test-input="webhook-secret"
                    />
                    <GhErrorMessage @errors={{@data.webhook.errors}} @property="secret" data-test-error="webhook-secret" />
                </GhFormGroup>
            </fieldset>
        {{/if}}
        {{#if this.error}}
            <p class="red">{{this.error}}</p>
        {{/if}}
    </div>

    <div class="modal-footer">
        <button
            class="gh-btn" data-test-button="cancel-webhook" type="button" {{on "click" @close}}
            {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
            {{on "mousedown" this.noop}}
        >
            <span>Cancel</span>
        </button>
        <GhTaskButton
            @buttonText={{this.buttonText}}
            @successText={{this.successText}}
            @task={{this.saveWebhookTask}}
            @class="gh-btn gh-btn-black gh-btn-icon"
            data-test-button="save-webhook" />
    </div>
</div>