How was this form created?

How was this form created?
0

#1

Howdy folks,

I have been looking at forms on the web and this one is really great:

https://www.coutts.com/become-a-client.html

How do you think this was created? JS for sure! jQuery maybe?

Cheers,

Ben.


#2

Inspecting something with devtools is a great practice. If you click the “Sources” tab, you can find all the files that are feeding into the rendered page. In this one, the “etc” folder contains a couple of JS files, both containing a fair amount of jQuery. I can’t really speak to what frameworks might be involved, especially handling back end. But I could certainly imagine cloning something like this using nothing more than JS, if the questions were to be hardcoded. It’s just paired with a rich-as-buttah design aesthetic.


#3

Oh, I should elaborate: if you haven’t gotten much into jQuery and AJAX yet: yes, the ability to “have some content in the page be replaced by other content without reloading the page” is pretty much AJAX territory, and is made easier by jQuery. You can just point to an html element by its ID and say $("element").html(), or several similar methods.


#4

Thanks for the replies! I am quite good at jQuery but not touched AJAX yet but I am guessing this is done with this. I want to try and replicate it. Would you be able to point me in the right direction please?
Thanks!!


#5

I have been using the view source in chrome but I can not find the JS:

Where am I looking?


#6

You are looking at a script provided by Adobe. On the left you can see some other resources under courts.com, which is where you will probably find their actual website code. @AbdiViklas says that the scripts are under the etc folder, so I would look there. I would check for myself but I am on mobile


#7


#8

Thank you everyone, I will have a good snoop around.

I am thinking that I will be fadeIn in jQuery for this!

Cheers


#9

And granted, I don’t actually see what makes it tick anywhere in there, but I could imagine something like this:

// html div id "form" contains the first multi-choice question, with buttons "yes" and "no"
//event handler, e.g. on submit:
if ($("#button").text() === "yes" {
  loadPage2();
} else {
  // loadPageB();
}

function loadPage2() {
  $("#form).html(
    //html content, hopefully taking advantage of [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to avoid the hell of trying to write html code within js code, with a ton of single and double quotes
  );
}

#10

I was thinking that it would be something along these lines - cheers for the help I really appreciate it.

Cheers to all . :slight_smile:


#11

Benjamin the form was produce in JQ.