Forms

Home/Pages/Forms

underline input

120 text area

boxed input

120 text area
SOURCE CODE 
    <div class="qry-form-group">
        <textarea class="qry-input qry-input-text-area" placeholder= "text area" maxlength= "120"><textarea>
        <span class= "qry-input__text-right qry-input__text">
            <span"maxTextCount">120</span>
            text area
        <span>
    </div>
SOURCE CODE for boxed style 
    <form class="comment-form">
        <div class="form-group">
            <textarea class="form-control maxText" placeholder="text area" maxlength="120"><textarea>
            <span class= "qry-input__text-right qry-input__text">
                <span"maxTextCount">120</span>
                text area
            <span>
        </div>
    </form>
CLASS REFERENCE
class values / description
class="qry-form-group" Form group for input wrapper
class="form-group" Form group class for boxed style
class="form-control" Form control class for boxed input style
class="qry-input" The default class for input style
class="qry-input--text-area" Specified class for textarea
class="qry-input__text" Input text style
class="qry-input__text-right" Input text style position
class="maxText" Which input will show Maximum text input limit
class="maxTextCount" Maximum text input limit class

Underline form validation

Boxed form validation

SOURCE CODE FOR UNDERLINE FORM VALIDATION 
    <form class="contact-form" name="registration">
            <div class="form-row">

                <div class="col-md-12">
                    <input type="text" name="firstname" class="contact-form__input" placeholder="firstname"/> 
                </div>

                <div class="col-md-12">
                    <input type="text" name="lastname" class="contact-form__input" placeholder="lastname"/> 
                </div>

                <div class="col-md-12">
                    <input type="email" name="email" class="contact-form__input" placeholder="email"/> 
                </div>

                <div class="col-md-12">
                    <textarea data-required="text" name="message" class="contact-form__textarea form-control" placeholder="email"> </textarea> 
                </div>

                <div class="col-md-12">
                    <div class="btn-wrapper desktop-left">
                    <button class="btn button button__secondary button__secondary--rounded" type="submit">...</button>
                    </div> 
                </div>

            </div>
        </form>
SOURCE CODE FOR BOXED FORM VALIDATION 
    <form class="contact-form comment-form" name="registrationAlt">
            <div class="form-row">
                <div class="form-group form-field col-md-6">
                    <label for="firstname" class="show-label"> firstname <span class="error">*</span></label>
                    <input type="text" name="firstname" class="form-control input-form" id="firstname" placeholder="Your first name"/> 
                </div>
                <div class="form-group form-field col-md-6">
                    <label for="lastname" class="show-label"> lastname <span class="error">*</span></label>
                    <input type="text" name="lastname" class="form-control input-form" id="lastname" placeholder="Your first name"/> 
                </div>
                <div class="form-group form-field col-md-6">
                    <label for="email" class="show-label"> email <span class="error">*</span></label>
                    <input type="email" name="email" class="form-control input-form" id="email" placeholder="email"/> 
                </div>
                <div class="form-group textarea col-md-12">
                    <label for="message" class="show-label"> send message <span class="error">*</span></label>
                    <textarea id="message" name="message" data-required="text" cols="30" row="5" placeholder="write message" class="form-control"> </textarea> 
                </div>
            </div>
        </form>
class reference
class values / description
name= "[value]" Required message: firstname | lastname | email | number | message
class="contact-form" Deafault style class for contact form
class="comment-form" Boxed form style class

custom selection box

SOURCE CODE 
    <select class="contact-form__select ui">
        <option data-display="select">....</option>
        <option value="1">....</option>
        <option value="2">....</option>
    </select>
CLASS REFERENCE
class values / description
class="contact-form__select" The default style class for select
class="ui" Dropdown style class
data-display="select" Which option will be shown

custom checkbox

SOURCE CODE 
    <label class="checkbox">
        ...
        <input type="checkbox" class="checkbox__input"/>
        <span class="checkbox__check"></span>
    </label>
CLASS REFERENCE
class values / description
class="checkbox" The default style class for checkbox
class="checkbox__input" checkbox input style class
class="checkbox__check" Style for check mark

custom radio

SOURCE CODE 
    <label class="checkbox">
        ...
        <input type="radio" class="checkbox__input"/>
        <span class="checkbox__radio"></span>
    </label>
CLASS REFERENCE
class values / description
class="checkbox" The default style class for checkbox | radio
class="checkbox__radio" Style for check mark for radio button

range slider

02 /05
03 /05
04 /05
SOURCE CODE 
    <div class="qry-range-slider">
        <div class="qry-range-slider__text">
            <span class="qry-range-slider__text-lead">....</span>
            <span class="qry-range-slider__text-is">....</span>
        </div>
        <div class="qry-range-slider__progress">
            <span class="qry-range-slider__progress-bg"></span>
            <span class="qry-range-slider__progress-active"></span>
        </div>
    </div>
CLASS REFERENCE
class values / description
class="qry-range-slider" The wrapper class for slider progress
class="qry-range-slider__text" progress text style class
class="qry-range-slider__text-lead" Style for active number