Support » Plugin: Ninja Forms - The Easy and Powerful Forms Builder » How to have a form on the footer in same row

  • Resolved wpstarter2017

    (@wpstarter2017)


    Hi,

    I would like to have a form and footer like this this website https://www.accompanyus.com/
    Quiet simple but I have my form with the input and the button in 2 rows so far.

    I have added to my CSS on Customize this code for better look but need help for having everything on the same line. I tried the display inline code but it doesn t work.

    Here a CSS code I used to improve the style and design:

    .ninja-forms-form-wrap input, .ninja-forms-form-wrap select, .ninja-forms-form-wrap textarea {
    padding: 5px 7px;
    background-color: #fffff;
    border: 3px solid #e5e5e7;
    font-size: 14px;
    display: inline;
    }

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Kyle B. Johnson

    (@kbjohnson90)

    Hello @wpstarter2017,

    If you enable Ninja Forms’ “Opinionated Styles”, then we have helper classes for inline forms.

    You can set either “light” or “dark” themed Opinionated Styles in the plugin settings:
    Forms -> Settings -> Advanced -> Opinionated Styles

    With Opinionated Styled enabled, you can use the following helper classes:

    Email Field
    two-thirds first
    Submit Button
    one-third

    Also, you may need to set the form default label position to hidden for the fields to line up properly. With hidden labels, you can set a placeholder for the Email Address input.

    Here is a form export setup this way, as an example: https://www.dropbox.com/s/cm7oe18uwgek520/ninja-forms-inline-email-signup-form.nff?dl=0

    And here is an article write-up that I was able to dig-up:
    https://ninjaforms.com/row-column-form-layouts/

    • This reply was modified 6 months, 2 weeks ago by  Kyle B. Johnson. Reason: Add article link

    Hi @kbjohnson90

    thank you so much it does now work!!!

    I have customized it a bit 😉 But need to align it with the footer text so I tried on CSS the vertical-align:middle, top and bottom but doesn’t really align very well..

    Thanks again!
    Cheers

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to have a form on the footer in same row’ is closed to new replies.