Skip to Content
Technical Articles

Styling Forms – Enable Multi-Column Fields Using Flexbox

Introduction

If you create a standard form in SAP Marketing Cloud all fields are laid out in single column vertical arrangement. If you use such a form on a wide-screen layout (desktop browser) a lot of space is wasted. It would be better to be able to arrange some fields side-by-side. If you have a lot of checkbox fields, it would be good to align them horizontally rather than vertically.

Preface

Before you read any further please also read the related post ‘Styling Forms – Introduction‘ because it explains a lot of the basics. That post also includes links to other posts of my CSS series. Another recommended post is ‘Styling Landing Pages with CSS‘ which explains all the options to use CSS in a Landing Page.

Important Note: Also please note that all CSS code I present here come without warranty – you need to try out for yourself and test everything thoroughly – especially for multiple screen sizes, devices or browsers! I would also recommend that you ensure you have a good understanding of HTML and CSS.

To familiarize yourself with the concept of CSS Flexbox, I recommend some articles on the web:

Also, it’s a good idea to check the global compatibility of flex on caniuse.com.

Applying the CSS

You have two options to for applying CSS styling to your form:

  1. Assign an external CSS file to your form in the form settings.
  2. Embed the form in a landing page and use the inline CSS editor for your styling definition

In each case, you need to assign CSS classes to your text elements in the form to be able to address those elements specifically in your CSS style definition.

Multi-Column Fields Using Flexbox

Preconditions

The setup I describe in the following sections is based on a form with the indentation option disabled:

If you want to achieve a similar design but with the labels to the left of the fields, you’ll need to investigate on your own and only use the following example as a starting point. Also, if you plan to embed the form in a landing page, you need to apply the label placement ‘On Top‘:

Maximize Width of Input Fields

The first thing to take care of is the general width of the input fields. We need to make sure that they all span 100% of the available width. Additionally, I tried to ensure that all dropdown fields have the same height as the normal input fields:

.sapCpInputWidget .sapCpInput    { width: 100%; }
.sapCpInputWidget .sapCpDropDown { width: 100%; height: 38px; }
.sapCpNoteWidget  .sapCpTextArea { width: 100%;	}

The result looks like this:

Set Up Flexbox

The next thing we need to do is to change the display mode of the form layout to use the flex model and adapt some settings. Additionally, we need to make some basic setup of the single elements (widgets):

.sapCpLayout {
	display: flex;
	flex-flow: wrap;
	min-height: unset;
}
.sapCpWidget {
	flex-basis: 100%;
	width: 100%;
	margin-top: 8px;
}

This will not change anything in the form though. The next thing we need to do is introduce some custom CSS classes which we can assign to the different fields:

