New to the community? Start here

[Forminator Pro] How to make a horizontal form on one line?

I’m trying to create a simple form which fits onto a single line for desktop, but then stacks for mobile responsive.

The attached screenshot shows a horizontal form that I’m trying to recreate, then underneath is my Forminator form so far.

This is so common that I thought there’d be an option in the plugin, but I’m not seeing one. Am I missing it or does this require CSS?

Fri, 26 Jun 2020 2:14:27
More Forminator Pro discussions
Forminator Pro
  • Adam
    • Support Gorilla

    Hi Kyler

    I hope you’re well today and thank you for your question!

    Currently Forminator does support “column” layout and it would automatically “stack fields” on smaller screens but the “obstacle” is a “submit” type field which can’t be placed in columns yet.

    This is already on our “to do” list and in future you should be able to drag&drop “submit” type field around just like any other – so that would let you easily achieve such layout – but for now we’ll need to use an additional piece of CSS.

    Assuming that the form contains two fields and submit button, the steps would be:

    1) add the two fields and submit to the form
    2) drag one of the fields around so they’d be position in one line (two columns layout, see screenshot)
    3) add this CSS to the site via “Appearance -> Customize -> Additional CSS” (if you are using any cache/css optimization tools you might need to clear cache)

    @media only screen and (min-width:783px) {
.forminator-row {
	float:left;
	padding-right:10px;
}
#submit {
	margin-top:20px;
	margin-left:20px;
}
}

    [attachments are only viewable by logged-in members]

    You might need to adjust pixel values slightly in this CSS to precisely match your layout but as a result on screens over 782 pixels wide form would be a “one line form” and on smaller ones it will automatically “stack” fields.

    Best regards,
    Adam