3 similar signup forms, 3 different little styling problems

  • Resolved Wonderful Wanderings

    (@wonderful-wanderings)


    10 years, 7 months ago

    Hi there,

    I’m using this plugin to display three mailchimp signup forms on my website https://themetest.wonderfulwanderings.com/about/ (login: anakha, password: themetestprotected – I’m still designing it).

    1. In the sidebar
    2. In the pre-footer area
    3. On my about page (see link)

    It has taken me hours to get the three of them styled the way I like, but I’m still encountering some issues that I can’t get my head around. I’m hoping you can offer me some help.

    1. The sidebar signup form:
    This one looks almost exactly the way I want it to look, except for the fact that I don’t get why the button text is clearly positioned lower in the button than the “email address” text is in the input field. I’m using the same padding for both.

    2. The prefooter signup form:
    This also looks almost completely the way I want it to look, the only thing that is bothering me is that the button is positioned slightly lower than the input field and I don’t see why. There’s no other top or bottom margin on the button than there is on the input field.

    3. The about page:
    I’m having the biggest issues here. I’ve used exactly the same method as I have for for the sidebar form and the prefooter for and yet I can’t get the button on the same line as the input field.
    I would also like the form (input field + button next to each other) to be centered on the page. I know I have to use “margin: auto”, for that, but I can’t figure out exactly how.

    I would really appreciate it if you could help me wrap this up.

    Thank you

    https://www.ads-software.com/plugins/mailchimp-for-wp/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Danny van Kooten

    (@dvankooten)

    Hi Sofie,

    I couldn’t find any instances of forms created by my plugin on your website but I’ll go into your issues real quick here, just to help you on your way.

    1) Your submit button is a little smaller than your email input field. Setting a height of 35px on the submit button should fix it.

    2) This looks good to me in Chrome but could be because of a border?

    3) Your form has paragraph elements in it, which is why the two fields appear on different lines. To center the elements, I would use text-align: center instead of the auto margin method.

    Hope that helps you on your way. Using the MailChimp for WordPress plugin will make this all a little easier by the way.

    Good luck.

    Thread Starter Wonderful Wanderings

    (@wonderful-wanderings)

    Hey Danny,

    Dankje voor het snelle antwoord.

    I think I got a bit confused: I do have your plugin installed, but I just use the mailchimp code for my forms.
    To be honest I’m not even sure if I should be using your (undoubtedly awesome) plugin in that case?

    So thanks a bunch for having a look at it anyway.

    1) You’re right, it was smaller. making it higher didn’t help though:/

    2)I’m on Chrome too. Might be an optical illusion with the special button border indeed.

    3) I tried the text-align method before the auto margin method, but that didn’t work. Why would it be better to use that?
    I saw in my code that there are paragraphs, but I don’t see them in my editor.
    Must be something WordPress adds:/ I’ve tried just putting all the css elements next to each other in the editor, but that didn’t do anything either.
    What DID work, was simply going into the visual editor, putting the cursor after the input field and hitting ‘delete’ to delete the paragraph. So stupid, but I thought it wasn’t okay to work in the visual editor for this kind of stuff.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘3 similar signup forms, 3 different little styling problems’ is closed to new replies.