diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 03efd2fdbe..bda8f30da6 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent, ChangeEvent} from 'react'
+import React, {Component, ChangeEvent} from 'react'
 import {findDOMNode} from 'react-dom'
 import {
   DragSourceSpec,
@@ -112,7 +112,7 @@ function MyDragSource(dragv1, dragv2, dragfunc1) {
     isDragging: monitor.isDragging(),
   })
 )
-export default class GraphOptionsCustomizableField extends PureComponent<
+export default class GraphOptionsCustomizableField extends Component<
   GraphOptionsCustomizableFieldProps
 > {
   constructor(props) {
diff --git a/ui/src/kapacitor/components/KapacitorForm.tsx b/ui/src/kapacitor/components/KapacitorForm.tsx
index 0a52aac211..01f24472ba 100644
--- a/ui/src/kapacitor/components/KapacitorForm.tsx
+++ b/ui/src/kapacitor/components/KapacitorForm.tsx
@@ -1,11 +1,11 @@
-import React, {ChangeEvent, MouseEvent, SFC} from 'react'
+import React, {ChangeEvent, MouseEvent, PureComponent} from 'react'
 
 import AlertOutputs from 'src/kapacitor/components/AlertOutputs'
 import Input from 'src/kapacitor/components/KapacitorFormInput'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
-import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
 import {Kapacitor, Source} from 'src/types'
+import KapacitorFormSkipVerify from 'src/kapacitor/components/KapacitorFormSkipVerify'
 
 export interface Notification {
   id?: string
@@ -30,125 +30,149 @@ interface Props {
   notify: (message: Notification | NotificationFunc) => void
 }
 
-const KapacitorForm: SFC<Props> = ({
-  onChangeUrl,
-  onReset,
-  kapacitor,
-  kapacitor: {url, name, username, password, insecureSkipVerify},
-  onSubmit,
-  exists,
-  onInputChange,
-  onCheckboxChange,
-  source,
-  hash,
-  notify,
-}) => (
-  <div className="page">
-    <div className="page-header">
-      <div className="page-header__container">
-        <div className="page-header__left">
-          <h1 className="page-header__title">{`${
-            exists ? 'Configure' : 'Add a New'
-          } Kapacitor Connection`}</h1>
+class KapacitorForm extends PureComponent<Props> {
+  public render() {
+    const {
+      onChangeUrl,
+      onReset,
+      kapacitor,
+      kapacitor: {name, username, password},
+      onSubmit,
+      exists,
+      onInputChange,
+      onCheckboxChange,
+      source,
+      hash,
+      notify,
+    } = this.props
+
+    return (
+      <div className="page">
+        <div className="page-header">
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <h1 className="page-header__title">{this.headerText}</h1>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    <FancyScrollbar className="page-contents">
-      <div className="container-fluid">
-        <div className="row">
-          <div className="col-md-3">
-            <div className="panel">
-              <div className="panel-heading">
-                <h2 className="panel-title">Connection Details</h2>
-              </div>
-              <div className="panel-body">
-                <form onSubmit={onSubmit}>
-                  <div>
-                    <Input
-                      name="kapaUrl"
-                      label="Kapacitor URL"
-                      value={url}
-                      placeholder={url}
-                      onChange={onChangeUrl}
-                    />
-                    <Input
-                      name="name"
-                      label="Name"
-                      value={name}
-                      placeholder={name}
-                      onChange={onInputChange}
-                      maxLength={33}
-                    />
-                    <Input
-                      name="username"
-                      label="Username"
-                      value={username || ''}
-                      placeholder={username}
-                      onChange={onInputChange}
-                    />
-                    <Input
-                      name="password"
-                      label="password"
-                      placeholder="password"
-                      value={password || ''}
-                      onChange={onInputChange}
-                      inputType="password"
-                    />
+        <FancyScrollbar className="page-contents">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-3">
+                <div className="panel">
+                  <div className="panel-heading">
+                    <h2 className="panel-title">Connection Details</h2>
                   </div>
-                  {url &&
-                    url.startsWith('https') && (
-                      <div className="form-group col-xs-12">
-                        <div className="form-control-static">
-                          <input
-                            type="checkbox"
-                            id="insecureSkipVerifyCheckbox"
-                            name="insecureSkipVerify"
-                            checked={insecureSkipVerify}
-                            onChange={onCheckboxChange}
-                          />
-                          <label htmlFor="insecureSkipVerifyCheckbox">
-                            Unsafe SSL
-                          </label>
-                        </div>
-                        <label className="form-helper">
-                          {insecureSkipVerifyText}
-                        </label>
+                  <div className="panel-body">
+                    <form onSubmit={onSubmit}>
+                      <div>
+                        <Input
+                          name="kapaUrl"
+                          label="Kapacitor URL"
+                          value={this.url}
+                          placeholder={this.url}
+                          onChange={onChangeUrl}
+                        />
+                        <Input
+                          name="name"
+                          label="Name"
+                          value={name}
+                          placeholder={name}
+                          onChange={onInputChange}
+                          maxLength={33}
+                        />
+                        <Input
+                          name="username"
+                          label="Username"
+                          value={username || ''}
+                          placeholder={username}
+                          onChange={onInputChange}
+                        />
+                        <Input
+                          name="password"
+                          label="password"
+                          placeholder="password"
+                          value={password || ''}
+                          onChange={onInputChange}
+                          inputType="password"
+                        />
                       </div>
-                    )}
-                  <div className="form-group form-group-submit col-xs-12 text-center">
-                    <button
-                      className="btn btn-default"
-                      type="button"
-                      onClick={onReset}
-                      data-test="reset-button"
-                    >
-                      Reset
-                    </button>
-                    <button
-                      className="btn btn-success"
-                      type="submit"
-                      data-test="submit-button"
-                    >
-                      {exists ? 'Update' : 'Connect'}
-                    </button>
+                      {this.isSecure && (
+                        <KapacitorFormSkipVerify
+                          kapacitor={kapacitor}
+                          onCheckboxChange={onCheckboxChange}
+                        />
+                      )}
+                      <div className="form-group form-group-submit col-xs-12 text-center">
+                        <button
+                          className="btn btn-default"
+                          type="button"
+                          onClick={onReset}
+                          data-test="reset-button"
+                        >
+                          Reset
+                        </button>
+                        <button
+                          className="btn btn-success"
+                          type="submit"
+                          data-test="submit-button"
+                        >
+                          {this.buttonText}
+                        </button>
+                      </div>
+                    </form>
                   </div>
-                </form>
+                </div>
+              </div>
+              <div className="col-md-9">
+                <AlertOutputs
+                  hash={hash}
+                  exists={exists}
+                  source={source}
+                  kapacitor={kapacitor}
+                  notify={notify}
+                />
               </div>
             </div>
           </div>
-          <div className="col-md-9">
-            <AlertOutputs
-              hash={hash}
-              exists={exists}
-              source={source}
-              kapacitor={kapacitor}
-              notify={notify}
-            />
-          </div>
-        </div>
+        </FancyScrollbar>
       </div>
-    </FancyScrollbar>
-  </div>
-)
+    )
+  }
+
+  private get buttonText(): string {
+    const {exists} = this.props
+
+    if (exists) {
+      return 'Update'
+    }
+
+    return 'Connect'
+  }
+
+  private get headerText(): string {
+    const {exists} = this.props
+
+    let prefix = 'Add a New'
+    if (exists) {
+      prefix = 'Configure'
+    }
+
+    return `${prefix} Kapacitor Connection`
+  }
+
+  private get url(): string {
+    const {kapacitor: {url}} = this.props
+    if (url) {
+      return url
+    }
+
+    return ''
+  }
+
+  private get isSecure(): boolean {
+    return this.url.startsWith('https')
+  }
+}
 
 export default KapacitorForm
diff --git a/ui/src/kapacitor/components/KapacitorFormSkipVerify.tsx b/ui/src/kapacitor/components/KapacitorFormSkipVerify.tsx
new file mode 100644
index 0000000000..b73cd480be
--- /dev/null
+++ b/ui/src/kapacitor/components/KapacitorFormSkipVerify.tsx
@@ -0,0 +1,31 @@
+import React, {SFC, ChangeEvent} from 'react'
+import {Kapacitor} from 'src/types'
+import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
+
+interface Props {
+  kapacitor: Kapacitor
+  onCheckboxChange: (e: ChangeEvent<HTMLInputElement>) => void
+}
+
+const KapacitorFormSkipVerify: SFC<Props> = ({
+  kapacitor: {insecureSkipVerify},
+  onCheckboxChange,
+}) => {
+  return (
+    <div className="form-group col-xs-12">
+      <div className="form-control-static">
+        <input
+          type="checkbox"
+          id="insecureSkipVerifyCheckbox"
+          name="insecureSkipVerify"
+          checked={insecureSkipVerify}
+          onChange={onCheckboxChange}
+        />
+        <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
+      </div>
+      <label className="form-helper">{insecureSkipVerifyText}</label>
+    </div>
+  )
+}
+
+export default KapacitorFormSkipVerify