0
私はクライアントがその情報で完了する事前登録フォームを持っています。私はfirebaseを使用してデータを保存します。 しかし、コンテンツは、私が望むように見えません。私は、次のようになるが、私は（多分私はすべてのグーグルの疲れている）、それを行うにはどのよう見当がつかない：名前、電話番号.... のような次のフィールドの左にHTMLとCSSを使用してモーダル内のフォームを編集する方法
- シフト
- フォームが送信されると、ページがこの
のように見えるように「ありがとう、私たちは連絡いたします」、
をメッセージの小さな確認カードをフィールド下のテキストエリアを挿入します
<!DOCTYPE html>
<html lang="en">
<head>
<!Required meta tags always come first -->
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<! Custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Top logo nav bar -->
<nav class="navbar navbar-light bg-light navbar-fixed-top">
<a class="navbar-brand" href="#">
<img src="images/Digimaat_logo1.jpg" width="30" height="30" class="d-inline-block align-top" alt="Play'n Learn" height="26">
Play & Learn</a>
</nav>
<div id="stage">
<div id="stage-caption">
<h1 class="display-3">That's handy, Harry! Stick with Play and Learn</h1>
<p>I see Play and Learn in your future</p>
<a href="#myModal" class="btn btn-lg btn-success" data-toggle="modal">Reserve a seat now</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reserve a seat</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<h4>Text in a modal</h4>
<p>Due to limited space, you can provide your contact information to be notified when registration begins</p>
<hr>
<p><small class="text-muted">PS: We will never share your information!</p>
<form>
<div class="form-group">
<label class="col-lg-2 control-label formGroupExampleInput">Your full Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Your</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="feature-one">
<div class="container">
<div class="row-">
<div class="feature-content">
<div class="col-lg-6">
<iframe width="100%" height="315"Insert></iframe>
</div>
<div class="col-lg-5 col-lg-offset-1">
<h6>Watch this </h6>
<h2>Witness the power of play.</h2>
<p class="lead"> Lorem ipsum dolor.........................</p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p></div> <hr>
<a href="#myModal" class="btn btn-lg btn-success" data-toggle="modal">Reserve a seat now</a>
</div>
</div>
</div>
</section>
<section id="feature-two" class="feature-sign">
<div class="container">
<div class="row">
<div class="feature-content">
<div class="col-lg-6 feature-caption">
<h6> Unique space </h6>
<h2>Our friends develop their ingeniouty toward the future.</h2>
<p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<div class="col-lg-6 text-sm-center hidden-sm-down"></div>
<!--Insert image here--->
<img src="...."alt="somethin"
</div>
</div>
</div>
</section>
<section id="feature-one">
<div class="container">
<div class="row-">
<div class="feature-content">
<div class="col-lg-6">
<iframe width="100%" height="315"Insert></iframe>
</div>
<div class="col-lg-5 col-lg-offset-1">
<h6>Watch this </h6>
<h2>Witness the power of play.</h2>
<p class="lead"> Lorem ipsum dolor.........................</p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p></div>
</div>
</div>
</div>
</section>
<section id="feature-two" class="feature-sign">
<div class="container">
<div class="row">
<div class="feature-content">
<div class="col-lg-6 feature-caption">
<h6> Unique space </h6>
<h2>Our friends develop their ingeniouty toward the future.</h2>
<p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<div class="col-lg-6 text-sm-center hidden-sm-down"></div>
<!--Insert image here--->
<img src="...."alt="somethin"
</div>
</div>
</div>
<footer id="main-footer">
<div class="container">
<div class="row">
<div class="col-md-6">
© 2018 Play & Learn - Botswana. <br>
Coded with passion by: Play & Learn
</div>
<div class="col-md-2">
<h6> What we offer</h6>
<ul class="list-unstyled">
<li><a href="">Programming</a></li>
<li><a href="">Robotics</a></li>
<li><a href="">Engeneering</a></li>
</ul>
</div>
<div class="col-md-2">
<h6> Information</h6>
<ul class="list-unstyled">
<li><a href="">Contact us</a></li>
<li><a href="">Tel: 0574545254</a></li>
<li><a href="">Gaborone, Botswana</a></li>
</ul>
</div>
<div class="col-md-2">
<h6> Social</h6>
<ul class="list-unstyled">
<li><a href="">Facebook</a></li>
<li><a href="">Instangram</a></li>
<li><a href="">Twitter</a></li>
</ul>
</div>
</section>
<!--jquery first, then Bootstrap JS. -->
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
/*Css*/
/* Play and Learn.css*/
html,
body {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
color:#6c6f73;
}
h1,h2,h3,h4,h5 {
color: #333;
}
h6 {
text-transform: uppercase;
font-weight: bold;
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
img {
max-width: 100%;
}
.blockquote {
font-size: 1.6rem;
color: #333;
border: none;
padding: 0;
}
.blockquote-footer {
margin: 1rem 0 0;
}
#stage {
background-image:url('https://images.unsplash.com/photo-1448056975861-28196f26abd6?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80') no-repeat center center fixed;
background-size: 100%;
color: white;
height: 10%;
width: 100%;
display: flex;
aligh-items: center;
}
#stage-caption {
font-size: 1.4rem;
font-weight: 200;
max-width: 60rem;
margin: 0 auto;
text-align: center;
}
#stage-caption h1 {
color: white;
font-weight: bold;
text-transform: uppercase;
display: flex;
}
.modal-body {
text-align: left;
}
それはあなたのポストから明確ではないですが、付属のJavaScriptの欠如、私はあなたが解決策を書いて助けを探していると推測から：
ここで私が今持っているコードはありますか？ – DMcCallum83
私はJSのリソースを持っています。しかし、どんな入力をいただければ幸いですか？ – ytrao
セクションは何のために使われますか？ – Gagantous