Fullscreen Form Interface

Wonderfull ! I will use it in my next project!

But how do i track which radio button is checked?

Hi, can anyone advise how I’d amend the code if I only wanted to use the “review section” for user input and not the “one-by-one questions” section? Any help appreciated 😉

Does anyone know how to get autofocus working on this so the cursor is ready when the question changes?
Using both ‘autofocus’ and ‘required’ doesn’t seem to work?

Amazing post, Mary!
How would you enable autofocus on all of the text fields? It seems to only be working on the first input area.

How i can change Email for “Submit” button?

Hello, guys. I have a simple question, How I can change or delete the scrollbar? I mean, the scrollbar do a weird transition, when you are going to the next step of the form. I just want delete that scroll bar.

hi i want to give image uload option also in this form using php everything else is working f9 except image is not getting inserted in my db how can i do that

Fix for auto focus on clicking continue and pressing Return key.

Hey guys to fix the problem you have to edit the Javascript file and add the following lines.
setTimeout( function(){ document.querySelector('.fs-current > input').focus(); } , 500 );

you will have to add the following code in the event handlers. That is at

1) document.addEventListener( ‘keydown’, function( ev ) {} );
2) this.ctrlContinue.addEventListener( ‘click’, function(){} );
3) this.ctrlNavDots.forEach( function( dot, pos ) {} );

All of these are in FForm.prototype._initEvents() , my code with this fixed works smoothly and doesnt rely on jQuery

Replace with code below for autofocus on click Continue, press Enter or using Nav Dots

/** * init events */ FForm.prototype._initEvents = function() { var self = this; // show next field this.ctrlContinue.addEventListener( 'click', function() { self._nextField(); setTimeout( function(){ document.querySelector('.fs-current > input').focus(); } , 500 ); } ); // navigation dots if( this.options.ctrlNavDots ) { this.ctrlNavDots.forEach( function( dot, pos ) { dot.addEventListener( 'click', function() { self._showField( pos ); setTimeout( function(){ document.querySelector('.fs-current > input').focus(); } , 500 ); } ); } ); } // jump to next field without clicking the continue button (for fields/list items with the attribute "data-input-trigger") this.fields.forEach( function( fld ) { if( fld.hasAttribute( 'data-input-trigger' ) ) { var input = fld.querySelector( 'input[type="radio"]' ) || /*fld.querySelector( '.cs-select' ) ||*/ fld.querySelector( 'select' ); // assuming only radio and select elements (TODO: exclude multiple selects) if( !input ) return; switch( input.tagName.toLowerCase() ) { case 'select' : input.addEventListener( 'change', function() { self._nextField(); } ); break; case 'input' : [].slice.call( fld.querySelectorAll( 'input[type="radio"]' ) ).forEach( function( inp ) { inp.addEventListener( 'change', function(ev) { self._nextField(); } ); } ); break; /* // for our custom select we would do something like: case 'div' : [].slice.call( fld.querySelectorAll( 'ul > li' ) ).forEach( function( inp ) { inp.addEventListener( 'click', function(ev) { self._nextField(); } ); } ); break; */ } } } ); // keyboard navigation events - jump to next field when pressing enter document.addEventListener( 'keydown', function( ev ) { if( !self.isLastStep && ev.target.tagName.toLowerCase() !== 'textarea' ) { var keyCode = ev.keyCode || ev.which; if( keyCode === 13 ) { ev.preventDefault(); self._nextField(); setTimeout( function(){ document.querySelector('.fs-current > input').focus(); } , 500 ); } } } ); };

PS: I’m not a javascript person, but it worked for me and I realise it might not work *well* on selects and radios

Hope it helps someone 🙂

If you want to auto select the next input you can just add the following code after “self.isAnimating = false;” (line 310):
nextField.getElementsByTagName(‘input’)[0].focus();

Then you’ll have:

self.isAnimating = false;
nextField.getElementsByTagName(‘input’)[0].focus();

I don’t know if it’s the best solution but it worked for me (Shows an error in console in form review, but nothing that blocks the user to fill the form).

Hi thanks for sharing great post but i don’t want to review form how to remove that frame

Simplest solution to autofocus in each input is to add this:
document.querySelector ('.fs-current > input').focus ();
at the end of _nextField() function .

and set 1st input to autofocus

Thank for your share.

But i have a problem: i want to keep the last step (review & submit).

i have try to change something in fullscreenForm.js. for example:

// reached the review and submit step
onReview : function() { return false; } => return true

==> but …. T.T

thanks !!

This seems like it could be nicely altered to serve as an onboarding dialog with a new user. I’m thinking of what our new course documentation would look like in this format….

How can I have two color select options in the form? Any more added seem to only allow the color selected on the first one to be chosen.. and the others all default to the same color. Is there a way to allow for multiple color select options? For example background color, nav color, etc?

hi guys this is great! is it possible for me to write checkbox class? like you made radio button?