diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index 97047552..69464514 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -2,7 +2,8 @@
 <div class="form-group" id="kubespawner-profiles-list">
   {%- for profile in profile_list %}
     {#- Wrap everything in a label tag so clicking anywhere selects the option #}
-    <label for="profile-item-{{ profile.slug }}" class="profile">
+    <label for="profile-item-{{ profile.slug }}"
+           class="profile js-profile-label">
       <div class="radio">
         <input type="radio"
                name="profile"
@@ -17,8 +18,10 @@ <h3>{{ profile.display_name }}</h3>
           <div>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
-                <label for="profile-option-{{ profile.slug }}-{{ k }}">{{ option.display_name }}</label>
-                <select name="profile-option-{{ profile.slug }}-{{ k }}" class="form-control">
+                <label for="profile-option-{{ profile.slug }}-{{ k }}"
+                       class="js-profile-option-label">{{ option.display_name }}</label>
+                <select name="profile-option-{{ profile.slug }}-{{ k }}"
+                        class="form-control js-profile-option-select">
                   {%- for k, choice in option['choices'].items() %}
                     <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
                   {%- endfor %}
@@ -31,3 +34,11 @@ <h3>{{ profile.display_name }}</h3>
     </label>
   {%- endfor %}
 </div>
+<script>
+  $('.js-profile-option-select, .js-profile-option-label').click(function() {
+    // we need this bit of JS to select the profile when a <select> inside is clicked.
+    $(this).parents('.js-profile-label')
+      .find('input[type=radio]')
+      .prop('checked', true);
+  });
+</script>