Possible to replicate?

  • EdgeDigital
    Asked on November 1, 2021 at 1:40 PM

    A client of ours would like to replicate a "quiz" on another website, link: https://deals.carolinahomeremodeling.com/

    Is it possible to replicate the "quiz" as seen in the screen shot below and found on the page found by clicking the link above using Jotform?

    1635788321 61802621a3ef9  Screenshot 10

  • Kevin Support Team Lead
    Replied on November 1, 2021 at 5:22 PM

    The only special element is the multiple selector from your image, here is a widget on our end that works on a similar way: https://www.jotform.com/widgets/button-checkboxes

    The rest of the fields are regular fields that you can find on the Add Form Element section of the form builder. I would recommend you to kindly give it a try and let us know if you have any questions.


  • EdgeDigital
    Replied on November 2, 2021 at 1:57 PM

    Thanks for the help with that. I had perused the widgets but missed that one.

    A few questions: How can I add horizontal space between the buttons (i.e., margin-right:10px). I tried it via css but it moved the button in the 2nd column to a new line.

    Can it be configured so that only one answer (button) can be selected?

    Finally, can it be configured so that the button changes color upon clicking it instead of a little triangle appearing?

    Please click for reference:

    https://www.jotform.com/build/212425980115148


    Thanks!

    Greg

  • Niko_N
    Replied on November 2, 2021 at 5:55 PM

    Greetings Greg,

    Please allow me some time to check your form.

    I'll get back to you as soon as possible.

    Thank you!

  • Niko_N
    Replied on November 2, 2021 at 6:15 PM

    Thanks for your patience, Greg.

    I've checked and currently, there's no option to enable the option to allow selecting only one option.

    As for the increasing the horizontal space in between and also giving them the different color when they are selected, please inject the following custom CSS codes into your widget:

    1635891284 6181b854f35df Screenshot 2021 Screenshot 10

    .rowButtonCheckbox .wrapperButtonCheckbox {

    margin-right: 60px;

    }

    .checkboxes input.checkedButtonCheckbox+label {

    background: #18BD5B !important;

    }


    You can change the pixels and background color based on your preferences.

    Thank you!