Single Row Input

  • Resolved yoizen

    (@yoizen)


    6 months ago

    Hello, i have a question about forminator “styles”. Can i make a single row input form? I need this for collect mail of my visitors interested in specifics topics. Leave an example image for an idea of what i mean.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @yoizen

    I hope you are doing well.

    This will require some custom CSS, you can try the following:

    .forminator-ui{
    display: flex;
    align-items: center;
}

.forminator-row:not(.forminator-row-last) input{
    border-radius: 30px !important;
    padding: 14px !important;
}

.forminator-row:not(.forminator-row-last){
    flex: 1;
}

.forminator-ui .forminator-row-last{
    margin-top: -14px;
    transform: translatex(-124px);
}

.forminator-ui .forminator-row-last button{
    border-radius: 20px !important;
}

    Add to Form > Appearance > Custom CSS:

    https://monosnap.com/file/RAGJKQblReAPKxKbjjTSx5LeJp5xBR

    But this is a start point you may need to adjust the values to match your site and create media queries for responsive. I am also assuming you only have the email + submit button, if you share the front end form URL we can share a more accurate code.

    Let us know if you have any additional questions.
    Best Regards
    Patrick Freitas

    Thread Starter yoizen

    (@yoizen)

    Hello, thanks for support, i try to put your code on custom CSS but there is no correct results. I leave you a URL for example page where i have to do that, in this page you will find 4 dublicate box just for example, in the box, where you see the input form, i try to put the “single row” input, for info i use Kubio Builder.
    URL: https://variavisione.it/contact/
    PS: forgive me for my English, as you can see from the URL I am Italian

    • This reply was modified 6 months ago by yoizen.
    Plugin Support Zafer – WPMU DEV Support

    (@wpmudevsupport15)

    Hi @yoizen,

    I hope you are doing well today!

    Thanks for sharing the URL, please try the following custom CSS code on your WordPress Dashboard->Appearance->Customize->Additional CSS. You can adjust the values as per your requirements.

    .forminator-row {
    width: 60% !important;
}

.forminator-row.forminator-row-last {
    position: relative !important;
    bottom: 70px !important;
    left: 132px !important;
}

button.forminator-button.forminator-button-submit {
    width: 60% !important;
    padding: 5px !important;
    border-radius: 35px !important;
}

    Kind regards,
    Zafer

    Thread Starter yoizen

    (@yoizen)

    Thanks Zafer, that code working well, i really appreciate your support work.

    Alex.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.