Animated login modal with sliding parts

jquery
bootstrap
#1

Hi
I am trying to replicate the hotmail outlok login with sliding parts, but it doesn’t work. Maybe I need to use ().on(). Can you help me please? I forgot to mention, I am using bs3, w3schools. jquery part is not switching, not sliding on click. Thank you, Frank.
This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
	.formcontainer{
    	display:inline-block;
        float:left;
		width:360px;
        height:300px;
        overflow-x: hidden;
    	background:pink;
		padding:25px;
    }
    .container{
    	width:400px;
        height:380px;
        overflow-x: hidden;
    	background:pink;
		
    }
	.containergroup{
    	width:840px;
        height:320px;
        overflow-x: auto;
    	background:pink;
    }
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(){
    //alert("The paragraph was clicked.");
	 $(".containergroup").css("transform", " translate(410px, 300px)");
  });
  $(".buttonback").click(function(){
    //alert("The paragraph was clicked.");
	 $(".containergroup").css("transform", " translate(-410px, 300px)");
  });
});
</script>
<body>

<div class="container">
  
  <form >
  <div class="containergroup">
  <div class="formcontainer">
  <h2>Vertical (basic) form</h2>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="" class="btn btn-default buttonnext">Next</button>
    </div>
    
     <div class="formcontainer">
     <h2>Vertical (basic) form message</h2>
     
        <div class="form-group">
          <label for="pwd">Message:</label>
          <textarea class="" id="msg" placeholder="Enter message" name="msg"></textarea>
        </div>

        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
		<button type="" class="btn btn-default buttonback">Back</button>
     </div>
	 </div>
  </form>
</div>

</body>
</html>

0 Likes

#2

That’s not very helpful.

Can you explain what doesn’t work? What is it doing that you don’t expect it to do, or what is it not doing that you expect it to do?

1 Like

#3

Remember what happens when you click a button on a form. the form gets submitted and cleared!!! You once again need to prevent default as mentioned multiple multiple multiple multiple times in your other thread.

Once its working what do you expect to happen when you move the form horizontally 410px to the right (which will be invisible because it is outside the right side of your fixed width pink box). Then it looks like you were going to move it back -410px which would make it invisible out of the left side of the box.

You would only have needed to move it back to zero because zero is where it started. of course you can never click the back button because the whole form is still invisible out of the right side of the pink box.

Assuming you wanted to horizontally slide the form you could do it like this.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.formcontainer {
	display:inline-block;
	float:left;
	width:400px;
	overflow: hidden;
	background:pink;
	padding:25px;
}
.container {
	width:400px;
	min-height:380px;
	overflow: hidden;
	background:pink;
}
.containergroup {
	width:840px;
	background:pink;
	transition:all 1s ease;
	transform:translateX(0);
}
.slide{
	transform:translateX(-410px)
}
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(e){
	 e.preventDefault();
	 $('.containergroup').addClass('slide');
  });
  $(".buttonback").click(function(e){
	 e.preventDefault();
	 $(".containergroup").removeClass('slide');
  });
});
</script>
<body>
<div class="container">
  <form >
    <div class="containergroup">
      <div class="formcontainer">
        <h2>Vertical (basic) form</h2>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="remember">
            Remember me</label>
        </div>
        <button type="" class="btn btn-default buttonnext">Next</button>
      </div>
      <div class="formcontainer">
        <h2>Vertical (basic) form message</h2>
        <div class="form-group">
          <label for="pwd">Message:</label>
          <textarea class="" id="msg" placeholder="Enter message" name="msg"></textarea>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="remember">
            Remember me</label>
        </div>
        <button type="" class="btn btn-default buttonback">Back</button>
      </div>
    </div>
  </form>
</div>
</body>
</html>
0 Likes

#4

Hi
I am sorry, as I click on the next button, it should move to the <textarea>, (also a transition is missing, I will add it), than clicking on back , it should slide back to email-password section. I realized the values are wrong, that supposed to be -360 to fit the second part correctly, then preventing submition.
yes your version is working, much better then mine, just I need to make ajustments at the second part. also it doesn’t work the bootstrap part at textarea, can I get help?
I would like to ask if for any reason I need to use two forms, how to submit them with one submit button? thank you, frank

0 Likes

#5

You would use two forms if you were processing the data differently or saving each stage but there’s no reason why you can’t use one main form in your example and have the submit button at the end.

0 Likes

#6

thank you, the textarea doesn’t work as bootstrap form-group, can you help me please? thank you, frank

0 Likes

#7

Post your updated code and explain what doesn’t work and what is supposed to happen.

0 Likes

#8

