Can I replace the required * with text (Required) - RESOLVED

  • Profile Image
    AA_C
    Asked on December 06, 2016 at 09:39 AM

    Can I replace the required * with text (Required) on some fields and increase the size of the * for all?

    Thanks,

    Regards
    Robert
    AAC

    Part of - Complicated-Form-Idea

  • Profile Image
    EltonCris
    Answered on December 06, 2016 at 10:12 AM

    To increase the asterisk size of all the fields, you can use the following CSS.

    .form-required {

        font-size: 18px;

        font-weight: bold;

    }

    And to change the asterisk symbol with Required text of a specific field, use the following. Make sure to replace the field ID number (number in bold below) with the field ID you want it to apply.

    #id_199 .form-required {

        visibility: hidden;

        font-size:12px;

        font-weight: bold;

    }

    #id_199 .form-required:before {

        content: "Required";

        visibility: visible;   

    }

    You need to inject these into your form. http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you need further help, let us know.

  • Profile Image
    AA_C
    Answered on December 06, 2016 at 10:48 AM

    Hi Elton,

    Thanks, I'm using this my my judges Shirt form for the size option, if a quantity is entered the size field will have "Required"

    Regards
    Robert
    AAC

  • Profile Image
    Kiran
    Answered on December 06, 2016 at 12:32 PM

    I have checked your JotForm and see that some of the fields are included in the Text field. The asterisk mark for these fields can be replaced by finding the ID of the label. You may refer the guide below to find the IDs and names of the fields.

    https://www.jotform.com/help/146-How-to-find-field-IDs-and-names

    For example, you may use the following code to change the asterisk to Required for teh field "Stormtech ETX-1 Edge Polo Shirt" 

    #label_210 .form-required {

        visibility: hidden;

        font-size:12px;

        font-weight: bold;

    }

    #label_210 .form-required:before {

        content: "Required";

        visibility: visible;   

    }

    Hope this information helps! 

  • Profile Image
    AA_C
    Answered on December 06, 2016 at 04:36 PM

    Hello Kiran...The info is helpful... I'm working on this now

    Regards
    Robert
    AAC

  • Profile Image
    AA_C
    Answered on December 08, 2016 at 05:49 PM

    OK.. I tried the  following css code and I get the asterisk and "Req."  Req. * for the fields.

    Why am I getting both?

     

    #label_206.form-required, 
    #label_208.form-required, 
    #label_210.form-required, 
    #label_211.form-required, 
    #label_215.form-required, 
    #label_207.form-required, 
    #label_209.form-required, 
    #label_212.form-required, 
    #label_213.form-required, 
    #label_214.form-required
    {
    visibility: hidden;
    font-size: 12px;
    font-weight: bold;
    }

     

    #label_206 .form-required:before, 
    #label_208 .form-required:before, 
    #label_210 .form-required:before, 
    #label_211 .form-required:before, 
    #label_215 .form-required:before, 
    #label_207 .form-required:before, 
    #label_209 .form-required:before, 
    #label_212 .form-required:before, 
    #label_213 .form-required:before, 
    #label_214 .form-required:before
    {
    font-size: 10px;
    content: "Req.";
    visibility: visible;
    }

    Note: I did modify the code so that the Req. was smaller.

    Regards
    Robert
    AAC

  • Profile Image
    BJoanna
    Answered on December 09, 2016 at 12:02 AM

    I am not exactly sure why asterisk is not hidden. I will need check with my colleagues to see why is this happening.

  • Profile Image
    AA_C
    Answered on December 09, 2016 at 05:23 PM

    Hi,

    Any options to fix this minor issue?

    I tried changing the font size and that did nothing;


    visibility: hidden;
    font-size: 1px;
    font-weight: bold;
    }

    Thanks!

    Regards
    Robert
    AAC

  • Profile Image
    EltonCris
    Answered on December 09, 2016 at 07:13 PM

    Try adding !important rule on visibility hidden property.

    Example:

    visibility: hidden !important;

    If this doesn't make any difference, please let us know the form in question with this issue so we can inspect it on our browser.

    Thank you!

  • Profile Image
    AA_C
    Answered on December 10, 2016 at 10:31 PM

    Hi,

    Unfortunately this didn't resolve the problem, it's not a big deal and I can live with it.

    form: 3423134202946

    Thanks,

    Regards
    Robert
    AAC

     

    I'm not a robot

  • Profile Image
    EltonCris
    Answered on December 11, 2016 at 12:50 AM

    The form seems deleted. :)

    I'm pretty sure it is an easy fix but we have to check it within the form.

    Anyway, just feel free to contact us whenever you need our assistance.

    Regards!

  • Profile Image
    BJoanna
    Answered on December 11, 2016 at 06:20 AM

    I tested this a bit more and I was able to resolve this issue. 

    Instead of this CSS code:

    #label_206.form-required, 

    #label_208.form-required, 

    #label_210.form-required, 

    #label_211.form-required, 

    #label_215.form-required, 

    #label_207.form-required, 

    #label_209.form-required, 

    #label_212.form-required, 

    #label_213.form-required, 

    #label_214.form-required

    {

    visibility: hidden;

    font-size: 12px;

    font-weight: bold;

    }

    add this CSS code:

    #label_206 span.form-required, #label_208 span.form-required,#label_210 span.form-required, #label_211 span.form-required, #label_215 span.form-required,#label_207 span.form-required, #label_209 span.form-required, #label_212 span.form-required,#label_213 span.form-required, #label_214 span.form-required {

        visibility : hidden !important;

        font-size : 2px !important;

        font-weight : bold!important;

     

    }

    Here is my form: https://form.jotform.com/63452796281969 

    Feel free to clone it

    Let us know if you need further assistance.

  • Profile Image
    AA_C
    Answered on December 11, 2016 at 08:50 PM

    Hi and Sorry,

    The form is actually; 63423134202946, I was missing the 6 at the beginning.

    I will modify the script as shown and advise.

    Thankyou.

    Regards
    Robert
    AAC

     

    I'm not a robot

  • Profile Image
    AA_C
    Answered on December 11, 2016 at 09:12 PM

    Hi,

    This modification was the answer.

    Another little piece of this form is now done and the form is finally completed. 

    Thank you everyone!

    Regards
    Robert
    AAC

     

    I'm not a robot

  • Profile Image
    EltonCris
    Answered on December 11, 2016 at 09:48 PM

    Great! Glad to hear that fixed it.

    Actually, there's nothing wrong with the first version but I just noticed that you've connected the two selectors instead of adding space between them. That causes it not to work :)

    Example:

    From:

    #label_206.form-required

    Should be:

    #label_206 .form-required

    Cheers!

  • Profile Image
    AA_C
    Answered on December 12, 2016 at 06:21 PM

    @Elton, 

    Very interesting, thanks for pointing this out. Although I'm a bit confused... I don't see a space in the last script that was offered and I used.

    #label_206 span.form-required, #label_208 span.form-required, etc...

    Am I missing something or is the space actually there but not easily diserable?

    Wait I see it now... after 206 & 208 not before decimal, I was looking between span and decimal ........ Got it now :)

     

    THANKS!

    Regards!
    Robert

  • Profile Image
    EltonCris
    Answered on December 12, 2016 at 06:49 PM

    Oh sorry, I was referring to the CSS codes you've shown to us here.

    https://www.jotform.com/answers/1004710-Can-I-replace-the-required-with-text-Required-RESOLVED#1007253

    On the first CSS code, you've not added a space between the two selectors (ID and Class). Adding a space between them should resolve the problem.

    Here's a screenshot:

    The space is indeed not easily noticeable :)

    Anyway, since you have already used the corrected version provided by my colleague, that should be fine.

    -------------------------

    Update: Oh great, glad you've figured that out. Cheers! :-D

  • Profile Image
    AA_C
    Answered on December 14, 2016 at 11:34 AM

    All's Good Now! ... TNX... Cheers! :-) Robert