using to force boxes on separate line

  • Resolved Islo

    (@nuytun)


    7 years ago

    Hi
    First off, excellent plugin. I can’t purchase Premium but would provide a donation, if that is possible, let me know how.

    Question is: Using the checkbox that provides 2 email boxes, one for original and one for confirm emai, I want to stack the confirm boxes on top of each other, not side by side.

    I tried adding <br> somewhere in the line item but it doesn’t render. The issue is I am using the newsletter form in a sidebar and 2 email boxes beside each other come out really, really tight.

    Hoping this can be done easily. If you could advise.
    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Jess Quig

    (@jquigam)

    7 years ago

    Hi Islo,

    I’m so glad our plugin is a good fit for you!

    You can absolutely stack the email boxes, but it will require some custom CSS. Here’s a screenshot example I made on my own site: http://cloud.supportally.com/220I3U3c3M1u. In order to make the CSS you’ll need, though, I will need to be able to see your form embedded on your site (this is the only way to ‘target’ the correct fields with CSS — general CSS won’t work in this case).

    When you get a chance, could you pass along the URL where the form is embedded?

    Let me know! Thanks! 🙂

    Thread Starter Islo

    (@nuytun)

    7 years ago

    Thanks

    I can use the inspector on my browser to find it.
    I know it’s close to this:

    label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}

    But cannot find the exact spot.
    The form field is:

    <input type="email" name="wpforms[fields][1][primary]" id="wpforms-6390-field_1" class="wpforms-field-email-primary wpforms-field-required" value="" placeholder="" required="" aria-required="true">

    Is that useful?
    Thanks

    Plugin Support Jess Quig

    (@jquigam)

    7 years ago

    I would actually need the HTML for a div a bit further ‘up’ as parent containers go. However, I can show you how I did this on my own site and hopefully this will help you to replicate it:

    1) I grabbed the ID for the entire email field. In dev tools, that can be found here: http://cloud.supportally.com/243v3H3t1L0r. This is what you’ll need to change to fit your own site.

    2) I used that CSS ID to create a snippet that targets only the ‘confirm email’ box:

    div#wpforms-48-field_5-container .wpforms-one-half:nth-of-type(2) {
    clear: left;
    margin-left: 0;
}

    That should be all the CSS you need! There are two ways you can put it into your site:

    1 – Use the built-in WordPress CSS editor. This takes just a few clicks, and there is a great video tutorial here: http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    2 – Place the code at the bottom of your theme’s style.css file.

    Give that a shot and let me know how it goes or if you have any questions! 🙂

    Thread Starter Islo

    (@nuytun)

    7 years ago

    Hi
    Thank you very much for the instruction. Worked great in placing the boxes over each other.

    In the footer works as yours, thanks.

    Only issue is the sidebar form, it stacked the boxes but also made the input boxes half the size, which is odd. I selected large boxes and they were halved, so now the boxes only extend half way across the primary sidebar. I simply used the primary sidebar and added the WPform widget to it.

    Is there something that might be blocking it?

    Thanks again.

    Thread Starter Islo

    (@nuytun)

    7 years ago

    Hi
    I found the issue for the sidebar (I think, definitely not an expert).

    I added this:

    div#wpforms-6390-field_1-container .wpforms-one-half {
width: 100%; 
}

    The one-half element is 48%, not sure where that is picked up, but by adding this the fields render 100%.

    Thanks again!

    Plugin Support Jess Quig

    (@jquigam)

    7 years ago

    You’re welcome and I’m glad you were able to find a solution!

    In case it helps, if you find that you’d like that CSS you just shared to only apply to the form in the sidebar, you can add ‘.sidebar’ (no quotes) to the beginning of that selector. So it would look like: .sidebar div#wpforms-6390-field_1-container .wpforms-one-half

    Have a good one! 🙂

    Thread Starter Islo

    (@nuytun)

    7 years ago

    Hi
    Even better, thanks for that!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘using to force boxes on separate line’ is closed to new replies.