I am using Bootstrap 3. I am just unable to create message box which should have 4 rows inside. can anyone please help me? My code is below:
<div class="row">
<div class="col-lg-12">
<form action="" method="POST" enctype="multipart/form-data" id="form_id">
<div class="form-group">
<h5><label for="inputName">Name</label></h5>
<input type="text" name="career[name]" class="form-control" tabindex="1" placeholder="Enter your name" pattern="[a-zA-Z. ]{1,50}" required>
</div>
<div class="form-group">
<h5><label for="inputEmail">Email</label></h5>
<input type="email" name="career[email]" class="form-control" tabindex="2" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<h5><label for="inputMobile">Mobile</label></h5>
<input type="tel" name="career[mobile]" class="form-control" tabindex="3" placeholder="Enter your mobile number" pattern="[0-9]{10}" maxlength="10" required>
</div>
<div class="form-group">
<h5><label for="inputMessage">Message</label></h5>
<input type="text" name="career[message]" class="form-control" tabindex="4" placeholder="Write your details" required>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block" tabindex="5">Submit</button>
</form>
</div>
</div>
I want my message box something like this.
Your problem is you are not using textarea! Replace the below code:
<input type="text" name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required>
With:
<textarea name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required></textarea>
Related
when I submit this form, after entering some data, Gmail pops up but nothing is entered in it. What should I do so that the data I enter in the form gets entered in the email?
<form class="" action="mailto:exampl#gmail.com" method="post">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
You need to add the name attribute to each field, which will appear in the mail's body. It'll format itself as mail={your_message} and so on.
Your code becomes:
<form class="" action="mailto:exampl#gmail.com" method="post" enctype="text/plain">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com" name="email">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JSFiddle
I am developing my own website/application but I have a display problem on a title.
The web browser edge is in foreground and hide my title (Please, look at the picture with red rectangle to understand). The source code is bellow. I am doing something wrong ? I am using Bootstrap. Should I add CSS ?
<body>
<div id="divformulaire">
<h3>HERE IS MY PROBLEM:</h3>
<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
<hr/>
<input class="form-control" id="nothing1" name="nothing1" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing2" name="nothing2" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing3" type="number" name="nothing3" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing4" type="text" name="nothing4" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing5" type="text" name="nothing5" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing6" type="number" name="nothing6" placeholder="Nothing" required>
<hr/>
<span class="label label-default">Nothing</span>
<select class="form-control form-control-sm" id="nothing7" type="text" name="nothing7">
<option>Non</option>
<option>Oui</option>
</select>
<hr/>
<div class="form-group">
<label for="annonce">Nothing</label>
<textarea class="form-control" id="nothing8" name="nothing8" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="create" type="submit">Nothing</button>
</form>
</div>
</body>
Title problem
Your problem is that your div with the id of #divformulaire doesn't have any margin on the top. If you want the title to always be visible, you need to offset the entire div by roughly the amount of the browser topbar, where the URL is.
#divformulaire {
margin-top: 50px}
<body>
<div id="divformulaire">
<h3>HERE IS MY PROBLEM:</h3>
<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
<hr/>
<input class="form-control" id="nothing1" name="nothing1" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing2" name="nothing2" type="text" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing3" type="number" name="nothing3" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing4" type="text" name="nothing4" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing5" type="text" name="nothing5" placeholder="Nothing" required>
<hr/>
<input class="form-control" id="nothing6" type="number" name="nothing6" placeholder="Nothing" required>
<hr/>
<span class="label label-default">Nothing</span>
<select class="form-control form-control-sm" id="nothing7" type="text" name="nothing7">
<option>Non</option>
<option>Oui</option>
</select>
<hr/>
<div class="form-group">
<label for="annonce">Nothing</label>
<textarea class="form-control" id="nothing8" name="nothing8" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="create" type="submit">Nothing</button>
</form>
</div>
</body>
<form action="/contact/submit" method="POST">
<br style="clear:both">
<p style="margin-bottom: 25px; text-align: center; font-size: 20px"><b>Contact Form</b></p>
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="number" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<input class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140"></input>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
</form>
What I get when I console log the req.body of this post using console.log(req.body) is
{ name: 'aa',
email: 'xyz#gmail.com',
mobile: '232',
subject: 'yo',
submit: '' }
But not the the message.
Textarea is not a type of input, it's an element itself...
<textarea id="message" name="message"></textarea>
Here is the code to my form, if anyone has a way of fixing this that would be awesome.
<form id="rendered-form">
<div class="fb-text form-group field-name">
<label for="name" class="fb-text-label">Name <span class="required">*</span> </label>
<input type="text" required="" class="form-control name" name="name" id="name" aria-required="true"></div>
<div class="fb-email form-group field-email">
<label for="email" class="fb-email-label">Email <span class="required">*</span> </label>
<input type="email" required="" class="form-control email" name="email" id="email" aria-required="true"></div>
<div class="fb-text form-group field-phone">
<label for="phone" class="fb-text-label">Phone Number </label>
<input type="text" class="form-control phone" name="phone" id="phone"></div><div class="fb-undefined form-group field-message">
<label for="message" class="fb-textarea-label">Message <span class="required">*</span> </label>
<textarea type="textarea" required="" rows="5" class="form-control message" name="message" id="message" aria-required="true"></textarea></div>
<div class="fb-submit form-group field-button-1480832953294"><button type="submit" class="button-input btn btn-warning" name="button-1480832953294" style="warning" id="button-1480832953294">CONTACT US</button></div></form>
</div>
Here is the new code, I have just updated it and it still doesnt work.
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">We will contact you as soon as possible!</div>
</div>
<form id="rendered-form" action="mailto:zach#ztmartin.net" method="post">
<div class="fb-text form-group field-name">
<label for="name" class="fb-text-label">Name <span class="required">*</span> </label>
<input type="text" required="" class="form-control name" name="name" id="name" aria-required="true"></div>
<div class="fb-email form-group field-email">
<label for="email" class="fb-email-label">Email <span class="required">*</span> </label>
<input type="email" required="" class="form-control email" name="email" id="email" aria-required="true"></div>
<div class="fb-text form-group field-phone">
<label for="phone" class="fb-text-label">Phone Number </label>
<input type="text" class="form-control phone" name="phone" id="phone"></div>
<div class="fb-undefined form-group field-message">
<label for="message" class="fb-textarea-label">Message <span class="required">*</span> </label>
<textarea type="textarea" required="" rows="5" class="form-control message" name="message" id="message" aria-required="true"></textarea>
</div>
<div class="fb-submit form-group field-button-1480832953294">
<button type="submit" class="btn btn-primary">CONTACT US</button>
</div>
</form>
You should send your form through an action
<form action="example.php" method="post">
It doesn't have to be PHP, but it is an example for how to make an action attribute.
For posting data, you should put method="post" in your form tag, as in
<form method="post">
...
</form>
The default method is get.
The action attribute is not needed if your post url is the same as the current url. in fact, by not putting anything in your form tag, and assuming your page is found at http://myhost.com/mypage, you're actually using the equivalent of this:
<form action="http://myhost.com/mypage" method="get">
...
</form>
So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.