<form action="mailto:mail#mail.com" method="post" class="wow fadeInUp" data-wow-delay="0.6s">
<div class="col-md-4 col-sm-6">
<input type="text" class="form-control" placeholder="Naam" name="name">
</div>
<div class="col-md-4 col-sm-6">
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control" placeholder="Onderwerp" name="subject">
</div>
<div class="col-md-12 col-sm-12">
<textarea class="form-control" placeholder="Bericht" rows="7" name"message"></textarea>
</div>
<div class="col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8">
<input type="submit" class="form-control" value="SHOOT MESSAGE">
</div>
</form>
The above code gives the underneath result when I 'shoot the message'.
It should fill in the message with the message from the form, same goes for the subject.
Now the question is: can this be done with HTML 5 only? I know that I can send it with PHP but that is not my question.
If you are able to use JavaScript, the following might come in handy:
Source: MailTo with HTML body
Related
HTML5 input date placeholder in Arabic browser (after changing the display language to be Arabic) is totally reversed and looks unacceptable
and this is the markup for each one:
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="col-lg-9 col-sm-9">
<input class="form-control" asp-for="#Model.EndDate" placeholder="mm-dd-yyyy"
autocomplete="off" type="date" id="endDate" max="2200-12-31">
</div>
<div class="col-lg-3 col-sm-3">
<label>إلى</label>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="col-lg-9 col-sm-9">
<input class="form-control" asp-for="#Model.StartDate" placeholder="mm-dd-yyyy"
autocomplete="off" type="date" max="2200-12-31" id="startDate">
</div>
<div class="col-lg-3 col-sm-3">
<label>من</label>
</div>
</div>
</div>
How to fix the revered placeholder text??
I succeeded to solve, by changing the control to be text and then applying bootstrap datepicker library on it , Just like in this demo:
https://jqueryui.com/resources/demos/datepicker/localization.html
$("#endDate").datepicker({ dateFormat: 'm-d-yy' }).datepicker($.datepicker.regional["ar"]);
$("#startDate").datepicker({ dateFormat: 'm-d-yy' }).datepicker($.datepicker.regional["ar"]);
<input class="form-control" lang="en-us" asp-for="#Model.EndDate" type="text" placeholder="شهر-يوم-سنة" autocomplete="off" id="endDate" max="2200-12-31">
<input class="form-control" lang="en-us" asp-for="#Model.StartDate" type="text" placeholder="mm-dd-yyyy" autocomplete="off" max="2200-12-31" id="startDate" value="">
The contact form on my website doesn't work on phones and it supposed to open a program like gmail or mail app to send a message to me or just send right away.
I don't really know how to search for this problem but already tried to find a solution on multiple forums and google but couldn't find any :(
hope you guys know how to help me out
my own website
(still learning html and css so please try keep it simple if you know a solution)
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center animateup">
<h2>Contact</h2>
</div>
</div>
<div class="gap-50"></div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 animateup">
<form role="form" action="mailto:jacootje14#gmail.com" method="post" enctype="text/plain">
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="Name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="email">Email Address</label>
<input class="form-control" type="email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="message">Message</label>
<textarea placeholder="Message" class="form-control" name="message" id="message" rows="5"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-lg btn-success">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
Comment:
Alright so now the mail works on mobile but now i have a new issue with the form because i cant type a message in the form before it opens outlook mobile app. (this issue also occurs on pc)
thanks in Advance!
I have the default register form in ASP.NET MVC5. I have added the Google Recaptcha but it doesn't align with the rest of the form as can be seen in the screen shot below. I have tried many different ways but was unsuccessful. I even looked at Bootstrap Recapture Form Tutorial website to check how they did it. Would anyone please guide me on how I can align the Recaptcha with the rest of the form using Bootstrap classes?
<form action="/Account/Register" class="form-horizontal" method="post" role="form">
<div class="validation-summary-valid text-danger" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Name">Name</label>
<div class="col-sm-3 col-md-3 col-lg-3">
<input class="form-control" data-val="true" data-val-length="The field Name must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Email">Email</label>
<div class="col-sm-3 col-md-3 col-lg-3">
<input class="form-control" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Password">Password</label>
<div class="col-sm-3 col-md-3 col-lg-3">
<input class="form-control" data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="g-recaptcha" data-sitekey="MY_KEY"></div>
<div class="form-group">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
</form>
Screen Shot:
Thank you
To center your google captcha you can apply this:
<div class="col-md-12 text-center">
<div class="g-recaptcha" data-sitekey="MY_KEY"></div>
<div class="form-group">
#if (TempData["recaptcha"] != null)
{
<p style="color:red">#TempData["recaptcha"]</p>
}
</div>
</div>
</div>
And apply css:
.g-recaptcha > div {
margin: 0 auto;
}
I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group">
<label for="input3">Input 3
<input name="input3" type="checkbox" id="input3">
</label>
</div>
<div class="form-group">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<button class="btn btn-default">Add</button>
</form>
</div>
If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form
Thanks
Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:
<div class="container">
<form class="form-inline">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
<label for="input3">Input 3
</label>
<input name="input3" type="checkbox" id="input3">
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<div class="col-xs-12 col-lg-1">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW
You can wrap those inputs with div and display:inline-block style to make them stay together.
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>