diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 00000000..9e9cadc5
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,6 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v2.7.1"
+    hooks:
+      - id: prettier
+        args: ["--write", "src/**", "*.js", "*.json"]
diff --git a/public/index.html b/public/index.html
index 99edcbf0..50fcef1c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,7 +20,12 @@ <h2>Search</h2>
 
     <p>Nothing to see here, just a placeholder to put the <code>readthedocs-search</code> tag.</p>
     <p>Currently, it modifies the tag to be shown when pressing <code>\</code> (keycode 220) instead of <code>/</code> (keycode 191)</p>
-    <readthedocs-search show-modal-keycode="220"></readthedocs-search>
+    <readthedocs-search
+        trigger-keycode="220"
+        trigger-selector="#search-input"
+    ></readthedocs-search>
+
+    <p>Clicking in the following input should show the search modal: <input id="search-input" placeholder="Search docs" /></p>
 
     <h2>Notification</h2>
 
diff --git a/src/search.js b/src/search.js
index 38c29f71..fe0764ce 100644
--- a/src/search.js
+++ b/src/search.js
@@ -41,7 +41,9 @@ export class SearchElement extends LitElement {
       state: true,
     },
     cssFormFocusClasses: { state: true },
-    showModalKeycode: { type: Number, attribute: "show-modal-keycode" },
+    triggerKeycode: { type: Number, attribute: "trigger-keycode" },
+    triggerSelector: { type: String, attribute: "trigger-selector" },
+    triggerEvent: { type: String, attribute: "trigger-event" },
   };
 
   static styles = styleSheet;
@@ -64,7 +66,9 @@ export class SearchElement extends LitElement {
     this.currentQueryRequest = null;
     this.defaultFilter = null;
     this.filters = [];
-    this.showModalKeycode = 191;
+    this.triggerKeycode = 191;
+    this.triggerSelector = null;
+    this.triggerEvent = "focusin";
   }
 
   loadConfig(config) {
@@ -483,20 +487,43 @@ export class SearchElement extends LitElement {
       this.closeModal();
     }
     // Show the modal with `/`
-    else if (e.keyCode === this.showModalKeycode && !this.show) {
+    else if (e.keyCode === this.triggerKeycode && !this.show) {
       // prevent opening "Quick Find" in Firefox
       e.preventDefault();
       this.showModal();
     }
   };
 
+  _handleShowModalUser = (e) => {
+    e.preventDefault();
+    this.showModal();
+  };
+
   connectedCallback() {
     super.connectedCallback();
     // open search modal if "forward slash" button is pressed
     document.addEventListener("keydown", this._handleShowModal);
+
+    if (this.triggerSelector) {
+      let element = document.querySelector(this.triggerSelector);
+      if (element !== undefined) {
+        element.addEventListener(this.triggerEvent, this._handleShowModalUser);
+      }
+    }
   }
+
   disconnectedCallback() {
     document.removeEventListener("keydown", this._handleShowModal);
+    if (this.triggerSelector) {
+      let element = document.querySelector(this.triggerSelector);
+      if (element !== undefined) {
+        element.removeEventListener(
+          this.triggerEvent,
+          this._handleShowModalUser
+        );
+      }
+    }
+
     super.disconnectedCallback();
   }
 }