Can we add other to radio buttons and add a custom label before it?

  • Profile Image
    currency_research
    Asked on August 03, 2015 at 05:58 PM
    We would like to use the “other” option but we want to add a description before the “other” … so it would read “No, but I know a great speaker who could discuss this topic: (Other option)”
    Is it possible to add the “other” option after the end of the answer used above?
    This would is for “Are you interested in presenting on the above suggested topic or another topic?” question.
    Thank you!
  • Profile Image
    Ben
    Answered on August 03, 2015 at 06:15 PM

    I have cloned a form of my colleague Bjoanna that had assisted you on the other thread. This is her form: http://form.jotformpro.com/form/52146346923961

    Now based on what you have said, you want to have the other field and have a custom label for it, not just the textbox to be shown.

    This is not possible directly from within the form builder, but it is possible through CSS.

    You can see how it would look by taking a look here:

    http://form.jotformpro.com/form/52146892079969

    This is the CSS used to accomplish this:

    #id_18 span.form-radio-item:nth-child(5):before {
        content: "No, but I know a great speaker who could discuss this topic:";
        left: 20px;
        margin-right: -417px;
        position: relative;
        width: 420px;
        color: red;
    }
    #input_18 {
        margin-bottom: 25px;
        position: relative;
        top: 25px;
    }

    You can see here how to add it to your form: Inject Custom CSS Codes just make sure to add it at the bottom of your form's custom CSS field.

    Of course, if you have any questions along the way, do let us know and we would be happy to assist with them :)

  • Profile Image
    currency_research
    Answered on August 03, 2015 at 08:20 PM
    Hi there,
    I added in the code, but it did not work. Could you take a look at it? http://form.jotformpro.com/form/51975105197966
    And, for some reason when I added the matrix coding “.form-matrix-values{width:60px !important;}” the matrix columns are still not evenly distributed?
    With warm regards,
    Britnee Hursin
    Conference Coordinator
    Currency Research
    Email: bhursin@currency-research.com
    ...
  • Profile Image
    Chriistian
    Answered on August 04, 2015 at 02:10 AM

    Hi currency_research,

     

    Currently checking your form. Will get back to you once I find the problem.

  • Profile Image
    Chriistian
    Answered on August 04, 2015 at 02:38 AM

    Hi again,

     

    Looks like the line

    color: (41, 41, 105)

    should be

    color: rgb(41, 41, 105);

     

    Also, please try to move the code

    #id_18 span.form-radio-item:nth-child(5):before {

    content: "No, but I know a great speaker who could discuss this topic:";

    left: 20px;

    margin-right: -417px;

    position: relative;

    width: 420px;

    color: rgb(41, 41, 105);

    }

    #input_18 {

    margin-bottom: 25px;

    position: relative;

    top: 25px;

    }

     

    .form-matrix-values{width:60px !important;}

    to the bottom of your custom CSS (even after the /* | *//*__INSPECT_SEPERATOR__*/ line).

     

    Please see http://form.jotformpro.com/form/52150762052951. It is a copy of your form with the changes applied. You may use it as guide in changing your form.

     

    Do let us know if you need furhter assistance.