Form - Create 2 Columns | XM Community
Skip to main content
Question

Form - Create 2 Columns

  • April 7, 2021
  • 2 replies
  • 1412 views

Forum|alt.badge.img+5

Hi,
I have a form question and there are 4 question in the form, i would like to create 2 columns and show them side by side
First Name Last Name
Email Address Company Name
Can someone please help on how i can make this possible using Javascript or css ?

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 909 replies
  • October 27, 2022

Hi there, if you still need, I was able to put something like that in place by using a Matrix question that is a Text Entry type. First, create a Matrix question and set its type to Text Entry. Make its number of statements and scale points equal to 2. Also, enable "Repeat Headers". Then, add the below to the question's JavaScript in the OnReady section:
jQuery("#"+this.questionId+" .c1").hide();

var mte_1 = document.getElementById("header~"+this.questionId+"~1~4");
var mte_2 = document.getElementById("header~"+this.questionId+"~2~5");
var mte_3 = document.getElementById("header~"+this.questionId+"~1~1");
var mte_4 = document.getElementById("header~"+this.questionId+"~1~2");

jQuery(mte_1).html("First Name");
jQuery(mte_2).html("Last Name");
jQuery(mte_3).html("Email Address");
jQuery(mte_4).html("Company Name");
Finally, add the below CSS in the Style section of the survey's Look & Feel:
.Skin .Matrix .TE td input {
    width: 90% !important;
    min-height: 50px !important;
}
MatrixTE2col.png


Forum|alt.badge.img+1
  • 3 replies
  • November 2, 2023

You can just use CSS grid - works fine for me

 

e.g 

.Skin #Questions {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-between;
}

@media only screen and (max-width: 650px) {
 .Skin #Questions {
    grid-template-columns: auto;
    
}
}