diff --git a/app/assets/javascripts/import/fogbugz/app.vue b/app/assets/javascripts/import/fogbugz/app.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d7637c7ae9bc06c36c8e73bef5094bb485945f4d
--- /dev/null
+++ b/app/assets/javascripts/import/fogbugz/app.vue
@@ -0,0 +1,74 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    MultiStepFormTemplate,
+  },
+  props: {
+    backButtonPath: {
+      type: String,
+      required: true,
+    },
+    formPath: {
+      type: String,
+      required: true,
+    },
+  },
+  csrf,
+};
+</script>
+
+<template>
+  <form method="post" :action="formPath">
+    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+    <multi-step-form-template
+      :title="s__('ProjectsNew|Import projects from FogBugz')"
+      :current-step="3"
+      :steps-total="4"
+    >
+      <template #form>
+        <gl-form-group :label="s__('ProjectsNew|FogBugz URL')" label-for="uri">
+          <gl-form-input
+            id="uri"
+            name="uri"
+            required
+            :placeholder="s__('ProjectsNew|https://mycompany.fogbugz.com')"
+          />
+        </gl-form-group>
+        <gl-form-group :label="__('Email')" label-for="email">
+          <gl-form-input id="email" name="email" required :placeholder="__('Your email')" />
+        </gl-form-group>
+        <gl-form-group :label="__('Password')" label-for="password">
+          <gl-form-input
+            id="password"
+            name="password"
+            required
+            type="password"
+            :placeholder="__('Your password')"
+          />
+        </gl-form-group>
+      </template>
+      <template #back>
+        <gl-button
+          category="primary"
+          variant="default"
+          :href="backButtonPath"
+          data-testid="back-button"
+        >
+          {{ __('Go back') }}
+        </gl-button>
+      </template>
+      <template #next>
+        <gl-button type="submit" category="primary" variant="confirm" data-testid="next-button">
+          {{ __('Next step') }}
+        </gl-button>
+      </template>
+    </multi-step-form-template>
+  </form>
+</template>
diff --git a/app/assets/javascripts/import/fogbugz/index.js b/app/assets/javascripts/import/fogbugz/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..011a1a76ee7ca8082322c8651f0928b80b247201
--- /dev/null
+++ b/app/assets/javascripts/import/fogbugz/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import App from './app.vue';
+
+export function initFogbugzImportProjectForm() {
+  const el = document.getElementById('js-vue-import-fogbugz-project-app');
+
+  if (!el) {
+    return null;
+  }
+
+  const { backButtonPath, formPath } = el.dataset;
+
+  const props = { backButtonPath, formPath };
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(App, { props });
+    },
+  });
+}
diff --git a/app/assets/javascripts/pages/import/fogbugz/new/index.js b/app/assets/javascripts/pages/import/fogbugz/new/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..62f615ea84ad810df13401e3e52e2a009e49b598
--- /dev/null
+++ b/app/assets/javascripts/pages/import/fogbugz/new/index.js
@@ -0,0 +1,3 @@
+import { initFogbugzImportProjectForm } from '~/import/fogbugz';
+
+initFogbugzImportProjectForm();
diff --git a/app/views/import/fogbugz/new.html.haml b/app/views/import/fogbugz/new.html.haml
index f05d7be6dbd0af2db5d40f1ce8e8a02d216c5a73..a04732f0b7d56b919158533ec3a82d5b79b47330 100644
--- a/app/views/import/fogbugz/new.html.haml
+++ b/app/views/import/fogbugz/new.html.haml
@@ -2,27 +2,33 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')
 
-%h1.page-title.gl-text-size-h-display.gl-flex.gl-items-center
-  .gl-flex.gl-items-center.gl-justify-center
-    = sprite_icon('bug', css_class: 'gl-mr-3', size: 48)
-  = _('Import projects from FogBugz')
-%hr
+- if Feature.enabled?(:new_project_creation_form, @user)
+  #js-vue-import-fogbugz-project-app{ data: {
+    back_button_path: new_project_path(anchor: 'import_project'),
+    form_path: callback_import_fogbugz_path(namespace_id: params[:namespace_id])
+  } }
+- else
+  %h1.page-title.gl-text-size-h-display.gl-flex.gl-items-center
+    .gl-flex.gl-items-center.gl-justify-center
+      = sprite_icon('bug', css_class: 'gl-mr-3', size: 48)
+    = _('Import projects from FogBugz')
+  %hr
 