this is my latest code:
I added transition too

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
	.formcontainer{
    	display:inline-block;
        float:left;
		width:360px;
        height:300px;
        overflow-x: hidden;
    	background:pink;
		padding:25px;
    }
    .container{
    	width:380px;
        height:380px;
        overflow-x: hidden;
    	background:pink;
		
    }
	.containergroup{
    	width:840px;
        height:320px;
        overflow-x: auto;
    	background:pink;
    }
	.slide{
	transform:translateX(-360px);
        -webkit-transition:  2s; /* For Safari 3.1 to 6.0 */
        transition:  2s;
}
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(e){
	 e.preventDefault();
	 $('.containergroup').addClass('slide');
  });
  $(".buttonback").click(function(e){
	 e.preventDefault();
	 $(".containergroup").removeClass('slide');
  });
});
</script>
<body>

<div class="container">
  
  <form >
  <div class="containergroup">
  <div class="formcontainer">
  <h2>Vertical (basic) form</h2>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="" class="btn btn-default buttonnext">Next</button>
    </div>
    
     <div class="formcontainer">
     <h2>Vertical (basic) form message</h2>
     
        <div class="form-group">
          <label for="pwd">Message:</label>
          <textarea class="" id="msg" placeholder="Enter message" name="msg"></textarea>
        </div>

        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
		<button type="" class="btn btn-default buttonback">Back</button>
     </div>
	 </div>
  </form>
</div>

</body>
</html>

0 Likes

#9

Ok just going out for an hour. Back later.

0 Likes

#10

thank you, frank
ps: I need to go to work after 930pm I finish and back home, thank you, frank

0 Likes

#11

You didn’t add the transition to the right element. You added it so .slide but that class gets removed so there is no transition when removed. The class needs to be in place by default.

e.g.


.containergroup {
	width:840px;
	height:320px;
	overflow-x: auto;
	background:pink;
	transition:  2s;
}
.slide {
	transform:translateX(-360px);
}

No need for prefixes on the transition these days.

The textarea isn’t working because you removed the form-control class. Put it back.

<textarea class="form-control" id="msg" placeholder="Enter message" name="msg"></textarea>

Also remove the height:300px from .formcontainer as that is nonsense and you rarely want a fixed height on fluid content. All it does in your page is limit the height and give you a horrible scrollbar.

0 Likes

#12

thank you, it realy amazing. the only thing I can see is that the distance is a bit big between contact form an moving subtitle.
here is the updated version:
thank you again. now I can transfer the floating placeholder parts and validation. thank you again.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
	.formcontainer{
    	display:inline-block;
        float:left;
		width:360px;
        height:300px;
        overflow-x: hidden;
    	background:pink;
		padding:25px;
    }
    .container{
    	width:380px;
        height:410px;
        overflow-x: hidden;
    	background:pink;
		
    }
	.containergroup{
    	width:840px;
        height:340px;
        overflow-x: auto;
    	background:pink;
		-webkit-transition: 2s; /* For Safari 3.1 to 6.0 */
		transition: 2s;
    }
	.slide{
	transform:translateX(-360px);
	
    
}
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(e){
	 e.preventDefault();
	 $('.containergroup').addClass('slide');
  });
  $(".buttonback").click(function(e){
	 e.preventDefault();
	 $(".containergroup").removeClass('slide');
  });
});
</script>
<body>

<div class="container">
  
  <form >
  <h2>Contact form</h2>
  <div class="containergroup">
  
  <div class="formcontainer">
  <h2>Your details</h2>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="" class="btn btn-default buttonnext">Next</button>
    </div>
    
     <div class="formcontainer">
     <h2>Your message</h2>
     
        <div class="form-group">
          <label for="pwd">Message:</label>
          <textarea class="form-control" id="msg" placeholder="Enter message" name="msg"></textarea>
        </div>

        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
		<button type="" class="btn btn-default buttonback">Back</button>
     </div>
	 </div>
  </form>
</div>

</body>
</html>

also if I put it in bs3 modal , wil it work in the same way? thank you, frank

0 Likes

#13

You are still not listening. :slight_smile:

I’ve just been prescribed hearing aids for myself but maybe this will help you :wink:

GET RID OF THE HEIGHT ON THE FORMCONTAINER ELEMENT AS THE SCROLLBAR IS ANNOYING

Adjust the 25px padding-top that you have on .formcontainer to reduce the space. If you want even less space then remove the bottom margin on the h2.

Try it and see and then report back.

0 Likes

#14

Hi Paul
I tried but it pushes everything down. instead I placed the whole experiment in a bs3 modal, added a few things like reset-button submit button, contact radio button that I need to learn to customise also. unfortunately as I collapse the window to see how does it work on a mobile devices, I noticed the disadvantage of the fixed values, here is the priority for fixing. also I noticed the ‘padding’ mostly left-right in the modal that I feel it is big. please help me, thank you, frank .

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
	.formcontainer{
    	display:inline-block;
        float:left;
		width:360px;
        overflow-x: hidden;
    	background:pink;
		padding:25px;
    }
    .container{
    	width:380px;
        height:380px;
        overflow-x: hidden;
    	background:lightgreen;
		
    }
	.containergroup{
    	width:840px;
        height:340px;
        overflow-x: auto;
    	background:pink;
		-webkit-transition: 2s; /* For Safari 3.1 to 6.0 */
		transition: 2s;
    }
