JotForm User Guide / Advanced Features /

How to hide your form and display a message when JavaScript is not enabled in user's browser?

How to hide your form and display a message when JavaScript is not enabled in user's browser?

JavaScript is essential to making special features in your form work - like page breaks, field validation, total amount calculatation, etc.
It can be sometimes annoying to receive submissions that do not have substantial information. To be able to counter this, we will implement a process that hides your form and displays a message if scripting is not enabled in your user's browser.

1.   First we need to insert an HTML field into the form using the Free Text HTML tool under the Power Tools.

Be sure to position the HTML field at the top of the form.

2.  After inserting the HTML field, click on it and then click the HTML button from the toolbar at the top.

3.  Copy and paste this code in the html source mini-window

    <div style="height: 100%;width: 100%; position: fixed; top:0px;left:0px;background-color:#fff;z-index:100;text-align: center;">
        <a href="" target="_blank">Mozilla Firefox</a><br/><br/>
        <a href="" target="_blank">Google Chrome</a><br/><br/>
        <a href="" target="_blank">Internet Explorer</a><br/>

4.  Click OK, and then save your form.

Now let me explain what these codes do.

<noscript></noscript>  -  Everything inside these tags will be displayed/interpreted by the browser if JavaScript is disabled, else it will just be ignored.

<div></div>  - This block element will contain our error message. I have applied a customized style so overlap the whole form when <noscript> is activated

The "<a href "s are there to provide our users tutorials on how to enable JavaScript in their browser. Of course, we do not want to just drive away our potential customers, right? We want them to see/fill out our forms correctly.

Do take note, however, that this trick will work only if you embed using the iframe codes. Using source will only mess up your website's layout, as this trick is optimized to work on stand-alone forms or iframe forms within a page. Using the default embed code will not make this work as well. It will just hide the form and not display our error message.

Send Comment

Browse Article by Topics