Title: Submit button hovers over text input
Last modified: August 31, 2016

---

# Submit button hovers over text input

 *  Resolved [JeroenDanckers](https://wordpress.org/support/users/jeroendanckers/)
 * (@jeroendanckers)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/)
 * Hello,
 * when adding a basic styled form with the light version of your plugin, the submit
   button is aligned right next to the email input field. On the desktop version
   it isn’t that much of a problem in the widget area ([http://www.wanderersblues.be/](http://www.wanderersblues.be/)),
   but when using the shortcode in a post the submit button is aligned to the far
   right ([http://www.wanderersblues.be/wanderers-week-5-2/](http://www.wanderersblues.be/wanderers-week-5-2/)).
   Again, a minor annoyance.
 * The real problem arises when both pages are viewed on mobile. In that case the
   submit button hovers over the first text input field. That can’t be the purpose
   of the plugin, right?
 * This is the HTML of my form:
 * <p>
    <label>E-mailadres*</label> <input name=”EMAIL” placeholder=”e-mailadres”
   required> </p>
 * <p>
    <label>Voornaam*</label> <input name=”FNAME” placeholder=”voornaam” required
   > </p>
 * <p>
    <label>Naam</label> <input name=”LNAME” placeholder=”naam”> </p> <p> <input
   type=”submit” value=”Inschrijven”> </p>
 * I have not used any custom CSS. I wanted to use the lite version of the plugin
   first till my newsletter takes off and then switch to the pro version if I’m 
   still satisfied.
 * Is there a way to put the submit button under the text fields in the lite version?
 * Thx!
 * [https://wordpress.org/plugins/mailchimp-for-wp/](https://wordpress.org/plugins/mailchimp-for-wp/)

Viewing 15 replies - 1 through 15 (of 26 total)

1 [2](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/page/2/?output_format=md)

 *  [wolfango](https://wordpress.org/support/users/wolfango/)
 * (@wolfango)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013007)
 * Hi, create a custom css with the following:
 * .widget form input[type=submit] {
    position: inherit !important; }
 *  Thread Starter [JeroenDanckers](https://wordpress.org/support/users/jeroendanckers/)
 * (@jeroendanckers)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013009)
 * Thx, that did the trick! 🙂
 *  [wolfango](https://wordpress.org/support/users/wolfango/)
 * (@wolfango)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013013)
 * Good to know. I had the same issue…
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013102)
 * Hello,
 * I have exactly the same problem. See here : [](http://i.cubeupload.com/aBwxyH.png)
 * Could you please explain me where to put the css ?
    I tried directly in the html
   of my form, like that, but it does not work. Thank you in advance.
 *     ```
       <style>
       .widget form input[type=submit]
       {
       position: inherit !important;
       }
       </style>
   
       <p>
           <label>Email Address</label>
           <input type="email" name="EMAIL" placeholder="Adresse mail" required>
       </p>
       <p>
           <label>First Name</label>
           <input type="text" name="FNAME" placeholder="Prénom" required />
       </p>
       <p>
           <label>Last Name</label>
           <input type="text" name="LNAME" placeholder="Nom" required>
       </p>
   
       <input type="submit" value="Abonnez-vous">
       ```
   
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013103)
 * I also tried to put the css on style.css, but it still does not work ! 🙁
 *  [wolfango](https://wordpress.org/support/users/wolfango/)
 * (@wolfango)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013104)
 * Install Jetpack then use the custom CSS and paste the code above… It should work.
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013107)
 * I’ve tried even with the plugin “simple custom css”. Does not work 🙁
 * I think something is wrong on my html or css ? Could you tell me what is wrong,
   please ?
 * Please check [this image](http://i.cubeupload.com/JRs3RL.png) to understand.
 *     ```
       .widget form input[type=submit]
       {
       position: inherit !important;
       }
       ```
   
 *     ```
       <p>
           <label>Email Address</label>
           <input type="email" name="EMAIL" placeholder="Adresse mail" required>
       </p>
       <p>
           <label>First Name</label>
           <input type="text" name="FNAME" placeholder="Prénom" required />
       </p>
       <p>
           <label>Last Name</label>
           <input type="text" name="LNAME" placeholder="Nom" required>
       </p>
   
       <input type="submit" value="Abonnez-vous">
       ```
   
 * Thank you so much for your help.
 *  Thread Starter [JeroenDanckers](https://wordpress.org/support/users/jeroendanckers/)
 * (@jeroendanckers)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013108)
 * I pasted the custom CSS in the Custom CSS feature of my theme.
 * In the left sidebar of your backend somewhat all the way down you’ll see the 
   name of your theme. Click that to open the theme menu. There you’ll probably 
   see the menu item ‘Custom CSS’.
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013109)
 * It worked ? Could you show me what it did ?
    Yes, I’ve put it on the custom css,
   but nothing changed.
 *  Thread Starter [JeroenDanckers](https://wordpress.org/support/users/jeroendanckers/)
 * (@jeroendanckers)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013110)
 * You can see the result on [http://www.wanderersblues.be/](http://www.wanderersblues.be/),
   scroll down a little.
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013111)
 * Wow yes, nice.
    Could you please paste here your form html code and css code ?
   Thank you very much
 *  Thread Starter [JeroenDanckers](https://wordpress.org/support/users/jeroendanckers/)
 * (@jeroendanckers)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013112)
 * **The HTML-form:**
 * <p>
    <label>E-mailadres*</label> <input name=”EMAIL” placeholder=”e-mailadres”
   required> </p>
 * <p>
    <label>Voornaam*</label> <input name=”FNAME” placeholder=”voornaam” required
   > </p>
 * <p>
    <label>Naam</label> <input name=”LNAME” placeholder=”naam”> </p>
 * <p>
    <input type=”submit” value=”Inschrijven”> </p>
 * **Custom CSS**
 * .widget form input[type=submit] {
    position: inherit !important; }
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013113)
 * Thank you, it’s better.
    But, it would be still beter of the button was below
   the 3 forms. Could you understand why ?
 * [please check this image](http://i.cubeupload.com/eikoob.png)
 * Please scroll down to see the form :
    [http://test1.rosey.ch/](http://i.cubeupload.com/eikoob.png)
 *  Thread Starter [JeroenDanckers](https://wordpress.org/support/users/jeroendanckers/)
 * (@jeroendanckers)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013114)
 * Normally that would be taken care of by the custom CSS. If you placed the CSS
   in the right place it should work.
 * I’m no techie, so that’s all I can really say.
 *  [lioneldeymier](https://wordpress.org/support/users/lioneldeymier/)
 * (@lioneldeymier)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/#post-7013115)
 * ok, you have already done a lot for me.
    Thank you ! 🙂

Viewing 15 replies - 1 through 15 (of 26 total)

1 [2](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/page/2/?output_format=md)

The topic ‘Submit button hovers over text input’ is closed to new replies.

 * ![](https://ps.w.org/mailchimp-for-wp/assets/icon-256x256.png?rev=1224577)
 * [MC4WP: Mailchimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/mailchimp-for-wp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/mailchimp-for-wp/)
 * [Active Topics](https://wordpress.org/support/plugin/mailchimp-for-wp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/mailchimp-for-wp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/mailchimp-for-wp/reviews/)

 * 26 replies
 * 4 participants
 * Last reply from: [Harish Chouhan](https://wordpress.org/support/users/hchouhan/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/submit-button-hovers-over-text-input/page/2/#post-7013129)
 * Status: resolved