Submit button hovers over text input

Hi, create a custom css with the following:

.widget form input[type=submit] {
position: inherit !important;
}

Thx, that did the trick! ??

Good to know. I had the same issue…

Hello,

I have exactly the same problem. See here :

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">

I also tried to put the css on style.css, but it still does not work ! ??

Install Jetpack then use the custom CSS and paste the code above… It should work.

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 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.

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’.

It worked ? Could you show me what it did ?
Yes, I’ve put it on the custom css, but nothing changed.

You can see the result on https://www.wanderersblues.be/, scroll down a little.

Wow yes, nice.
Could you please paste here your form html code and css code ?
Thank you very much

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;
}

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

Please scroll down to see the form :
https://test1.rosey.ch/

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.

ok, you have already done a lot for me.
Thank you ! ??