Dale Berkebile asked 2 years 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!
Bobby Clapp Staff answered 2 years ago
Are you doing this? https://formidableforms.com/knowledgebase/customize-html/#kb-add-labels-to-a-grid
Dale Berkebile
replied 2 years 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.
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 Berkebile answered 2 years 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!
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 Berkebile answered 2 years 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.
Are you able to share a public link so we can inspect the page?
Dale Berkebile
replied 2 years ago I am not sure if this will work or not - https://academygt.wpengine.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=ceevaluation
Dale Berkebile answered 2 years 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 Berkebile answered 2 years 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?
Have you done this as well?: https://formidableforms.com/knowledgebase/form-layout-and-css-classes/#kb-create-a-grid
Please login or Register to submit your answer
