I have a simple 1-page website using Bootstrap 3 (yes, I know BS3 is old, but that's ok for now). My site is hosted on Hostmonster. My domain is registered with Google Domains.
I've never built a contact form from scratch before, but I understand the general principles.
I copied the code from this Bootstrap example website.
Something is clearly missing, but I'm not sure what. I'm pretty sure it needs "form" tags, along with "action" and "post" elements.
Basically, nothing happens when I click the send button.
For additional information, I do have a Drupal website set up under this same domain. It has a Drupal contact form, which does work, so I don't believe this is a problem on the server side. But Drupal doesn't let me see the actual html under the hood.
Can some kind soul please review this code and help me get the form working? This is the code exactly as I copied it from the link above.
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail#something.com</p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
Related
For Odoo 13, I have installed the module "Droggol Mass Mailing Templates v13"to get better snippets for products and event (https://apps.odoo.com/apps/modules/13.0/droggol_mass_mailing_themes/).
But, on each of the DYNAMIC-Snippets's DialogBox : Products, Blogs and Events : the select2 input-box (widget.recordIDs) to choose a selection of products, blogs or event... remains empty no matter the user input (>2 characters):
dialog.xml file:
<templates>
<div t-name="droggol_mass_mailing_themes.dialog">
<div class="container">
<div class="form-group row">
<label t-esc="widget.title" class="col-form-label font-weight-bold col-md-3"/>
<div class="col-sm-9">
<input type="hidden" class="d-select2-input" name="selection" t-att-value="widget.recordsIDs"/>
</div>
</div>
</div>
</div>
</templates>
I am making a web tool in angular 5 to help in the creation of new XML.
I am having trouble passing around the values of inputs and keeping them in the same input at the same time.
I Have a form with an event of ngSubmit that uses as a paremeter the reference of an ngForm
<form class="form-group" (ngSubmit)="createSimpleTypeList(f)" #f="ngForm" >
<div class="container">
<div class="row">
<div class="col-sm-12" >
<button class="btn btn-danger flex ">Construir Json!</button>
</div>
</div>
</div>
<hr>
<div class="container" *ngFor="let type of objSimpleType;let i =index">
<hr>
<div class="row">
<div class="col-sm-3">
<input type="text" [(ngModel)]="type.name" name="nameType"/>
<br>
Inserte el nombre del tipo:
</div>
<div class="col-sm-3">
<input type="text" [(ngModel)]="type.type" name="type"/>
<br>
Inserte el tipo:
</div>
<div class="col-sm-2">
<input type="number" [(ngModel)]="type.min" name="min"/>
<br>
Inserte minimo:
</div>
<div class="col-sm-2">
<input type="number" [(ngModel)]="type.max" name="max"/>
<br>
Inserte maximo:
</div>
<div class="col-sm-2">
<input type="checkbox" name="number" /> Numero?
</div>
</div>
</div>
<hr>
</form>
This is the createSimpleTypeList method
console.log(form.value.nameType);
this.objSimpleType.push({
'-name': form.value.nameType,
'xsd:restriction': {
'-base': form.value.type,
'xsd:minLength': {
'-value': form.value.min
},
'xsd:maxLenght': {
'-value': form.value.max
}
}
});
this.typeList.emit(form.value.nameType);
this.sharedNameSpace.emit(this.namespace);
The problem I am having is that I have not found a way to push new items into objSimpleType, without erasing the value of inputs, and if I manage to not erase the value of the inputs then the values of the form wont push.
this is how it looks.how the inputs work right now
This is what I need
How the inputs should be
I am still new to angular, and I would really appreciate the help.
Now that I have looked found the solution, I had two mistakes in the code above.
First my logic was not well executed, I needed to work with unique IDs,and call them dynamically.
Second, I was having trouble to call them , and after reading a lot, I found that I can call the parameters of a Json with brackets[].
"form.value['nameType' + this.i]" --Something like this is what i Needed.
I'm creating a prestashop 1.7.2.1 module. Prestashop comes with bootstrap 4 support.
I'm trying to use the from validation example from https://v4-alpha.getbootstrap.com/components/forms/#validation with the following code:
<div class="container">
<form>
<div class="form-group row has-success">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name#example.com">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-warning">
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name#example.com">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-danger">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name#example.com">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
</form>
</div>
using Pingendo 4 (bootstrap 4 desktop app editor) it works properly.
but when I add this code to my prestashop module all the inputs contains the validation icons repeated all through the input's width.
any ideas ?
PrestaShop's bootstrap CSS for these icons is being overriden by PrestaShop's own CSS.
When disabling the background property, it works fine.
You can modify the CSS and change background property to background-color.
I am experimenting with the excellent Bootstrap DateTimePicker plugin but appear to have hit the buffers right at the start. The page control appears correctly but the calendar button is entirely unresponsive - no picker actually pops up. I have created this fiddle to illustrate the problem. Examining the console output for the fiddle does not reveal anything obviously wrong.
I noticed that the sample code uses jQuery 1.8.3 so I tried dropping back to that but to no avail. I suspect that I am getting something wrong here but I cannot quite figure out what that might be. I'd be most grateful for any help.
The test markup I am using is quite straightforward - and copied directly from the Datetimepicker example docs
<div class="form-group">
<label for="dtp_singleshot" class="col-md-2 control-label">Choose</label>
<div class="input-group date form_datetime col-md-5" data-link-
field="dtp_singleshot">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_singleshot" value="" /><br/>
</div>
First of all, you have to remove readonly attribute from your input. You don't need second hidden input. Then you have to assign id of dtp_singleshot to your input-group or input.
<div class="form-group">
<label for="dtp_singleshot" class="col-md-2 control-label" id="dtp_singleshot">Choose</label>
<div class="input-group date form_datetime col-md-5" data-link-
field="dtp_singleshot">
<input class="form-control" size="16" type="text" value="">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
JSFIDDLE
I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/