-= form_tag callback_import_fogbugz_path(namespace_id: params[:namespace_id]) do
-  %p
-    = _("To get started you enter your FogBugz URL and login information below. In the next steps, you'll be able to map users and select the projects you want to import.")
-  .form-group.row
-    = label_tag :uri, _('FogBugz URL'), class: 'col-form-label col-md-2'
-    .col-md-4
-      = text_field_tag :uri, nil, placeholder: 'https://mycompany.fogbugz.com', class: 'form-control gl-form-input'
-  .form-group.row
-    = label_tag :email, _('FogBugz Email'), class: 'col-form-label col-md-2'
-    .col-md-4
-      = text_field_tag :email, nil, class: 'form-control gl-form-input'
-  .form-group.row
-    = label_tag :password, _('FogBugz Password'), class: 'col-form-label col-md-2'
-    .col-md-4
-      = password_field_tag :password, nil, class: 'form-control gl-form-input'
-  .form-actions
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm) do
-      = _('Continue to the next step')
+  = form_tag callback_import_fogbugz_path(namespace_id: params[:namespace_id]) do
+    %p
+      = _("To get started you enter your FogBugz URL and login information below. In the next steps, you'll be able to map users and select the projects you want to import.")
+    .form-group.row
+      = label_tag :uri, _('FogBugz URL'), class: 'col-form-label col-md-2'
+      .col-md-4
+        = text_field_tag :uri, nil, placeholder: 'https://mycompany.fogbugz.com', class: 'form-control gl-form-input'
+    .form-group.row
+      = label_tag :email, _('FogBugz Email'), class: 'col-form-label col-md-2'
+      .col-md-4
+        = text_field_tag :email, nil, class: 'form-control gl-form-input'
+    .form-group.row
+      = label_tag :password, _('FogBugz Password'), class: 'col-form-label col-md-2'
+      .col-md-4
+        = password_field_tag :password, nil, class: 'form-control gl-form-input'
+    .form-actions
+      = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm) do
+        = _('Continue to the next step')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c2212cd5b9d8e204fd74f405d846fb90b1b7a9ee..3a19978c33c4b0091544a545e04a8a53690613e3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -46037,6 +46037,9 @@ msgstr ""
 msgid "ProjectsNew|Experimental settings"
 msgstr ""
 
+msgid "ProjectsNew|FogBugz URL"
+msgstr ""
+
 msgid "ProjectsNew|Get started with one of our popular project templates."
 msgstr ""
 
@@ -46052,6 +46055,9 @@ msgstr ""
 msgid "ProjectsNew|Import project"
 msgstr ""
 
+msgid "ProjectsNew|Import projects from FogBugz"
+msgstr ""
+
 msgid "ProjectsNew|Import projects from Gitea"
 msgstr ""
 
@@ -46142,6 +46148,9 @@ msgstr ""
 msgid "ProjectsNew|Your project will be created at:"
 msgstr ""
 
+msgid "ProjectsNew|https://mycompany.fogbugz.com"
+msgstr ""
+
 msgid "Projects|An error occurred deleting the project. Please refresh the page to try again."
 msgstr ""
 
@@ -67444,6 +67453,9 @@ msgstr ""
 msgid "Your device was successfully set up! Give it a name and register it with the GitLab server."
 msgstr ""
 
+msgid "Your email"
+msgstr ""
+
 msgid "Your feedback is important to us 👋"
 msgstr ""
 
diff --git a/spec/frontend/import/fogbugz/app_spec.js b/spec/frontend/import/fogbugz/app_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..a18508657d1102cd7aa6b87585c010d62315dce3
--- /dev/null
+++ b/spec/frontend/import/fogbugz/app_spec.js
@@ -0,0 +1,42 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import App from '~/import/fogbugz/app.vue';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+describe('Import from FugBugz app', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(App, {
+      propsData: {
+        backButtonPath: '/projects/new#import_project',
+        formPath: '/import/fogbugz/callback',
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findMultiStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findBackButton = () => wrapper.findByTestId('back-button');
+  const findNextButton = () => wrapper.findByTestId('next-button');
+
+  it('renders a form', () => {
+    expect(findMultiStepForm().exists()).toBe(true);
+  });
+
+  describe('back button', () => {
+    it('renders a back button', () => {
+      expect(findBackButton().exists()).toBe(true);
+      expect(findBackButton().attributes('href')).toBe('/projects/new#import_project');
+    });
+  });
+
+  describe('next button', () => {
+    it('renders a next button', () => {
+      expect(findNextButton().exists()).toBe(true);
+      expect(findNextButton().attributes('type')).toBe('submit');
+    });
+  });
+});