Form Design and Functionality Question

By: Dale Berkebile | Asked: 11/11/2022
ForumsCategory: How-toForm Design and Functionality Question
Dale BerkebileDale Berkebile asked 1 year ago
So I have a client that I am building an online course for. I originally build a quiz in the LMS I am using, but it doesn't offer some of the things I wanted and I was told I might be able to use a form to create what I want.

So this is a Continuing Education evaluation that asks about 30 questions. They are scaled questions like strongly agree to strongly disagree type questions on a scale of 1-5. There are other ones that are similar but changes out the answer ranking labels depending on the question. Other questions are yes/no questions and there may be a few more.

Anyhow, I'd like what seems to be fairly normal form questions.


I guess I was wondering how to best style the form because it looks pretty weak from a design perspective. The questions on the page are not numbered, there weren't any divider lines or alternating background colors or anything to style and organize things.

I dropped the sample form in Elementor to try to style it better and it still looks not-so-good in elementor besides the surrounding areas where I could design things.

I am an old Formidable Forms guy grandfathered in the Business Pro tool from 2014 or so but haven't kept up with all the updates or even used the tool much as I haven't been doing much-advanced formwork over the last 5 years or so.

I guess I am wondering how to best design a really decent and professional-looking form for  the company collecting reviews for CE credits and reporting. Am I missing something on the styling and design of the forms? I guess I want page builder type styling like Elementor, but with the backend form usability and data collection and reporting.

Any help would be greatly appreciated.
Thank you!
Attachments
5 Answers
Bobby Clapp answered 1 year ago
Dale BerkebileDale Berkebile replied 1 year ago

I am not yet, but that looks much better than what I was doing. Thank you. This might get me able to design a few of the questions. Will I be able to have several of the questions in a single form like this, but then other ones styled similarly, but changing the answer label (not the agree/disagree labels but something else). Would that be possible to change other questions?

Thank you for this,
This is definitely getting me closer.

Bobby Clapp replied 1 year ago

This is field specific. You apply CSS style and HTML code. You can still have whatever other fields and styles that belong to them.

Dale BerkebileDale Berkebile answered 1 year ago
So this helped me structure the header design started and add lines between questions. That part is looking great! Thank you!   I am a little rusty on both CSS and Formidable so I guess I am curious how I get questions to stay in 25% on the left side so the radio buttons can line up under the headers. I assume this is easy and I would just need to create a class for the questions somehow and set a width of 25% and then add the div calling that class in the HTML.   I added some screenshots marked up with my questions.  If anyone can help me fix some of these issues or point me in the right direction I'd truly appreciate it.   I do not own the latest subscription and I am not sure if there are templates built that might make this easier to start out and adjust. I am not sure I am asking the right questions, but hope this makes sense.

I created 3 sets of questions to try to keep my thoughts organized and communicate it best.

Thank you for any help!
Attachments
Bobby Clapp replied 1 year ago

And you've followed steps 1-4 in the link above (https://formidableforms.com/knowledgebase/customize-html/#kb-add-labels-to-a-grid) exactly as stated?

Dale BerkebileDale Berkebile answered 1 year ago
If you are stating the 4 steps mentioned in the - Add Labels To A Grid # - section. Then, yes, I think I followed the instructions to a T. with minor adjustments of labels. Maybe I am missing something. I'll share a screenshot of what I followed and how I did it to see if I somehow missed a step or am doing something incorrectly. Any tips/advice would be greatly appreciated.   Thank you for your help. I appreciate it.
Attachments
Bobby Clapp replied 1 year ago

Are you able to share a public link so we can inspect the page?

Dale BerkebileDale Berkebile answered 1 year ago
I assume the questions need some more CSS to align the radio buttons under the label, but not sure what I will need to add and where to find this recommendation on the site or youtube.
Dale BerkebileDale Berkebile answered 1 year ago
It looks like the class for the overall radio buttons area is… frm_opt_container

Would something like this work? - .frm_opt_container [padding-left:30px;]

Then maybe…

frm_scale

for adding space between the radio buttons. Maybe something like…

.frm_scale {     margin-right: 100px;     text-align: center;     float: left; }

Any idea if this would work or how to make it work?  

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right