Enhance Form Interaction Control with JavaScript

Inspirational Form Examples with Rules Functionality
January 27, 2017
advanced business workflows
Web Form Tweaks For Advanced Business Workflows
February 1, 2017

Enhance Form Interaction Control with JavaScript

custom javascript web forms

You’ve created your web form to streamline communication, enhance data collection and simplify your internal processes. But do you control your form’s interactions as intended?

The more complex a form becomes, the more you need to focus on the user experience. You wonder why? Because if a form takes longer to fill out, there’s a high chance that people will abandon it. But there’s a lot you can do to make your form more dynamic.

A rise in form abandonment is a sign that you must reconsider the approach. In some cases you can use conditional logic and multiple pages that will make your form more dynamic and easier to follow. Also removing some optional fields can improve the experience. But for a more advanced behavior, you can consider using some custom JavaScript codes that are easy to add to your form.

If you are experienced in JavaScript, you can guess the advantages that these two features provide for your form:

  • Add JS to your form
  • Add JS to your Thank You page.

js form examples

The steps to use custom JavaScript on your form are quite simple:

1. Create your JavaScript script

2. Upload it on a server (with the .js extension)

3. Go to the SettingsAdvanced section of your form

4. Enable one of the two options that you need

5. Paste the URL of the JavaScript file you have previously uploaded

6. Save settings.

What’s in it for you to use custom JavaScript on your form?

It gives you a lot of flexibility in terms of controlling your form’s interactions, and you can add special effects that will make your form more entertaining. With JavaScript you’re growing your web forms to a smarter level, being able to process data before submission, without invoking the server. You can show alerts, change colors, resize elements and more.

Here are some web form examples that use custom JavaScript snippets. Click the links to open them:

>> Example #1: Displaying a popup window on the form when the wrong type of input is provided in the phone field.

>> Example #2: Prefilling the message box from the form with a certain text and background color based on the selected option in the drop down.

>> Example #3: Resizing the image on the form and adding a transparency effect when double clicked.

Did you like the examples? Share us your thoughts in the comments below and try the feature out, if interested.

Olivian Stoica
Olivian Stoica
is the Search Engine & Conversion Optimization Analyst at 123ContactForm. He has a keen knowledge of the platform, providing useful articles and guides about building web forms.

Leave a Reply

Your email address will not be published. Required fields are marked *