Possible to replicate?

  • Profile Image
    EdgeDigital
    Asked on November 01, 2021 at 01: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_

  • Profile Image
    Kevin_G
    Answered on November 01, 2021 at 05: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.


  • Profile Image
    EdgeDigital
    Answered on November 02, 2021 at 01: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

  • Profile Image
    Niko_N
    Answered on November 02, 2021 at 05: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!

  • Profile Image
    Niko_N
    Answered on November 02, 2021 at 06: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

    .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!