.sapCpContentPage:not(.sapCpContentPageEditable) .inline80, 
.W2L-Fields-Wrapper .inline80 {
    flex: 1 3 80%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline70, 
.W2L-Fields-Wrapper .inline70 {
    flex: 1 1 70%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline50, 
.W2L-Fields-Wrapper .inline50 {
     flex: 1 3 50%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline30, 
.W2L-Fields-Wrapper .inline30 {
    flex: 1 1 30%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline20, 
.W2L-Fields-Wrapper .inline20 {
    flex: 1 1 20%;
    min-width: 150px;
}

Note that I have applied the safety prefixes here to avoid those settings are only being effective in the form display mode or in the final landing page. Otherwise, the editor would be completely messed up and you wouldn’t be able to re-arrange fields or even create new ones.

Each class has a suffix indicating the width percentage which such a field would normally have. Please note that this width will only be applied if the surrounding elements and the total screen width allow it. It could also be placed as a single field on one line, even with a width setting smaller than 100%. This is the intended behavior and it also allows a good responsiveness for mobile devices.

The class ‘inline50‘ can be used for fields that have the same width and are supposed to be next to each other. This gives you some useful combinations like ‘inline80‘ and ‘inline20‘ for a combination of street and house number, or ‘inline30‘ and ‘inline70‘ for a combination of postal code and city.

The last useful class, ‘inline‘, is for a larger number of checkboxes which are supposed to line up horizontally:

.sapCpContentPage:not(.sapCpContentPageEditable) .inline, 
.W2L-Fields-Wrapper .inline {
    flex-basis: 150px;
    	flex-shrink: 1;
}

As explained in my introductory post, you now have to assign the appropriate classes to the fields:

Example

In the following example, I have set up a form with the following fields including the class assignment:

Field Class
Text: ‘Personal Data’
First Name inline50
Last Name inline50
Street inline80
House Number inline20
Postal Code inline30
City inline70
Country inline50
Region inline50
E-mail Address inline50
Mobile Phone inline50
Text: ‘Newsletter’
Subscription: ‘Coffee’ inline
Subscription: ‘Chocolate’ inline
Text: ‘Permissions’
Permission: Email inline
Permission: Text Message inline
Permission: Phone inline
Permission: Facebook inline
Submit Button

After applying the style to the form and switching to display mode, the form looks like this:

Or if you embed the form in a landing page, you get the same results:

Please note that you might get some weird arrangements of the fields for some screen widths. I experienced cases where the street number and the postal code were suddenly on one line. But in general, I find that this style works pretty well. However, please remember my statement at the beginning that you are responsible for thoroughly testing the outcome.

Finally, I’ll show you how the same style will look on a mobile device:

In this last code snippet, I give you the complete style sheet, including comments to copy:

/****************************************************************************************** 
	General comments:
	
	- Prefix .sapCpContentPage:not(.sapCpContentPageEditable)
		This disables the styles for the edit mode in the Form editor to avoid any 
		interference with the editor functionality (e.g. drag&drop)
		
	- Prefix .W2L-Fields-Wrapper
		This enables the styles if used/displayed as embedded form inside a Landing Page
		
	- If you use a form embedded in a Landing Page it is recommended to set the parameter 
		"Label Placement" to "On Top" for best results
		
	- The section "Fields width = 100%" is only needed to see a nice preview in the Forms 
		app. In the embedded form in a Landing Page the same is achieved with the 
		parameter "Label Placement" = "On Top"

    - To enable form fields you need to add a CSS class in the "Advanced Properties" 
      section:
      - inline20, inline30, inline50, inline70, inline80:
         The number indicates the percentage of the width to use
      - inline:
         For checkboxes with a fixed width 
	
******************************************************************************************/


/****************************************************************************************** 
	Fields width = 100%	 
******************************************************************************************/
/*
	This makes all fields fill 100% of the width.  
*/

/*--- Text Input Fields ---*/
.sapCpInputWidget .sapCpInput {
	width: 100%;
}

/*--- Dropdown Fields ---*/
.sapCpInputWidget .sapCpDropDown {
	width: 100%;
	height: 38px;
}

/*--- Note Field ---*/
.sapCpNoteWidget .sapCpTextArea {
	width: 100%;	
}

/****************************************************************************************** 
	Switch to Flex Display Model 
 ******************************************************************************************/

/*---------------------------------------------------------------------------------------- 
	Set default to flex and width 100%	
  ----------------------------------------------------------------------------------------*/
.sapCpLayout {
	display: flex;
	flex-flow: wrap;
	min-height: unset;
}
.sapCpWidget {
	flex-basis: 100%;
	width: 100%;
	margin-top: 8px;
}

/*----------------------------------------------------------------------------------------- 
	Custom classes 'inline##' for different widths
  -----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline80, 
.W2L-Fields-Wrapper .inline80 {
    flex: 1 3 80%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline70, 
.W2L-Fields-Wrapper .inline70 {
    flex: 1 1 70%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline50, 
.W2L-Fields-Wrapper .inline50 {
     flex: 1 3 50%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline30, 
.W2L-Fields-Wrapper .inline30 {
    flex: 1 1 30%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline20, 
.W2L-Fields-Wrapper .inline20 {
    flex: 1 1 20%;
    min-width: 150px;
}


/*----------------------------------------------------------------------------------------- 
	Custom class 'inline' for checkbox elements
  -----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline, 
.W2L-Fields-Wrapper .inline {
    flex-basis: 160px;
    	flex-shrink: 1;
}

Conclusion

After reading this post, you should be able to build forms with a more flexible layout and fields that align horizontally.

If you are looking for more posts on this topic please check the link list of other posts of my CSS series in my initial post ‘Styling Forms – Introduction‘.

3 Comments
You must be Logged on to comment or reply to a post.
  • Hello Arne Manthey,

    Thank you for this blog post. It has been very useful for the design of our forms.

    I would a question to these forms. Is it possible to use a radio button instead of checkboxes?

    In your example, the contact can register to the Coffee and/or Chocolate newsletter. But, what if we only want to give the option to register to only one newsletter? For this I could use radio button, but is this supported in the forms?

    Thank you

     

    • No, radio buttons are not supported. The only element which behaves like that is an input field with a value help (e.g. Country).

      If you would only allow one subscription you could also create specific forms and landing pages for each newsletter and then also use specific images for each newsletter page.

      • Hello Arne Manthey

        Thank you for your fast answer!

        Our current use case is not about different newsletters though. I used that as an example.

        Our specific use case is to create a landing page that contains something similar to a survey. There is a question and the contact can answer either “yes” or “no”. For that, it would be necessary to incorporate radio buttons.

        Since radio buttons are not possible we would have to evaluate our concept and see how we can fulfill there requirements.

        Thanks again for your answer and I’m looking forward to further blogs like this from you. There are very useful!