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

  • sw3330
    Asked on June 1, 2020 at 3:30 PM

    Hi,

    Attached please see the question I set in my form:

    1591039665Screen Shot 2020 06 01 at 3 Screenshot 10

    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

    Jotform Thread 2360639 Screenshot
  • Patrick_R
    Replied on June 1, 2020 at 8:27 PM

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

    Thank you!

  • Patrick_R
    Replied on June 1, 2020 at 8: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 Screenshot 10

    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.

  • sw3330
    Replied on June 1, 2020 at 9: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
    ...
  • sw3330
    Replied on June 1, 2020 at 10:28 PM
    Hi Patrick_R,
    My problem got solved. Thanks a lot!
    Best,
    Suyuan
    ...
  • Kiran Support Team Lead
    Replied on June 2, 2020 at 2: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!