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 to 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.

Below is the script that we’ve used:

/*field ids*/
var dropdown_cid = '25540687';
var textarea_cid = '25540688';
var phone_cid = '25540649';

/* Form ids */
var numeric_validation_form_id = "2443556";
var dropdown_textarea_form_id = "2446227";
var image_form_id = "2443556";
var thank_you_alert_form_id = "2443556";

$(document).ready(function (e) {

    if(window.location.href.indexOf(dropdown_textarea_form_id) > -1) {
        $('#id123-control'+dropdown_cid).change(function () {
            fill_textarea($(this).val());
        });
    }

    if(window.location.href.indexOf(numeric_validation_form_id) > -1) {
        $('*[id^="id123-control'+phone_cid+'"]').keypress(function (event) {
            phone_number_actions();
        });
    }
    if(window.location.href.indexOf(thank_you_alert_form_id) > -1) {
        $('#id123-thankyou').css("color","#2BAF2B");
    }

});

if(window.location.href.indexOf(image_form_id) > -1) {
    $('img').on("dblclick", function (event) {
        $(this).css("width", "980px");
        $(this).css("z-index", "100000");
        $(this).css("position", "relative");
        $(this).css("margin-left", "-70px");
		var parent_c = $(this).closest(".fieldcontainer.currentPageActive");
        $(".fieldcontainer.currentPageActive").not(parent_c).css("-webkit-opacity", "0.3");
        $(".fieldcontainer.currentPageActive").not(parent_c).css("-moz-opacity", "0.3");
        $(".fieldcontainer.currentPageActive").not(parent_c).css("opacity", "0.3");
        $(".fieldcontainer.thebuttons").not(parent_c).css("-webkit-opacity", "0.3");
        $(".fieldcontainer.thebuttons").not(parent_c).css("-moz-opacity", "0.3");
        $(".fieldcontainer.thebuttons").not(parent_c).css("opacity", "0.3");
        var resize = 200; // resize amount in percentage
        var origH = 132;  // original image height
        var origW = 198; // original image width
        var mouseX = event.x;
        var mouseY = event.y;
        var newH = origH * (resize / 100);
        var newW = origW * (resize / 100);

        // Set the new width and height
        $('.uberfieldlat').css("height", newH);
        $('.uberfieldlat').css("width", newW);
    });

   // $('img').on("click", function () {
      //  $(this).css("width", "inherit");
      //  $(this).css("z-index", "auto");
       // $(this).css("margin-left", "initial");
      //  $(".fieldcontainer.currentPageActive").css("-webkit-opacity", "1");
       // $(".fieldcontainer.currentPageActive").css("-moz-opacity", "1");
       // $(".fieldcontainer.currentPageActive").css("opacity", "1");
       // $(".fieldcontainer.thebuttons").css("-webkit-opacity", "1");
      //  $(".fieldcontainer.thebuttons").css("-moz-opacity", "1");
      //  $(".fieldcontainer.thebuttons").css("opacity", "1");
      //  $('.uberfieldlat').css("height", 132);
      //  $('.uberfieldlat').css("width", 198);
  //  });
}
function phone_number_actions(){
    var keycode = event.which;
    if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
        alert("Please insert only numeric values.");
        event.preventDefault();
    }
}

function fill_textarea(val)
{
    val = $( '#id123-control'+dropdown_cid ).val();
    switch(val) {
        case "Request":
            $( '#id123-control'+textarea_cid ).css("background-color","#2BAF2B");
            $( '#id123-control'+textarea_cid ).css("color","white");
            break;
        case "Proposal":
            $( '#id123-control'+textarea_cid ).css("background-color","#1BA8CE");
            $( '#id123-control'+textarea_cid ).css("color","white");
            break;
        case "Suggestion":
            $( '#id123-control'+textarea_cid ).css("background-color","#FFC83E");
            $( '#id123-control'+textarea_cid ).css("color","#4C4C4C");
            break;
        default:
            $( '#id123-control'+textarea_cid ).css("background-color","#FFE9E9");
            $( '#id123-control'+textarea_cid ).css("color","#4C4C4C");
    }
    var textarea_message_value = 'This is a demo message for subject "'+val+'", adding a nice background color and a suited font color.';
    $( '#id123-control'+textarea_cid ).val( textarea_message_value ) ;
}
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.

6 Comments

  1. Mel says:

    Where would you host the js files?

    • Olivian Stoica says:

      Hi,

      Sorry for the delay. You can upload your JS files on a platform that provides this type of service (e.g. GitHub). However, if you already own a website and have access to your files through an FTP client, I’d recommend that you add your JS there. But GitHub and similar services are great and reliable when you don’t have a server. If you require more assistance or have more questions, don’t hesitate to ask our support specialists for help at support@123contactform.com

      Thanks!

  2. Tim F says:

    Olivian where can reliable JS snippets be found? Do you provide any more guidance as to how to create and integrate these scripts?

    • Olivian Stoica says:

      Hi Tim!

      To use your own JavaScript on your web form, go to the SettingsAdvanced section under the Form tab. Enable either Add a JS script to your form or Add a JS script to the Thank You page of your form, depending on your scenario. You should have your script uploaded on a server and copy its URL in the designated box. You can either trigger your script while the user is completing the form or only after submission, on the Thank You page.

      As for your request, to provide any more guidance, I’m afraid that the examples from the article are all I have. But I’d encourage you to contact our support specialists at support@123contactform.com. They will surely provide you with better help and resources.

      Thanks!

  3. Jason H says:

    Hi – the examples don’t seem to work, also where can i see the JS examples not the forms? I can’t seem to find any examples of how to interact with the form.

    • Olivian Stoica says:

      Hello,

      I apologize for that. I’ve fixed the issue. You can check the examples now. I’ve also updated the article with the script that we’ve used. Thanks! 🙂

Leave a Reply

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