diff --git a/awx/ui_next/src/screens/Template/shared/SurveyQuestionAdd.jsx b/awx/ui_next/src/screens/Template/shared/SurveyQuestionAdd.jsx
index 3f420ef375..057f74e25a 100644
--- a/awx/ui_next/src/screens/Template/shared/SurveyQuestionAdd.jsx
+++ b/awx/ui_next/src/screens/Template/shared/SurveyQuestionAdd.jsx
@@ -3,13 +3,25 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 import { CardBody } from '@components/Card';
 import SurveyQuestionForm from './SurveyQuestionForm';
 
-export default function SurveyQuestionAdd({ template }) {
+export default function SurveyQuestionAdd({ survey, updateSurvey }) {
   const [formError, setFormError] = useState(null);
   const history = useHistory();
   const match = useRouteMatch();
 
-  const handleSubmit = async formData => {
-    //
+  const handleSubmit = async question => {
+    if (survey.spec.find(q => q.variable === question.variable)) {
+      setFormError(
+        new Error(`Survey already contains a question with variable named
+          “${question.variable}”`)
+      );
+      return;
+    }
+    try {
+      await updateSurvey(survey.spec.concat(question));
+      history.push(match.url.replace('/add', ''));
+    } catch (err) {
+      setFormError(err);
+    }
   };
 
   const handleCancel = () => {
@@ -21,6 +33,7 @@ export default function SurveyQuestionAdd({ template }) {
       <SurveyQuestionForm
         handleSubmit={handleSubmit}
         handleCancel={handleCancel}
+        submitError={formError}
       />
     </CardBody>
   );
diff --git a/awx/ui_next/src/screens/Template/shared/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/shared/SurveyQuestionForm.jsx
index 61b20187b3..1c9e4ba37e 100644
--- a/awx/ui_next/src/screens/Template/shared/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/SurveyQuestionForm.jsx
@@ -15,7 +15,7 @@ import FormField, {
 import AnsibleSelect from '@components/AnsibleSelect';
 import { required, noWhiteSpace, combine } from '@util/validators';
 
-function AnswerType({ i18n }) {
+function AnswerTypeField({ i18n }) {
   const [field] = useField({
     name: 'type',
     validate: required(i18n._(t`Select a value for this field`), i18n),
@@ -112,7 +112,7 @@ function SurveyQuestionForm({
                 etc.). Variable names with spaces are not allowed.`
               )}
             />
-            <AnswerType i18n={i18n} />
+            <AnswerTypeField i18n={i18n} />
             <CheckboxField
               id="question-required"
               name="required"