Title: Hide button on form input
Last modified: June 23, 2019

---

# Hide button on form input

 *  [teeboy4real](https://wordpress.org/support/users/teeboy4real/)
 * (@teeboy4real)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/hide-button-on-form-input/)
 * Hello
 * Great plugin, but how can I hide the button on input of information into a input
   field or text field. The problem is on mobile view for example when I want to
   post a blog comment or use the search bar the button overlaps over the input 
   fields. It would be best for the button to disappear when I want to post a comment
   and reappear again after posting the comment. I’m not only referring to comment
   field both all input and text form fields. For example the button overlaps the
   buddypress status and comment form.
 * Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Buttonizer](https://wordpress.org/support/users/buttonizer/)
 * (@buttonizer)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/hide-button-on-form-input/#post-11667906)
 * Hi teeboy4real,
 * Thanks for the compliment! 🙂
 * You can perhaps add a script on your footer.
    The script will be an event listener
   that will look and see if the focus is on the input.
 * If the focus is on the input, it will change the opacity of Buttonizer to zero.
   
   If the focus goes away from the input (blur), it will change the opacity back
   to a hundred.
 * Here’s a script that I made and tested:
    The input I used had the class “search-
   field”.
 *     ```
       <script>
       	document.querySelector('.search-field').addEventListener('focus', () => {
       		document.querySelector('.buttonizer').style.opacity = '0';
       	});
   
       	document.querySelector('.search-field').addEventListener('blur', () => {
       		document.querySelector('.buttonizer').style.opacity = '100';
       	});
       </script> 
       ```
   
 * Let me know if you have any questions!
    -  This reply was modified 6 years, 11 months ago by [Buttonizer](https://wordpress.org/support/users/buttonizer/).
    -  This reply was modified 6 years, 11 months ago by [Buttonizer](https://wordpress.org/support/users/buttonizer/).
    -  This reply was modified 6 years, 11 months ago by [Buttonizer](https://wordpress.org/support/users/buttonizer/).
 *  Thread Starter [teeboy4real](https://wordpress.org/support/users/teeboy4real/)
 * (@teeboy4real)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/hide-button-on-form-input/#post-12112164)
 * Hello please how do I apply this script
 *  Plugin Author [Buttonizer](https://wordpress.org/support/users/buttonizer/)
 * (@buttonizer)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/hide-button-on-form-input/#post-12122227)
 * Hi teeboy4real,
 * Here’s a newer script that should work on the latest version of Buttonizer.
 * You will need to change the “**INPUT_HERE**” into your text input’s class or 
   id. ( Don’t forget to add a # for id and . for class )
 * Then you can simply copy and paste it into your site’s header or footer! 🙂
 *     ```
       <script>
   
           // Run after Buttonizer is loaded
           function buttonizerInitialized() {
   
             // Hide Buttonizer when focus is on input
             document.querySelector("INPUT_HERE").addEventListener('focus', () => {
                 document.querySelector('.buttonizer').style.opacity = '0';
             });
   
             // Show Buttonizer
             document.querySelector("INPUT_HERE").addEventListener('blur', () => {
                 document.querySelector('.buttonizer').style.opacity = '100';
             });
   
           }
       </script>
       ```
   
    -  This reply was modified 6 years, 7 months ago by [Buttonizer](https://wordpress.org/support/users/buttonizer/).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Hide button on form input’ is closed to new replies.

 * ![](https://ps.w.org/buttonizer-multifunctional-button/assets/icon-256x256.gif?
   rev=2517499)
 * [Buttonizer - Floating Menus, Sticky Buttons, & Popup Builder](https://wordpress.org/plugins/buttonizer-multifunctional-button/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/buttonizer-multifunctional-button/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/buttonizer-multifunctional-button/)
 * [Active Topics](https://wordpress.org/support/plugin/buttonizer-multifunctional-button/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/buttonizer-multifunctional-button/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/buttonizer-multifunctional-button/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Buttonizer](https://wordpress.org/support/users/buttonizer/)
 * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/hide-button-on-form-input/#post-12122227)
 * Status: not resolved