.contacttitle{
	padding-top:15px;
    }
	.slide{
	transform:translateX(-360px);
	
    }
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(e){
	 e.preventDefault();
	 $('.containergroup').addClass('slide');
  });
  $(".buttonback").click(function(e){
	 e.preventDefault();
	 $(".containergroup").removeClass('slide');
  });
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="contacttitle">Contact form</h2>
        </div>
        <div class="modal-body">
          <div class="container">
  
  <form >
  
  <div class="containergroup">
  <div class="formcontainer">
  <h2>Your details</h2>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="" class="btn btn-default buttonnext">Next</button>
    </div>
    
     <div class="formcontainer">
     <h2>Your message</h2>
     
        <div class="form-group">
          <label for="pwd">Message:</label>
          <textarea class="form-control" id="msg" placeholder="Enter message" name="msg"></textarea>
        </div>
	
	<div class="form-group">
		<label for="pwd">Can we contact you?</label>
        	<div class="radio">
           	   <label><input type="radio" name="optradio" checked>Yes, conform registration deatils</label>
        	</div>
        	<div class="radio">
                   <label><input type="radio" name="optradio">No</label>
        	</div>
	</div>
		<button type="" class="btn btn-default buttonback">Back</button>
		<button type="reset" class="btn btn-default">Reset</button>
		<button type="submit" class="btn btn-default">Submit</button>
     </div>
	 </div>
  </form>
</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

0 Likes

#15

should I change formcontainers to table and it’s 2 cells?

0 Likes

#16

Remember when I said you were not listening? It seems you still aren’t listening! What part of this sentence do you not understand:

Not only did you ignore that comment for the 5th time of asking you went and added a fixed height to the other element at the same time. If you continue to ignore my advice then there’s not much point in me answering. You need to start thinking for yourself and look at what you are doing.

Fixed heights and widths are prone to break and should be used with care.

No you should not.

Use Flex or indeed use bootstrap classes because that’s what you are using. That means learn bootstrap first.

I have refactored the code again to be fluid so pay special attention to the comments in the html. No fixed widths or heights are used and the layout is fluid.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.formcontainer {
	/*display:inline-block; useless when float is active*/
	/*width:360px;
	/*overflow-x: hidden; No No No */
	/*background:pink;No No No*/
	padding:25px;
}
/* .container { no no no: Do not modify bootstrap rules directly */
	/* width:380px; No No No */
	/* height:380px; No No No */
	/*overflow-x: hidden; No No No */
	/*
	background:lightgreen;
}
*/
.my-container {
	width:100%;
	overflow:hidden;
	background:pink;
}
.containergroup {
	/* width:840px; no no no */
	/* height:340px; No No No */
	/* overflow-x: auto; No No No */
	/* -webkit-transition: 2s;NO No Not needed these days - For Safari 3.1 to 6.0 */
	transition: 2s;
	display:flex;
}
.containergroup > * {
	flex:1 0 100%
}
.contacttitle {
	padding-top:15px;
}
.slide {
	transform:translateX(-100%);
}
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(e){
	 e.preventDefault();
	 $('.containergroup').addClass('slide');
  });
  $(".buttonback").click(function(e){
	 e.preventDefault();
	 $(".containergroup").removeClass('slide');
  });
});
</script>
</head>
<body>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog"> 
      
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="contacttitle">Contact form</h2>
        </div>
        <div class="modal-body">
          <form class="my-container">
            <div class="containergroup">
              <div class="formcontainer">
                <h2>Your details</h2>
                <div class="form-group">
                  <label for="email">Email:</label>
                  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                </div>
                <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="remember">
                    Remember me</label>
                </div>
                <button type="" class="btn btn-default buttonnext">Next</button>
              </div>
              <div class="formcontainer">
                <h2>Your message</h2>
                <div class="form-group">
                  <label for="pwd">Message:</label>
                  <textarea class="form-control" id="msg" placeholder="Enter message" name="msg"></textarea>
                </div>
                <div class="form-group">
                  <label for="pwd">Can we contact you?</label>
                  <div class="radio">
                    <label>
                      <input type="radio" name="optradio" checked>
                      Yes, conform registration deatils</label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="optradio">
                      No</label>
                  </div>
                </div>
                <button type="" class="btn btn-default buttonback">Back</button>
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="submit" class="btn btn-default">Submit</button>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Do not ever directly modify the bootstrap classes as that will break everything. Add your own class if you need to modify a bootstrap component but do so with care because bootstrap is a grid system and many of the default classes work in conjunction with other classes so you can’t just suddenly reduce padding or change margins/width or height without knowing the implications of doing so.

