Sometimes when creating a web form you’ll find that the most convenient way to present your questions is in a table format. This is especially useful for surveys or other forms with multiple choice questions that have the same answers for many questions, or if you want to create a likert scale (for example, agree/neutral/disagree, or a scale of 1-5). In this tutorial, I’ll walk through creating and styling a table of questions.

Create a Grid Row Section

The table layout is built on grid row sections. Therefore, the first thing to do is to create a new section. Make the section a “Grid Row” type.

typeQuestion

Enter your question in the Grid Row section’s “Title” input. You’ll change this for each question.

Create a New Question

Next, create a new question, select the appropriate answer type. For this example, I’ll use radio buttons with the answer choices Yes, No, and Not Sure. Leave the question field blank (you’ve already entered the question in the section title), but add the answer choices. These choices will apply to all the questions in the table.

firstQuestion

Be sure that your question is within the section you previously created. (To check, go to the Outline tab. You can drag and drop your question inside the section if needed.)

Copy Section as Needed

Copy this section until you have the number of questions you need. You can do this either by dragging and dropping within the Outline panel, or by hovering over the section in the Preview area and selecting “Copy Section.”

Change the title of each section to reflect the different questions you would like to ask.

questionsFinished

Style the Table

In order to make the table format easier to read, you may want to apply some styling. Go to the outline, select your form’s name on the first line and open the Advanced panel. The CSS below causes alternating rows to be different colors. The first row is white, the second is gray, the third is white, and so on.

<style type="text/css">
.wForm form .alternate-0 td{
background-color: #ffffff !important;
}

.wForm form .alternate-0 th{
background-color: #ffffff !important;
}

.wForm form .alternate-1 td{
background-color: #F0F0F0 !important;
}

.wForm form .alternate-1 th{
background-color: #F0F0F0 !important;
}
</style>

The final result will look something like this.

tableLayoutFinal

You can modify the colors to match the rest of your forms color scheme by changing the #ffffff and #f0f0f0 codes. For a quick list of color codes, and to generate a custom color, check out this website.

We’ve also created an interactive tutorial within the Form Builder on using grid row sections. You can access it here.

If you have ideas for other tutorials or features you’d like to know more about, let us know via Twitter or leave a comment below. If you have suggestions for new features you’d like to see in FormAssembly, make a suggestion in our UserVoice forum.

Pin It on Pinterest

Share This