Posts Tagged with forms

Displaying 1-3 of 3 results.
Wiki: Bootstrap Form Inputswiki
posted by admin on October 12, 2016
Supported Form Controls
Bootstrap supports the following form controls:
  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Note: Inputs will NOT be fully styled if their type is not properly declared!

<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">

Bootstrap Textarea
The following example contains a textarea:

<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>

Bootstrap Checkboxes
Checkboxes are used if you want the user to select any number of options from a list of preset options.

The following example contains three checkboxes. The last option is disabled:

<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>

Use the .checkbox-inline class if you want the checkboxes to appear on the same line:

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

Bootstrap Radio Buttons
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

The following example contains three radio buttons. The last option is disabled:

<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>

Use the .radio-inline class if you want the radio buttons to appear on the same line:

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap Select List
Select lists are used if you want to allow the user to pick from multiple options.

The following example contains a dropdown list (select list):

<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
Read more
Resolved: Yii Readonly Field in CActiveForm form textField
posted by admin on March 30, 2016
My row in _form.php

<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
)); ?>

<p class="note">Fields with <span class="required">*</span> are required.</p>

<?php echo $form->errorSummary($model); ?>
. . .
<div class="row">
<?php echo $form->labelEx($model,'username'); ?>
<?php echo $form->textField($model,'username',array('size'=>50,'maxlength'=>50)); ?>
<?php echo $form->error($model,'username'); ?>
. . .
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>

<?php $this->endWidget(); ?>

</div><!-- form -->

I want to make my username readonlyRead more
Wiki: Wordpress Contact form without plugin. Контактная форма вордпресс без плагинаwiki
posted by admin on March 22, 2016
Creating the WordPress Page Template

Template Name: Contact Form

//If the form is submitted
if(isset($_POST['submitted'])) {

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {

//Check to make sure that the name field is not empty
if(trim($_POST['contactName']) === '') {
$nameError = 'You forgot to enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '') {
$emailError = 'You forgot to enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);

//Check to make sure comments were entered
if(trim($_POST['comments']) === '') {
$commentError = 'You forgot to enter your comments.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);

//If there is no error, send the email
if(!isset($hasError)) {

$emailTo = '';
$subject = 'Contact Form Submission from '.$name;
$sendCopy = trim($_POST['sendCopy']);
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);

if($sendCopy == true) {
$subject = 'You emailed Your Name';
$headers = 'From: Your Name <>';
mail($email, $subject, $body, $headers);

$emailSent = true;

} ?>

<?php get_header(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script>

<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">
<h1>Thanks, <?=$name;?></h1>
<p>Your email was successfully sent. I will be in touch soon.</p>

<?php } else { ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">There was an error submitting the form.<p>
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

<ol class="forms">
<li><label for="contactName">Name</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>

<li><label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>

<li class="textarea"><label for="commentsText">Comments</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
<li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></li>
<li class="screenReader"><label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></li>
<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Email me »</button></li>

<?php endwhile; ?>
<?php endif; ?>
<?php } ?>

<?php get_footer(); ?>

Styling the Form

.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding:10px; }

ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li {
clear: both;
float: left;
margin-bottom: 18px;
position: relative;
width: 100%;
ol.forms label {
cursor: pointer;
display: block;
float: left;
font-weight: bold;
padding-right: 20px;
width: 100px;
ol.forms input, ol.forms textarea {
border: 1px solid #7E8AA2;
border-radius: 3px;
font: inherit;
-moz-border-radius: 3px;
padding: 2px;
-webkit-border-radius: 3px;
width: 214px;
ol.forms textarea { height: 300px; width: 334px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; margin-left: 20px; }
ol.forms li.textarea .error {
display: block;
position: absolute;
right: 0;
top: 0;
width: 100px;
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms li.buttons button {
background: #ff9800;
border: none;
color: #000;
cursor: pointer;
font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif;
overflow: hidden;
padding: 6px 3px 3px 3px;
text-transform: uppercase;
width: auto;
ol.forms li.buttons button:hover { color: #222; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float: none; width: auto; }

Enhancing the form with some jQuery

$(document).ready(function() {
$('form#contactForm').submit(function() {
$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
hasError = true;
if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contactForm').slideUp("fast", function() {
$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');

return false;


Don't forget
*enqueue(include) file


Edit row, edit loading.gif directory to your's, or if your image in your theme directory, you can replace to get_template_directory_uri()

$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
Read more