I can't for the life of me figure out the spacing on my form.
As you'll see the checkboxes are all bunched up and look rubbish... can you league of coding legends help?
http://200620.co.uk/
This is the layout...
<div class="wpcf7-wrap">
<div class="col-sm-6">
[text* your-name placeholder "Name:"]
</div>
<div class="col-sm-6">
[text* your-email placeholder "Email:"]
</div>
<div class="col-sm-6">
[select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"]
</div>
<div class="col-sm-6">
[select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"]
</div>
<div class="col-sm-6">
[text your-text-1 placeholder "Dietary Requirements:"]
</div>
<div class="col-sm-6">What do you drink?
[checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]
</div>
<div class="col-sm-6">
[text your-text-3 placeholder "What do you want to hear?"]
</div>
<div class="col-sm-12">
[textarea your-text-4 placeholder "Any Special Message for us?"]
</div>
<div class="col-xs-12 wpcf7-button-wrap">
[submit "RSVP Baby"]
</div>
</div>
Hopefully this puts you on the right track. I would move your checkboxes to after the other 2x2 columns so that it's all the way across. Also.. Wrap the whole thing in a div. Be careful not to add extra line breaks on your form, as Contact Form 7 uses the "Auto-P" function.
/*this should make the row stand on it's own*/
.checkbox-row {
margin: 1.5rem 0 .5rem 0;
}
<div class="wpcf7-wrap">
<div class="col-sm-6"> [text* your-name placeholder "Name:"] </div>
<div class="col-sm-6"> [text* your-email placeholder "Email:"] </div>
<div class="col-sm-6"> [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"] </div>
<div class="col-sm-6"> [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"] </div>
<div class="col-sm-6"> [text your-text-1 placeholder "Dietary Requirements:"] </div>
<div class="col-sm-6"> [text your-text-3 placeholder "What do you want to hear?"] </div>
<div class="col-sm-12 checkbox-row"><div>What do you drink? [checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]</div></div>
<div class="col-sm-12"> [textarea your-text-4 placeholder "Any Special Message for us?"] </div>
<div class="col-xs-12 wpcf7-button-wrap"> [submit "RSVP Baby"] </div>
</div>
Just add below CSS code. Hope this help you.
.wpcf7-form-control.wpcf7-checkbox{
float: left;
width: 100%;
margin: 0;
padding: 0;
}
Related
How can I use Contact Form 7 form tags or shortcodes in WordPress Posts and Pages.
Any ideas would be appreciated.
Thanks in advance!
I believe you're looking for "how to add new fields and on submit button in contact form 7. "
The syntax for the form is like something below.
Here's a demo working code for you.
<div class="row clearfix">
<div class="form-group col-md-4 col-sm-6 col-xs-12">
<div class="form-group-inner">
<div class="icon-box">
<label for="your-name">
<span class="icon flaticon-user168"></span>
</label>
</div>
<div class="field-outer">
[text* your-name name:username id:your-name placeholder "Your Name"]
</div>
</div>
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-12">
<div class="form-group-inner"><div class="icon-box">
<label for="your-email">
<span class="icon flaticon-new100"></span>
</label>
</div>
<div class="field-outer">
[email* name:email id:your-email placeholder "Email"]
</div>
</div>
</div>
<div class="form-group col-md-4 col-sm-12 col-xs-12">
<div class="form-group-inner">
<div class="icon-box">
<label for="your-subject">
<span class="icon flaticon-edition2"></span>
</label>
</div>
<div class="field-outer">
[text* name:subject id:your-subject placeholder "Subject"]
</div>
</div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<div class="form-group-inner">
[textarea name:message placeholder "Your Message"]
</div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12 text-right">
[submit class:input-submit class:hvr-bounce-to-right name:submit-form "Send Message"]</div>
</div>
Paste the above code into your new contact form and it should create a new form with name, subject, email and message fields. You can call this form by using shortcode either in page or in your ".php" file. I used this in a php file like below:
<?php echo do_shortcode( "[contact-form-7 id='184' title='Contact form 1']", $ignore_html = false ); ?>
You can also post the shortcode from the contact form 7 into the page directly. Here is a small tutorial for you.
// here is input field with the label, "WLC Name" I want to align in the same row.
<div class="form-group row">
<label class="col-md-2 col-form-label text-right">WLC Name</label>
<div class="col-lg-2 col-sm-11">
<input type="text"value="BSNL-WLCXXX" class="form-control" formControlName="wlc_name" id="wlc_name" #wlcname>
// I want to put below div in the same row, but it is not coming.
<div>
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
</div>
// html code for the tag : app-right-tooltip
<div>
<span class="glyphicon glyphicon-question-sign blue" style="font-size: 15px " aria-hidden="true" [popover]="getData()"
popoverPlacement="right"
[popoverOnHover]="false"
[popoverCloseOnMouseOutside]="false">
</span>
</div>
snapshot
You need to float app-right-tooltip
<app-right-tooltip style="float:right"></app-right-tooltip>
Otherwise, you need to have some structure to wrap this component
<div class="row">
<div class="md-2">...</div>
<div class="md-10"><app-right-tooltip /></div>
</div>
Try this
css
.exampleClass {
dispaly: inline-block;
}
Html
<div class="exampleClass">
<app-right-tooltip [toolTipText]="getToolTipText('system_basic_wlc_name')"></app-right-tooltip>
</div>
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>
The margin takes only affect for the first line (after automatic line break (depends on the size) will be ignored).
The HTML:
<div class="BWForm_form-group">
<div class="col-md-3 BWTextLeft">
<label class="control-label" for="ContactPersonName">Name des Ansprechpartners<span style="color:red; display: inline-block;"> *</span></label>
</div>
<div class="col-md-5">
<div class="col-md-12">
<input class="text-box single-line input-validation-error" data-val="true" data-val-required="The Name of contact person field is required." id="ContactPersonName" name="ContactPersonName" value="" type="text">
</div>
</div>
<div class="col-md-4">
<span class="field-validation-error" data-valmsg-for="ContactPersonName" data-valmsg-replace="true"><span class="" for="ContactPersonName">The Name of contact person field is required.</span></span>
</div>
</div>
The css:
.field-validation-error {
color: #B94A48;
font-weight: bold;
margin: 15px;
}
The "BWForm_form-group" is inherited by the bootstrap class form-group."BWTextLeft" will only align:left.
What can I do to fix it ?
It looks like that click (the problem is right to my green arrow and vertical line)
Ty for helping
oh ok remove the margin left from field-validation-error and then add a new class like to the container
<div class="col-md-12 custom">
and the css looks like the below
custom {
margin:15px;
}
demo example here
if you dont want to mess with the margins of the col-md-12 then you should add a surrounding div like this
<div class="col-md-12">
<div class="custom">
<div class="field-validation-error">
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout?
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
If someone could help point out a way to fix this I would be extremely appreciative!
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12 as a width on your input elements and that should fix the issue:
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://jsfiddle.net/yR7Ap/18/
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
Your form is too wide for the .span5 column. Try adding this above:
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.