Bootstrap form isnt' responsive/collapsible

Question

I've designed a contact page form in bootstrap, I would like to know with what scaffolding I should wrap the form to make it collapsible.

How and where do I wrap the form element to make it fully responsive?

Full Fiddle Attached

.video_contain{
    position: absolute;


    margin:0 auto;
    width: 100%;
    height: 100%;
    cursor: none !important;
}

video {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -100;
/*    background-position: center;
    background-size: cover;*/
    cursor: none !important;

}


/*form steps and itzuv*/
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
    height: 100%;
    /*Image only BG fallback*/

    /*background = gradient + image pattern combo*/
    background:
            linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
    font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

    /*stacking fieldsets above each other*/
    position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#msform input, #msform textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#msform .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
    padding:20px;
    background-color: rgba(83, 107, 166, 0.36);
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #27AE60;
    color: white;
}

Thank!

Answer 1

It depends on what you want the form to look like at the different screen sizes. Right now it's staying small and centered on large screens, and overflowing on small screens. If I assume you mostly want to keep it from overflowing on small screens, what do you want it to look like when it is smaller?

The simplest place to start is to change width to max-width on your #msform element: https://jsfiddle.net/1Lbz5shs/1/

(Updated: https://jsfiddle.net/1Lbz5shs/2/)

#msform {
  max-width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

instead of

#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

It looks like it will need some other tweaks, most likely in a media query like this:

@media (max-width:400px) {
  /* styles for small screens here */ 
  /* stack the 'step indicators' on small screens */
#progressbar li:after {content:none;}
  #progressbar li {
    clear:both;
    float:none;
    margin:20px auto;
  }
}

Also...can't help but mention cursor: none !important; ...all I can say is please don't! There's no reason to make your users guess where their mouse is, and on a touch device, there's not a cursor anyway...if you really want to hide it, maybe put it on some kind of timeout so that it disappears when the mouse is still for a second or two, and show it again when it moves again?