Submit button hovers over text input

  • Resolved JeroenDanckers

    (@jeroendanckers)


    8 years, 10 months ago

    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 (https://www.wanderersblues.be/), but when using the shortcode in a post the submit button is aligned to the far right (https://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://www.ads-software.com/plugins/mailchimp-for-wp/

Viewing 11 replies - 16 through 26 (of 26 total)
  • Thread Starter JeroenDanckers

    (@jeroendanckers)

    No problem! I hope it works out soon!

    Hi lioneldeymier, can you post a link to your WP site so I can take a look at the code? Images are not very useful.

    Hi lioneldeymier, can you post a link to your WP website so I can take a look at the code? Images are not very useful.

    Here’s my site https://wolfango.com and you cans see the mailchimp subscribe at the bottom of the page.

    Hello Wolfango,
    very nice site.
    The address is https://www.test1.rosey.ch.

    I would like the same kind of button than you : below the form, and colored.

    For the moment, my form is set with the 1st option “heritier du theme wordpress”.

    If I choose another one “red”, “blue”… It adds space between the forms, like that : click here

    You’re using a different tag so try the following:

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

    Hmmmm thank you but nothing changed :((

    Is this what you want to achieve? I’ve edited your code in firebug and it seems to work.

    Oh yes very nice. With some pixel padding between lines it would be great! :))
    Could you paste your css text please wolfango ?

    For the space in between you need the margin of the textarea, see here

    button, input, select, textarea {
    font-size: 100%;
    margin: 0 0 10px;
    padding: 5px 30px 5px 12px;
    vertical-align: baseline;
    width: 100%;
}

    For the colour, that is the property of background, so look at rgba versions of red or anything you want. This should work:

    form.mc4wp-form input[type="submit"], .mc4wp-form form input[type="submit"] {
    background: rgba(17, 17, 17, 0.8) none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 34px;
    padding: 5px 30px 5px 12px;
    position: inherit;
    right: 0;
    text-transform: uppercase;
    top: 0;
    width: 100%;
}

    Got to go now… Good luck.

    Thanks man. But… Check what it does

    I don’t want to waste more your time. If you don’t answer, no problem.. ??

    Plugin Contributor Harish Chouhan

    (@hchouhan)

    Hello lioneldeymier,

    May I request you to please create a new post and let me know exactly what changes you are trying to make. I am sure we would be able to assist you to fix this soon.

Viewing 11 replies - 16 through 26 (of 26 total)
  • The topic ‘Submit button hovers over text input’ is closed to new replies.