# Horizontally aligned form? side by side fields? **URL:** \ **Category:** General Discussion\ **Created:** [December 10, 2016, 5:24pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813 "2016-12-10T17:24:56Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [December 10, 2016, 5:24pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/1 "2016-12-10T17:24:56Z")
Greetings! Is it possible to style a mautic form to align the forms on a horizontal line, and have the fields side by side, instead of vertically stacked on top one another? See the screenshot. ![horizontal-optin-with-bkgrd.jpg](https://sridharkatakam.com/wp-content/uploads/2014/03/horizontal-optin-with-bkgrd.jpg) ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [December 10, 2016, 5:24pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/2 "2016-12-10T17:24:56Z")
Greetings! Is it possible to style a mautic form to align the forms on a horizontal line, and have the fields side by side, instead of vertically stacked on top one another? See the screenshot. ![](https://sridharkatakam.com/wp-content/uploads/2014/03/horizontal-optin-with-bkgrd.jpg) ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [December 21, 2016, 5:38pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/3 "2016-12-21T17:38:46Z")
Hello and happy holiday! Has anybody advice on how to make a Mautic form fields aligned side by side like in the screenshot? ---
**Author:** ![ninjoan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ninjoan/32/1005_2.png) [@ninjoan](https://forum.mautic.org/u/ninjoan)\ **Post date:** [December 21, 2016, 9:03pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/4 "2016-12-21T21:03:57Z")
Yes is possible take a look [http://www.awesomescreenshot.com/image/1982934/010df0be1f0f51baa7d732493737430e](http://www.awesomescreenshot.com/image/1982934/010df0be1f0f51baa7d732493737430e) ---
**Author:** ![imautic](https://avatars.discourse-cdn.com/v4/letter/i/74df32/32.png) [@imautic](https://forum.mautic.org/u/imautic)\ **Post date:** [December 21, 2016, 9:20pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/5 "2016-12-21T21:20:13Z")
[quote]Yes is possible take a look [http://www.awesomescreenshot.com/image/1982934/010df0be1f0f51baa7d732493737430e](http://www.awesomescreenshot.com/image/1982934/010df0be1f0f51baa7d732493737430e) [/quote] Well, how did you do it? ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [December 28, 2016, 6:12am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/6 "2016-12-28T06:12:46Z")
Hi, can you explain how you did this? Thanks in advance. ---
**Author:** ![Jaheki](https://avatars.discourse-cdn.com/v4/letter/j/c68b51/32.png) [@Jaheki](https://forum.mautic.org/u/Jaheki)\ **Post date:** [January 2, 2017, 8:05am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/7 "2017-01-02T08:05:42Z")
You need to do a bit of html to accomplish that here is a reference: [http://stackoverflow.com/questions/10350043/how-to-make-a-web-form-with-3-columns](http://example.com) ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [January 7, 2017, 6:50am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/8 "2017-01-07T06:50:31Z")
I see. Would you be willing to share the code you used? I am wanting to embed this into a Wordpress page. ---
**Author:** ![jwldub](https://avatars.discourse-cdn.com/v4/letter/j/5fc32e/32.png) [@jwldub](https://forum.mautic.org/u/jwldub)\ **Post date:** [April 3, 2017, 1:28am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/9 "2017-04-03T01:28:28Z")
+1 ---
**Author:** ![Sagasev](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@Sagasev](https://forum.mautic.org/u/Sagasev)\ **Post date:** [August 22, 2017, 2:14pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/10 "2017-08-22T14:14:44Z")
Anyone can help in this? I am having also trouble to implement my newsletter form in an horizontal way. If someone can please share the code, I would be really grateful. ---
**Author:** ![andrass](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/andrass/32/524_2.png) [@andrass](https://forum.mautic.org/u/andrass)\ **Post date:** [August 22, 2017, 5:48pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/11 "2017-08-22T17:48:31Z")
I don’t have code to share with you guys, but the general outline. 1/ In the form creation menu, make sure that “Render Style” is set to No. This will prevent Mautic to send extra CSS for the form. 2/ Now add the CSS styling you want for the different form elements. Forms are not overly complicated, and you can presumably just copy-translate any form you like into Mautic’s form CSS elements. You are dealing with : ```auto .mauticform_wrapper { } .mauticform-innerform {} .mauticform-post-success {} .mauticform-name { } .mauticform-description { } .mauticform-error { } .mauticform-message { } .mauticform-row { } .mauticform-label { } .mauticform-row.mauticform-required .mauticform-label:after { } .mauticform-helpmessage { } .mauticform-errormsg { } .mauticform-selectbox, .mauticform-input, .mauticform-textarea { } .mauticform-checkboxgrp-row { } .mauticform-checkboxgrp-label { } .mauticform-checkboxgrp-checkbox { } .mauticform-radiogrp-row {} .mauticform-radiogrp-label { } .mauticform-radiogrp-radio {} .mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default { } .mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak { } .mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] { } .mauticform-pagebreak-wrapper .mauticform-button-wrapper { } ``` Sharing code doesn’t help, and isn’t needed. Actually there isn’t any code to be shared. All is CSS styling, and my styling won’t help you. Just style to your needs. Enjoy life, don’t do things your grand-parents haven’t done. ---
**Author:** ![Paulogon](https://avatars.discourse-cdn.com/v4/letter/p/bb73d2/32.png) [@Paulogon](https://forum.mautic.org/u/Paulogon)\ **Post date:** [August 22, 2017, 8:39pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/12 "2017-08-22T20:39:14Z")
Hi This can be done in at least 2 ways 1. Universal that works on any site, even on WordPress - Use a grid/column generator like this - [www.responsivegridsystem.com](http://www.responsivegridsystem.com) - Choose the number of columns - Copy the css and put it in the css file or in the head of the page with the style tags. Check this link - [https://www.w3schools.com/tags/tag\_style.asp](https://www.w3schools.com/tags/tag_style.asp) - Copy the html code and past it on the page of the form - Go to Mautic » Components » Forms » Choose your form » On the Green box on the top right - Click on Manual Copy - Copy the Javascipt code and paste it before the tag of your html page - Copy the css code and paste it on the css file of your theme or in the head of the page - Copy the html and put it in the form location - Now find the html generated by the Grid System and put each form field, that it is inside a section, inside each column.Ex: ```
``` Email Mandatory ```
``` Submit ```
``` 2 - WordPress Sites - The Easy and Fast Way - If your theme have any kind of shortcode with column/grid system use it. It has to be a shotrcode. Layouts from page builders doesn´t work that good. - If the theme doesn´t have the previous option, install this plugin - [https://wordpress.org/plugins/shortcodes-ultimate/](https://wordpress.org/plugins/shortcodes-ultimate/) - and activate it. - Go to the page of the form » Click Insert Shortcode » Choose Row » Click Preview » If it has the columns you need, click insert - Now paste the form div´s of the form fields inside each columns - Test it Hope it help Paulo ---
**Author:** ![cfonate](https://avatars.discourse-cdn.com/v4/letter/c/bc79bd/32.png) [@cfonate](https://forum.mautic.org/u/cfonate)\ **Post date:** [October 25, 2017, 7:00am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/13 "2017-10-25T07:00:19Z")
Also, you can do this via CSS: [https://powertic.com/mautic/mautic-criando-um-formulario-inline-com-css/](http://example.com) ---
**Author:** ![jinjur](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jinjur](https://forum.mautic.org/u/jinjur)\ **Post date:** [September 5, 2023, 8:53am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/14 "2023-09-05T08:53:56Z")
Hello andrass (and anyone else out there), I’ve set the Render Style to No but how do I add the CSS styling mentioned in step 2? In Mautic, all I can see are one-line attribute fields that allow less than 200 characters? I know it’ll be something obvious I’m missing but are you able to guide me on this? I’m a newcomer here but I’m willing to learn - any help is greatly appreciated! Thank you in advance ---
**Author:** ![jinjur](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jinjur](https://forum.mautic.org/u/jinjur)\ **Post date:** [September 5, 2023, 11:36am UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/15 "2023-09-05T11:36:29Z")
Hi @Paulogon , I’ve tried to follow your advice to the best of my ability but I’m afraid I’m still a bit stuck. For reference, I’m using Wordpress 6.3.1, with the Spectra One FSE Block Editor and Mautic plugin (I’m not sure if the block editor would fall under your previous description of “column/grid system” or “layouts from page builders” as it appears to be a bit of both?). I’m attempting to put this form in the footer of my website if that makes any difference? Having tried pasting the code from Mautic into the Code Editor, most of the code just displays loose on the website, above the form, which is still doesn’t display inline. I’ve also tried to put the relevant code into the shortcode block seperately, to no avail. However, in Mautic’s form creator, the _style=“font;colour;etc.”_ commands have all worked perfectly well for the styling in the Input Attributes section of each element so I wonder, is there any way of adding something to the Form Attributes/Field Attributes directly? I’ve tried entering various combinations such as: style = “display: flex; flex-wrap: nowrap;” form style=“display:inline;” form style=“display:inline!important;” div style=“display:flex;” form style=“display:flex;” form style = “display: flex; flex-wrap: nowrap;” div class=“form-inline” form style=“display: flex; flex-flow: row wrap;” style=“display:inline;” Some of those commands have made the email field shorter, which tells me something is being affected, but I’m just not able to force them inline, try as I may. I hope this makes sense and apologies that it’s a bit of a long-winded and dribbly. Any help is greatly appreciated, Mark ---
**Author:** ![robm](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/robm/32/260_2.png) [@robm](https://forum.mautic.org/u/robm)\ **Post date:** [September 5, 2023, 1:12pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/16 "2023-09-05T13:12:48Z")
I am not any good at css but I did find this snippet that might help? ```auto .mauticform-row .btn{ border: 0; margin: 0; } @media (min-width:1024px) { .mauticform-row .mauticform-input, .mauticform-row .btn{ margin: 0; vertical-align: middle; } .mauticform-row{ display: inline-block } } @media (max-width:1024px) { .mauticform-row .mauticform-input, .mauticform-row .btn{ width: 100%; } } ``` ---
**Author:** ![jinjur](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jinjur](https://forum.mautic.org/u/jinjur)\ **Post date:** [September 5, 2023, 2:00pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/17 "2023-09-05T14:00:20Z")
Nor me 😆 . Well, the snippet states for the row to display as an inline-block, which sounds like we’re barking up the right tree but then it begs the question, where do I shoe-horn this in to test it? As it stands, I’ve created the form on Mautic, installed the Mautic Wordpress plugin, placed a Shortcode Block on the footer where I want it to go, and written _[mautic type=“form” id=“1”]_ as requested by the plugin to connect the two. Jumping into the Code Editor on Wordpress seems to show nothing of Mautic’s code (just the wordpress blocks/groups.containers that make up the layout essentially) to strap these statements to. I tried condensing the spaces down to fit in the Form Attribute field on Mautic but this hasn’t made any change (perhaps it only recognises HTML though?) ---
**Author:** ![robm](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/robm/32/260_2.png) [@robm](https://forum.mautic.org/u/robm)\ **Post date:** [September 5, 2023, 2:05pm UTC](https://forum.mautic.org/t/horizontally-aligned-form-side-by-side-fields/6813/18 "2023-09-05T14:05:14Z")
You would need to edit the css of the page the form is rendering on. Where you edit css on wordpress varies depending on the page builder you are using but I think the customise tool found under appearance has a CSS editor that should work on all WP sites. I use a WP plugin called siteorigin CSS that creates a UI for messing with CSS for non techies like me.