Mautic Community Forums

Horizontally aligned form? side by side fields?

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

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.

Hello and happy holiday!

Has anybody advice on how to make a Mautic form fields aligned side by side like in the screenshot?

Yes is possible take a look
http://www.awesomescreenshot.com/image/1982934/010df0be1f0f51baa7d732493737430e

[quote]Yes is possible take a look
http://www.awesomescreenshot.com/image/1982934/010df0be1f0f51baa7d732493737430e [/quote]

Well, how did you do it?

Hi, can you explain how you did this? Thanks in advance.

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

I see. Would you be willing to share the code you used? I am wanting to embed this into a Wordpress page.

+1

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.

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 :

.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.

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
  • 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
  • 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:
 <div id="mauticform_form_name"  data-validate="name" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-1 mauticform-required">
            <label id="mauticform_label_name" for="mauticform_input_form_name" class="mauticform-label"> Name</label>
            <input id="mauticform_input_form_name" name="mauticform[name]" value="" class="mauticform-input" type="text" />
            <span class="mauticform-errormsg" style="display: none;">Mandatory</span>
        </div>

</div>
<div class="col span_1_of_3">
Email Mandatory
</div>
<div class="col span_1_of_3">
Submit
</div>

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/ - 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

Also, you can do this via CSS: https://powertic.com/mautic/mautic-criando-um-formulario-inline-com-css/