diff --git a/app/assets/stylesheets/new_design/common.scss b/app/assets/stylesheets/new_design/common.scss
index 7855cb076..b4e213382 100644
--- a/app/assets/stylesheets/new_design/common.scss
+++ b/app/assets/stylesheets/new_design/common.scss
@@ -6,7 +6,8 @@
 
 body,
 input,
-textarea {
+textarea,
+select {
   @extend %new-type;
   font-size: 16px;
   line-height: 1.42857143;
diff --git a/app/assets/stylesheets/new_design/dossier-link.scss b/app/assets/stylesheets/new_design/dossier-link.scss
new file mode 100644
index 000000000..5cb9aaa6e
--- /dev/null
+++ b/app/assets/stylesheets/new_design/dossier-link.scss
@@ -0,0 +1,17 @@
+@import "constants";
+@import "colors";
+
+.dossier-link {
+  .help-block > p {
+    margin-top: - $default-padding;
+    margin-bottom: 2 * $default-padding;
+  }
+
+  .text-info {
+    color: $blue;
+  }
+
+  .text-warning {
+    color: $dark-red;
+  }
+}
diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 50a56c464..14f8d13cb 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -17,12 +17,15 @@
   input[type=text],
   input[type=email],
   input[type=password],
-  textarea {
+  input[type=date],
+  input[type=number],
+  input[type=tel],
+  textarea,
+  select {
     display: block;
-    width: 100%;
     border-radius: 4px;
     border: solid 1px $border-grey;
-    margin-bottom: 4 * $default-spacer;
+    margin-bottom: 2 * $default-padding;
     padding: $default-padding;
 
     &:disabled {
@@ -30,6 +33,60 @@
     }
   }
 
+  input[type=text],
+  input[type=email],
+  input[type=password],
+  input[type=date],
+  input[type=number],
+  input[type=tel],
+  textarea {
+    width: 100%;
+  }
+
+  input[type=email],
+  input[type=number],
+  input[type=tel], {
+    max-width: 500px;
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    margin-bottom: 2 * $default-padding;
+  }
+
+  input[type=date] {
+    max-width: 180px;
+  }
+
+  .datetime {
+    input[type=date] {
+      display: inline-block;
+    }
+
+    select {
+      display: inline-block;
+    }
+  }
+
+  .header-section {
+    color: #4393F3;
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: 2 * $default-padding;
+  }
+
+  .explication-libelle {
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: $default-padding;
+  }
+
+  .explication {
+    background-color: $light-grey;
+    padding: $default-padding;
+    margin-bottom: 2 * $default-padding;
+  }
+
   .send {
     float: right;
     margin-bottom: $default-padding;
diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb
index b65437fa7..8d5cfec18 100644
--- a/app/controllers/root_controller.rb
+++ b/app/controllers/root_controller.rb
@@ -32,5 +32,41 @@ class RootController < ApplicationController
   end
 
   def patron
+    @all_champs = TypeDeChamp.type_champs
+      .map { |name, _| TypeDeChamp.new(type_champ: name, libelle: name) }
+      .map { |type_de_champ| Champ.new(type_de_champ: type_de_champ) }
+      .map.with_index do |champ, i|
+        champ.id = i
+        champ
+      end
+
+    @all_champs
+      .select { |champ| champ.type_champ == 'header_section' }
+      .each { |champ| champ.type_de_champ.libelle = 'un super titre de section' }
+
+    @all_champs
+      .select { |champ| %w(drop_down_list multiple_drop_down_list).include?(champ.type_champ) }
+      .each do |champ|
+        champ.type_de_champ.drop_down_list = DropDownList.new(type_de_champ: champ.type_de_champ)
+        champ.drop_down_list.value =
+"option A
+option B
+-- avant l'option C --
+option C"
+        champ.value = '["option B", "option C"]'
+      end
+
+    type_champ_values = {
+      'date': '2016-07-26',
+      'datetime': '26/07/2016 07:35',
+      'textarea': 'Une description de mon projet',
+      'explication': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet',
+    }
+
+    type_champ_values.each do |(type_champ, value)|
+      @all_champs
+        .select { |champ| champ.type_champ == type_champ.to_s }
+        .each { |champ| champ.value = value }
+    end
   end
 end
diff --git a/app/models/drop_down_list.rb b/app/models/drop_down_list.rb
index 979112f4c..150bebb73 100644
--- a/app/models/drop_down_list.rb
+++ b/app/models/drop_down_list.rb
@@ -14,6 +14,10 @@ class DropDownList < ActiveRecord::Base
     champ.object.value.blank? ? [] : multiple ? JSON.parse(champ.object.value) : [champ.object.value]
   end
 
+  def selected_options_without_decorator(champ)
+    champ.value.blank? ? [] : multiple ? JSON.parse(champ.value) : [champ.value]
+  end
+
   def multiple
     type_de_champ.type_champ == 'multiple_drop_down_list'
   end
diff --git a/app/views/new_gestionnaire/dossiers/champs/_address.html.haml b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml
new file mode 100644
index 000000000..34f1ce5e9
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_address.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'text',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }
diff --git a/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml b/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml
new file mode 100644
index 000000000..e99954f45
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml
@@ -0,0 +1 @@
+%label{ for: :"champs_#{champ.id}" }>= champ.libelle
diff --git a/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml b/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml
new file mode 100644
index 000000000..5722da3bc
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml
@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'checkbox',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  checked: ('checked' if champ.value == 'on') }
+
+%br
diff --git a/app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml b/app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml
new file mode 100644
index 000000000..734cf98ac
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml
@@ -0,0 +1,10 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%div
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "M.", champ.value == 'Mme' ? false : true
+    Monsieur
+
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "Mme", champ.value == 'Mme'
+    Madame
diff --git a/app/views/new_gestionnaire/dossiers/champs/_date.html.haml b/app/views/new_gestionnaire/dossiers/champs/_date.html.haml
new file mode 100644
index 000000000..fc8e807ce
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_date.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ name: "champs['#{champ.id}']",
+  placeholder: "JJ/MM/AAAA",
+  id: "champs_#{champ.id}",
+  value: champ.value,
+  type: "date" }
diff --git a/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml b/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml
new file mode 100644
index 000000000..4819347a3
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml
@@ -0,0 +1,21 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+.datetime
+  %input{ name: "champs['#{champ.id}']",
+          placeholder: champ.libelle,
+          id: "champs_#{champ.id}",
+          value: (champ.value.split(/[ ][0-9]*:[0-9]*/).first unless champ.value.nil?),
+          type: 'date' }
+
+  %select{ name: "time_hour['#{champ.id}']", id: "time_hour_#{champ.id}" }
+    - (0..23).each do |num|
+      - num = "%.2i" %num
+      %option{ value: num, selected: (:selected if champ.same_hour?(num)) }
+        = num
+  h
+  %select{ name: "time_minute['#{champ.id}']", id: "time_minute_#{champ.id}" }
+    - (0..55).step(5) do |num|
+      - num = "%.2i" %num
+      %option{ value: num, selected: (:selected if champ.same_minute?(num)) }
+        = num
+  min
diff --git a/app/views/new_gestionnaire/dossiers/champs/_departements.html.haml b/app/views/new_gestionnaire/dossiers/champs/_departements.html.haml
new file mode 100644
index 000000000..8ef409bed
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_departements.html.haml
@@ -0,0 +1,4 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+= select_tag("champs['#{champ.id}']",
+  options_for_select(Champ.departements, selected: champ.value))
diff --git a/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml b/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml
new file mode 100644
index 000000000..647ab8d9e
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml
@@ -0,0 +1,22 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+- dossier = Dossier.find_by(id: champ.value)
+- show_text_summary = dossier.present?
+- show_warning = !show_text_summary && champ.value.present?
+- text_summary = dossier.try(:text_summary)
+
+.dossier-link
+  %input{ name: "champs['#{ champ.id }']",
+    placeholder: "Numéro de dossier",
+    id: "champs_#{ champ.id }",
+    value: champ.value,
+    type: 'number',
+    'autocomplete' => 'off',
+    'data-type' => 'dossier-link' }
+
+  .help-block
+    %p.text-info{ style: show_text_summary ? nil : 'display: none;' }
+      %span.dossier-text-summary= text_summary
+
+    %p.text-warning{ style: show_warning ? nil : 'display: none;' }
+      Ce dossier est inconnu
diff --git a/app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml b/app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml
new file mode 100644
index 000000000..c915b1797
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml
@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+- if champ.drop_down_list && champ.drop_down_list.options.any?
+  = select_tag("champs['#{champ.id}']",
+    options_for_select(champ.drop_down_list.options,
+      selected: champ.drop_down_list.selected_options_without_decorator(champ),
+      disabled: champ.drop_down_list.disabled_options),
+      multiple: false)
diff --git a/app/views/new_gestionnaire/dossiers/champs/_email.html.haml b/app/views/new_gestionnaire/dossiers/champs/_email.html.haml
new file mode 100644
index 000000000..727d092e4
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_email.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'email',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }
diff --git a/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml b/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml
new file mode 100644
index 000000000..5722da3bc
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml
@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'checkbox',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  checked: ('checked' if champ.value == 'on') }
+
+%br
diff --git a/app/views/new_gestionnaire/dossiers/champs/_explication.html.haml b/app/views/new_gestionnaire/dossiers/champs/_explication.html.haml
new file mode 100644
index 000000000..0baedbbae
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_explication.html.haml
@@ -0,0 +1,2 @@
+%h2.explication-libelle= champ.libelle
+%p.explication= champ.value
diff --git a/app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml b/app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml
new file mode 100644
index 000000000..16c6c6c9f
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml
@@ -0,0 +1,2 @@
+%h2.header-section
+  = champ.libelle
diff --git a/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml b/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml
new file mode 100644
index 000000000..2ca3fabed
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml
@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+- if champ.drop_down_list && champ.drop_down_list.options.any?
+  = select_tag("champs['#{champ.id}']",
+    options_for_select(champ.drop_down_list.options,
+      selected: champ.drop_down_list.selected_options_without_decorator(champ),
+      disabled: champ.drop_down_list.disabled_options),
+      multiple: true)
diff --git a/app/views/new_gestionnaire/dossiers/champs/_number.html.haml b/app/views/new_gestionnaire/dossiers/champs/_number.html.haml
new file mode 100644
index 000000000..dd66c4e8f
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_number.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'number',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }
diff --git a/app/views/new_gestionnaire/dossiers/champs/_pays.html.haml b/app/views/new_gestionnaire/dossiers/champs/_pays.html.haml
new file mode 100644
index 000000000..96962d7dc
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_pays.html.haml
@@ -0,0 +1,4 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+= select_tag("champs['#{champ.id}']",
+  options_for_select(Champ.pays, selected: champ.value))
diff --git a/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml b/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml
new file mode 100644
index 000000000..fcc6e043e
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_phone.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'tel',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }
diff --git a/app/views/new_gestionnaire/dossiers/champs/_regions.html.haml b/app/views/new_gestionnaire/dossiers/champs/_regions.html.haml
new file mode 100644
index 000000000..ad4cf5531
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_regions.html.haml
@@ -0,0 +1,4 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+= select_tag("champs['#{champ.id}']",
+  options_for_select(Champ.regions, selected: champ.value))
diff --git a/app/views/new_gestionnaire/dossiers/champs/_text.html.haml b/app/views/new_gestionnaire/dossiers/champs/_text.html.haml
new file mode 100644
index 000000000..34f1ce5e9
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_text.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'text',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }
diff --git a/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml b/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml
new file mode 100644
index 000000000..4f057c115
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml
@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%textarea{ name: "champs['#{champ.id}']",
+  placeholder: champ.description,
+  id: "champs_#{champ.id}",
+  row: '6' }
+  = sanitize(champ.value)
diff --git a/app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml b/app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml
new file mode 100644
index 000000000..802595b19
--- /dev/null
+++ b/app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml
@@ -0,0 +1,10 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%div
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "true", champ.value == 'true'
+    Oui
+
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "false", champ.value == 'false'
+    Non
diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml
index 1c417081c..762c9a6a0 100644
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@@ -3,10 +3,8 @@
     %h1 Formulaires
 
     %form.form
-      %label Nom
-      %input{ type: "text" }
-      %textarea{ placeholder: "Description de votre projet" }
-      %label Mot de passe
+      - @all_champs.each do |champ|
+        = render partial: "new_gestionnaire/dossiers/champs/#{champ.type_champ}", locals: { champ: champ }
       %input{ type: "password", value: "12345678" }
       %input.button.send{ type: "submit", value: "Envoyer" }