I have created custom checkbox in contactform7. It looks great, you can check checkbox, but doesn`t send information to ant email after submition. Any ideas how to pass it?
Code for the checkbox:
<span class="wpcf7-form-control-wrap your-services">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item">
<label class="custom-control custom-checkbox">
<input type="checkbox"class="custom-control-input"> Checkbox text
<span class="custom-control-indicator"></span>
<span class="wpcf7-list-item-label custom-control-description"></span>
</span>
</span>
The input is missing the name="" parameter.
<span class="wpcf7-form-control-wrap your-services">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="test_checkbox" class="custom-control-input"> Checkbox text
<span class="custom-control-indicator"></span>
<span class="wpcf7-list-item-label custom-control-description"></span>
</span>
</span>
Now you can get the checkbox value in the mail editor with [text_checkbox]
Related
Using BS4 the custom switch/checkbox can be added to the form. Unfortunately - the small (-sm) modification wont work. I attach a code sample and an image.
https://www.codeply.com/p/gZuRjGvqG2
What I want to achieve is to get the switch become as small (in height) as the input field itself. I cannot find "custom-control-sm" or similar class, and form-control-sm wont work.
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-table"></i>
</span>
</span>
<span class="input-group-prepend">
<span class="input-group-text">
<span class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-control-sm" aria-autocomplete="none" autocomplete="off" id="DefineAttributes" name="DefineAttributes" title="Define the attributes" value="true">
<label class="custom-control-label form-control-sm" for="DefineAttributes"></label>
</span>
</span>
</span>
<input type="text" class="form-control" aria-autocomplete="none" autocomplete="off" id="Attributes" name="Attributes" placeholder="Attributes ..." value="something">
<span class="input-group-append">
<a class="btn btn-sm btn-outline-primary " title="Select attributes" href="#">Select</a>
</span>
</div>
Had to do the following changes:
Add p-0 to <span class="input-group-text"> (the one for the checkbox).
Add "style=height: 0;" to <input type="checkbox" ... & <label class="custom-control-label ... to remove any height the invisible element has.
Adjust the position of the resultant slider with custom margins on the <span class="custom-control custom-switch">, i.e., added: "style="margin-left: 24px; margin-right: -12px;"
This should result in a proper looking slider, and in the sm size.
As you can see in the picture the height gets all crazy when I add a label element to the form-group I'm using Bootstrap 3.7
here is my HTML
<div class="form-group date input-group {{ $errors->has('medical_date_test') ? 'has-error' : ''}}">
<label>Medical date test <span class="required">*</span></label>
<input type="text" class="form-control" name="medical_date_test" value="{{ old('medical_date_test') }}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
here is a JSFiddle
https://jsfiddle.net/0d2a0kzr/
you just need to put a label outside the div class "form-group https://jsfiddle.net/j1aw98jm/2/
<label>Medical date test <span class="required">*</span></label>
<div class="form-group date input-group">
<input type="text" class="form-control" name="medical_date_test">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
how can I control size of inputs in Metro UI Framework? Bootstrap has class form-group-sm i guess, but have MetroUI something similar ?
MetroUI isn't as fully featured as Bootstrap but it has some simple options for inputs:
<!-- Checkbox -->
<label class="input-control checkbox">
<input type="checkbox" checked>
<span class="check"></span>
<span class="caption">Checkbox</span>
</label>
<!-- Small Checkbox -->
<label class="input-control checkbox small-check">
<input type="checkbox" checked>
<span class="check"></span>
<span class="caption">Checkbox</span>
</label>
<!-- Radio button -->
<label class="input-control radio">
<input type="radio">
<span class="check"></span>
<span class="caption">Radio</span>
</label>
<!-- Small radio button -->
<label class="input-control radio small-check">
<input type="radio">
<span class="check"></span>
<span class="caption">Small radio</span>
</label>
Text boxes can be default or big:
<div class="input-control text big-input">
<input type="text">
</div>
It also provides a couple of simple options for buttons:
<button class="button">Caption</button>
<button class="button mini-button">Caption</button>
<button class="button small-button">Caption</button>
<button class="button large-button">Caption</button>
Sorry if its a stupid question but I'm unable to figure this simple layout
This is my simply input field with a email field and if the users enters invalid email it shows error as seen below:
<div class="form-group">
<label for="txtEmail" class="col-sm-3 control-label">Email Address:</label>
<div class="col-sm-9">
<div class="input-group col-md-12 form-group has-feedback">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" id="txtEmail" class="form-control" placeholder="Enter Email Address" data-minlength="50" data-error="Please enter valid email address" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
And the result is displayed as:
I need something as shown below:
Hey I have a very simply question but I am not quite sure how to achieve this without using HTML tables. Basically what I want is the label to to be on the left with 3 radio button to its right. The thing is, I want each individual radio button to be aligned vertically.
For example:
Label - choice 1
..........- choice 2
..........- choice 3
The HTML structure I am using is as follows:
<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
Can anyone help me to align the form properly?
Thanks :)
EDIT
I found a very simply solution and was wondering whether is it an acceptable one: could you please tell me if it acceptable according to HTML standards?
<label for="radio1">Label</label>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 1</span></span>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 2</span></span>
and CSS:
.form-span {display:block}
The easiest way is to wrap everything in a div:
<div class="container">
<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>
and then add the following CSS:
.container{height:200px;}
label{float:left; height:100%;}
input{float:left;}
.form-span{display:block;}
Check out this jsFiddle to see a live example.
HTML
<label for="radio1">Label</label>
<div id="parentDiv">
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>
CSS
#parentDiv, label, input, span {
float:left;
}
input {
clear:both;
margin-left:5px;
}
span {
margin-left:5px;
}
Check it out : http://jsfiddle.net/gNHB7/