How can I use the mask feature to require a text question start with @?

  • Profile Image
    sw3330
    Asked on June 01, 2020 at 03:30 PM

    Hi,

    Attached please see the question I set in my form:

    1591039665Screen Shot 2020-06-01 at 3.27

    I hope to set it such that the answer has to start with @. Currently, I am using the 'Default Value' to pre-populate @ in the field. However, is it possible to use mask features so that users cannot delete the @ in the answer box?


    Thank you,

    Suyuan

    Screenshot
  • Profile Image
    Patrick_R
    Answered on June 01, 2020 at 08:27 PM

    Hi Suyuan! Let me look into this. I'll get back to you with a solution shortly.

    Thank you!

  • Profile Image
    Patrick_R
    Answered on June 01, 2020 at 08:50 PM

    Hi! Input Masking won't be a good idea in your case, for two reasons:

    1. There is no support for special characters. So, we can't force a user to only use the @ symbol in the beginning.
    2. With input masking, you're bound to limit the number of characters, which is not suitable for your case. Twitter usernames are not bound by the character limit.

    Basically Input Masking can't be used as Regex. However, a workaround would be to use a CSS based solution.

    Please have a look at this form: https://form.jotform.com/201527332251040
    Try to enter any value and you'll understand how this works.

    1591059078chrome-capture - 2020-06-02T06

    The CSS applied here will display the @ symbol permanently. User only needs to input his username.

    If you find this code useful, then you can use the following CSS code to achieve the same effect.

    #cid_3{
      position: relative;
    }
    #cid_3::before{
      content: "@";
      position: absolute;
      font-size: 16px;
      left: 5px;
      top: 10px;
    }
    #input_3{
      padding-left: 21px;
    }

    Please note: In case you're using a different theme (I am using the "Upcoming" theme) then you might face some issue with the @ symbol alignment. In such a case, just get back to us and we'll do the required changes in the code to make it work on your Form.

    I hope this helps. Fir further queries, feel free to get back to us.

  • Profile Image
    sw3330
    Answered on June 01, 2020 at 09:28 PM
    Hi Patrick_R,
    Thank you very much for your reply.
    I studied the CSS code and applied it to my form as:
    #cid_53::before {
    content : "@";
    position : absolute;
    font-size : 16px;
    left : 5px;
    top : 10px;
    }
    #input_53 {
    }
    However the @ symbol was added before the text box as below. Is it due to the position parameter?
    Thank you,
    Suyuan
    ...
  • Profile Image
    sw3330
    Answered on June 01, 2020 at 10:28 PM
    Hi Patrick_R,
    My problem got solved. Thanks a lot!
    Best,
    Suyuan
    ...
  • Profile Image
    Kiran
    Answered on June 02, 2020 at 02:41 AM

    Glad to see that you were able to fix the issue with the field. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help. 

    Thank you for using Jotform!