the default Joomla Contact form is treated as a part of Content control and thus it could be styled under default Styles section. Here is a brief sample how to make the input fields shorter and locate labels on the left side of the form.
1.open Styles >> Form section >> Input options and select style settings you like. For example I added background color for input fields, border and corners.
To make them shorter set Width to 50%
2.open Label settings and apply custom style settings for it. I made the label text red and bold. Also set Alight to left
3.the last step is to add a couple of rows of custom CSS code to move the labels to the left side of the form. Put CSS to Settings >> Additional CSS
fieldset label{
width:100%!important;
}
And here is the result
the default Joomla Contact form is treated as a part of Content control and thus it could be styled under default Styles section. Here is a brief sample how to make the input fields shorter and locate labels on the left side of the form.
1.open Styles >> Form section >> Input options and select style settings you like. For example I added background color for input fields, border and corners.
To make them shorter set Width to 50%
!Step1.png!
2.open Label settings and apply custom style settings for it. I made the label text red and bold. Also set Alight to left
!Step2.png!
3.the last step is to add a couple of rows of custom CSS code to move the labels to the left side of the form. Put CSS to Settings >> Additional CSS
fieldset label{
width:100%!important;
}
!Step3.png!
And here is the result
!Res.png!