0 Likes

#17

I am sorry for inconveniences but I am still learning. I just copied over my previous work in bootstrap modal realizing somthing is wrong, facing that, bootstrap requires ajustments in order to work conform expectance. that is where I do not have enough experience yet. your version is a lot better tha mine, experience is experience. I need to ajust sliding, and fields touching right side. thank you anyway, it is a great help.

0 Likes

#18

The sliding is perfect in my example as is the fields so don’t touch them.

You can adjust the speed of the transition but don’t touch the measurements or padding as they are perfect.

Refer to my demo not yours!

0 Likes

#19

Hi Paul
sorry for inconvenience, I tested your code in firefox and it is amazing however I tested in internet explorer and there the result was different. I met strange things with IE already, I don’t understand why.
and I am sorry again for the width and height, I just carried out primary experiments on my own to test my primary idea. with mistakes and a lot of help, it works but the next level (making it fluid) was beyond my experience, your help is amazing, thank you again, frank
ps: about ie11: I made a glowing button following youtube tutorial and it works with firefox, with ie don’t.
ps2: I don’t want to be cheeky but I am wondering what is the way to get the message with the second part? send it to an email server, or something else? what is the way to handle this option?

Blockquote

0 Likes

#20

IE11 is pretty broken with regard to using flex and in a couple of years you won’t need to worry anyway. Edge is also switching to a chrome based browser so that will die off in a few years also.

In your example the problem in IE11 is due to a box-sizing bug with flex:1 0 100% and the 25px padding on the element. IE11 incorrectly resolves the width without accounting for the padding and makes the element 50px too wide. This is a bug that can’t be fixed unbless you remove the padding and place the padding on inner elements instead.

Like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.formcontainer {
	/*display:inline-block; useless when float is active*/
	/*width:360px;
	/*overflow-x: hidden; No No No */
	/*background:pink;No No No*/
	padding:25px 0;
}
/* .container { no no no: Do not modify bootstrap rules directly */
	/* width:380px; No No No */
	/* height:380px; No No No */
	/*overflow-x: hidden; No No No */
	/*
	background:lightgreen;
}
*/
.my-container {
	width:100%;
	overflow:hidden;
	background:pink;
}
.containergroup {
	/* width:840px; no no no */
	/* height:340px; No No No */
	/* overflow-x: auto; No No No */
	/* -webkit-transition: 2s;NO No Not needed these days - For Safari 3.1 to 6.0 */
	transition: 2s;
	display:flex;
}
.containergroup > * {
	flex:1 0 100%;
}
.contacttitle {
	padding-top:15px;
}
.formcontainer .form-group, .checkbox, .formcontainer h2 {
	padding:0 25px;
}
.form-group-last{margin-bottom:0;}
.slide {
	transform:translateX(-100%);
}
</style>
<script>
$(document).ready(function(){
  $(".buttonnext").click(function(e){
	 e.preventDefault();
	 $('.containergroup').addClass('slide');
  });
  $(".buttonback").click(function(e){
	 e.preventDefault();
	 $(".containergroup").removeClass('slide');
  });
});
</script>
</head>
<body>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog"> 
      
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="contacttitle">Contact form</h2>
        </div>
        <div class="modal-body">
          <form class="my-container">
            <div class="containergroup">
              <div class="formcontainer">
                <h2>Your details</h2>
                <div class="form-group">
                  <label for="email">Email:</label>
                  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                </div>
                <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="remember">
                    Remember me</label>
                </div>
                <div class="form-group">
                  <button type="" class="btn btn-default buttonnext">Next</button>
                </div>
              </div>
              <div class="formcontainer">
                <h2>Your message</h2>
                <div class="form-group">
                  <label for="pwd">Message:</label>
                  <textarea class="form-control" id="msg" placeholder="Enter message" name="msg"></textarea>
                </div>
                <div class="form-group">
                  <label for="pwd">Can we contact you?</label>
                  <div class="radio">
                    <label>
                      <input type="radio" name="optradio" checked>
                      Yes, conform registration deatils</label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="optradio">
                      No</label>
                  </div>
                </div>
                <div class="form-group form-group-last">
                  <button type="" class="btn btn-default buttonback">Back</button>
                  <button type="reset" class="btn btn-default">Reset</button>
                  <button type="submit" class="btn btn-default">Submit</button>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

If you want to support IE11 then you will need to check your work at every stage in IE11 because it has quite a few bugs with flex and other properties and therefore must be tested at every iteration.

That is a programming question and best posted in the PHP forum if you are using PHP on the back end (or the general web development section if not). Otherwise if you are just looking for a general (simple) form to email script then google is your friend.

0 Likes