What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Using jquery to watermark form fields notworking with jotform

    Asked by phantomdentist on March 25, 2011 at 04:08 PM

    Am using jquery watermark pluggin to add default values to text fields that are removed on focus, and replaced on blur if the text field is still empty

    http://code.google.com/p/jquery-watermark/

    Have tested the plugin on a form that I added locally and it works nicely. It doesnt work for jotform. Any ideas how I would get around this?

    <script src="//www.jotform.com/jsform/10802712197"></script>

    <script>
    $(document).ready(function() {

        $('#input_zzz').watermark('Test');
       
        $('#input_18').watermark('Name');

    });
    </script>

     

    Thanks

  • Profile Image

    Answered by brx250 on March 26, 2011 at 01:52 AM

     

    Hi there,

    First of all, thank you for using JotForm!

    Now, from what I understand, you’re trying to incorporate jquery watermarking to your JotForm fields. Obviously this is not currently possible, not unless you edit the form’s code directly.However, your forms are only gateways to get user input. Once they do, they sends it to our servers no matter where the form file resides. For example: If you go ahead and save a local version of a form you made on JotForm, you will still be able to receive the information it sends. That said, you can customize the code then save it to your own website/server. This should work.

    Here are some steps that you can follow to accomplish this:

    1)     Navigate to your form (http://www.jotform.com/10802712197).

    2)     Right click on the page then click on “View Source”.

    3)     Copy all the code and paste it in your text editor (or if you have an IDE like Dreamweaver, use that instead if you like).

    4)     Customize the code as you see fit (Just make sure that you won’t change anything that might break your form).

    5)     Save and upload this to you own site/server.

    6)     Try to test it first and see if you get your submissions and notifications.

     


    Hope this helps!

    ___________________________________________________________ 

    Albert | JotForm Support

     

  • Profile Image

    Answered by phantomdentist on March 28, 2011 at 07:33 AM

    Thanks for the help

    At current doing this will break jquery 1.4.2

    Is there a specific version of jquery I need to be running? Would running in noconflict help?

  • Profile Image

    Answered by brx250 on March 29, 2011 at 02:58 AM

    Hi there,

    Try using the current stable version (v1.5.1). I'm not sure how you mean though. Programmatically, the location of the file shouldn't be an issue as long as you update your script file references and properly slip jquery in the right place.

    ___________________________________________________________

    Albert | JotForm Support

  • Profile Image
    JotForm Support

    Answered by NeilVicente on March 29, 2011 at 04:12 AM

    Hi,

    I am not too familiar with this jQuery watermark script but based on your description, I think I get what you mean. Take a look at this example I made and tell me if it is what you wanted.

    http://sranrrr.com/watermark.htm

     

    I made this without using that particular jquery script. To apply it to your own form, do the following instructions:

    1. Get your form's source code. Go to Setup & Embed > Embed Form, then on the Embed Form Wizard, select Source. Copy the codes provided.

     

    2. Paste the form's code to your webpage's source code. 

    3. Insert this tiny Javascript code to each of your <input> tags

    onblur="if (this.value == '') {this.value = 'Watermark';}" onfocus="if (this.value == 'Watermark') {this.value = '';}"

    change the word Watermark to any value you'd like to appear in your field.

    For example:

    <input type="text" class="form-textbox validate[required, Email]" value="Email" onblur="if (this.value == '') {this.value = 'Email';}" onfocus="if (this.value == 'Email') {this.value = '';}" id="input_19" name="q19_email" size="20" />

    You can either supply a default value via Form Builder or you can just add the value above, like I did.

    One disadvantage of doing this workaround is that everytime you make changes on your form using the Form Builder, you would have to get the new source codes and repeat the process all over again.

    Hope that helps.

  • Profile Image

    Answered by Caleb on June 02, 2011 at 05:55 PM

    You can also edit the HTML.  In the input tag, place placeholder="watermark".  This only works with HTML 5 though.

  • Profile Image

    Answered by Caleb on June 02, 2011 at 05:55 PM

    You can also edit the HTML.  In the input tag, place placeholder="watermark".  This only works with HTML 5 though.