diff --git a/app/static/js/hosts.js b/app/static/js/hosts.js
index 9ceee6d1d8fea9c78d05be7c0a4c31ff93446523..96df16c202fe237f4f406fc5280b6b620f12a435 100644
--- a/app/static/js/hosts.js
+++ b/app/static/js/hosts.js
@@ -69,14 +69,12 @@ $(document).ready(function() {
     update_device_type_attributes();
   });
 
-  // Prefill interface name with hostname
-  $("#name").keyup(function(event) {
-    var hostname = $(this).val();
+  // The interface name field is hidden in the create host form
+  // because it should be forced to the hostname
+  // Do that when submitting the form
+  $("#hostForm").submit(function(event) {
+    var hostname = $("#name").val();
     $("#interface_name").val(hostname);
-    // If an invalid hostname was submitted, the interface name
-    // will be invalid as well
-    // Remove the invalid messages when starting typing a new name
-    $("#interface_name").removeClass("is-invalid");
   });
 
   // Fill MAC address on page load
diff --git a/app/templates/network/create_host.html b/app/templates/network/create_host.html
index 0f8547678c9f5aee845eba44aa9620962bb7af78..f228a9d305d7ad40ce9bb217b57991ef4a8f895c 100644
--- a/app/templates/network/create_host.html
+++ b/app/templates/network/create_host.html
@@ -6,13 +6,13 @@
 {% block hosts_main %}
   <form id="hostForm" method="POST">
     {{ form.hidden_tag() }}
+    {{ form.interface_name(type="hidden") }}
     {{ render_field(form.name, class_="text-lowercase") }}
     {{ render_field(form.device_type_id) }}
     {{ render_field(form.description) }}
     {{ render_field(form.item_id, disabled=True) }}
     {{ render_field(form.network_id) }}
     {{ render_field(form.ip) }}
-    {{ render_field(form.interface_name, class_="text-lowercase") }}
     {{ render_field(form.random_mac) }}
     {{ render_field(form.mac_address) }}
     {{ render_field(form.cnames_string) }}