Vue Bootstrap Forms Examples
Vue Forms - Bootstrap 4 & Material Design
Vue Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.
Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.
Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.
You can use material design version or default bootstrap style.
Login:
Login:
Form login
<template>
<!-- Material form login -->
<form>
<p class="h4 text-center mb-4">Sign in</p>
<div class="grey-text">
<mdb-input label="Your email" icon="envelope" type="email" />
<mdb-input label="Your password" icon="lock" type="password" />
</div>
<div class="text-center">
<mdb-btn>Login</mdb-btn>
</div>
</form>
<!-- Material form login -->
</template>
<script>
import {
mdbInput,
mdbBtn
} from 'mdbvue';
export default {
name: 'Basic',
components: {
mdbInput,
mdbBtn
},
}
</script>
<template>
<!-- Default form login -->
<form>
<p class="h4 text-center mb-4">Sign in</p>
<label for="defaultFormLoginEmailEx" class="grey-text">Your email</label>
<input type="email" id="defaultFormLoginEmailEx" class="form-control" />
<br />
<label for="defaultFormLoginPasswordEx" class="grey-text">Your password</label>
<input type="password" id="defaultFormLoginPasswordEx" class="form-control" />
<div class="text-center mt-4">
<button class="btn btn-indigo" type="submit">Login</button>
</div>
</form>
<!-- Default form login -->
</template>
Form register
<template>
<!-- Material form register -->
<form>
<p class="h4 text-center mb-4">Sign up</p>
<div class="grey-text">
<mdb-input label="Your name" icon="user" type="text" />
<mdb-input label="Your email" icon="envelope" type="email" />
<mdb-input label="Confirm your email" icon="exclamation-triangle" type="text" />
<mdb-input label="Your password" icon="lock" type="password" />
</div>
<div class="text-center">
<mdb-btn color="primary">Register</mdb-btn>
</div>
</form>
<!-- Material form register -->
</template>
<script>
import {
mdbInput,
mdbBtn
} from 'mdbvue';
export default {
name: 'Basic',
components: {
mdbInput,
mdbBtn
}
}
</script>
<template>
<!-- Default form register -->
<form>
<p class="h4 text-center mb-4">Sign up</p>
<label for="defaultFormRegisterNameEx" class="grey-text">Your name</label>
<input type="text" id="defaultFormRegisterNameEx" class="form-control" />
<br />
<label for="defaultFormRegisterEmailEx" class="grey-text">Your email</label>
<input type="email" id="defaultFormRegisterEmailEx" class="form-control" />
<br />
<label for="defaultFormRegisterConfirmEx" class="grey-text">Confirm your email</label>
<input type="email" id="defaultFormRegisterConfirmEx" class="form-control" />
<br />
<label for="defaultFormRegisterPasswordEx" class="grey-text">Your password</label>
<input type="password" id="defaultFormRegisterPasswordEx" class="form-control" />
<div class="text-center mt-4">
<button class="btn btn-unique" type="submit">Register</button>
</div>
</form>
<!-- Default form register -->
</template>
Form subscription
<template>
<!-- Material form subscription -->
<form>
<p class="h5 text-center mb-4">Subscribe</p>
<div class="grey-text">
<mdb-input label="Your name" icon="user" type="text" />
<mdb-input label="Your email" icon="envelope" type="email" />
</div>
<div class="text-center">
<mdb-btn outline="info">Send
<mdb-icon far icon="paper-plane" class="ml-1" />
</mdb-btn>
</div>
</form>
<!-- Material form subscription -->
</template>
<script>
import {
mdbInput,
mdbBtn
} from 'mdbvue';
export default {
name: 'Basic',
components: {
mdbInput,
mdbBtn
}
}
</script>
<template>
<!-- Default form subscription -->
<form>
<p class="h4 text-center mb-4">Subscribe</p>
<!-- Default input name -->
<label for="defaultFormSubscriptionNameEx" class="grey-text">Your name</label>
<input type="text" id="defaultFormSubscriptionNameEx" class="form-control">
<br>
<!-- Default input email -->
<label for="defaultFormSubscriptionEmailEx" class="grey-text">Your email</label>
<input type="email" id="defaultFormSubscriptionEmailEx" class="form-control">
<div class="text-center mt-4">
<button class="btn btn-outline-purple" type="submit">Send<i
class="far fa-paper-plane ml-2"></i></button>
</div>
</form>
<!-- Default form subscription -->
</template>
Form contact
<template>
<!-- Material form contact -->
<form>
<p class="h4 text-center mb-4">Write to us</p>
<div class="grey-text">
<mdb-input label="Your name" icon="user" group type="text" validate error="wrong" success="right" />
<mdb-input label="Your email" icon="envelope" group type="email" validate error="wrong"
success="right" />
<mdb-input label="Subject" icon="tag" group type="text" validate error="wrong" success="right" />
<mdb-textarea :rows="2" label="Your message" icon="pencil" />
</div>
<div class="text-center">
<mdb-btn outline="secondary">Send
<mdb-icon far icon="paper-plane" class="ml-1" />
</mdb-btn>
</div>
</form>
<!-- Material form contact -->
</template>
<script>
import {
mdbInput,
mdbBtn,
mdbtextarea
} from 'mdbvue';
export default {
name: 'Basic',
components: {
mdbInput,
mdbBtn,
mdbTextarea
}
}
</script>
<template>
<!-- Default form contact -->
<form>
<p class="h4 text-center mb-4">Write to us</p>
<!-- Default input name -->
<label for="defaultFormContactNameEx" class="grey-text">Your name</label>
<input type="text" id="defaultFormContactNameEx" class="form-control">
<br>
<!-- Default input email -->
<label for="defaultFormContactEmailEx" class="grey-text">Your email</label>
<input type="email" id="defaultFormContactEmailEx" class="form-control">
<br>
<!-- Default input subject -->
<label for="defaultFormContactSubjectEx" class="grey-text">Subject</label>
<input type="text" id="defaultFormContactSubjectEx" class="form-control">
<br>
<!-- Default textarea message -->
<label for="defaultFormContactMessageEx" class="grey-text">Your message</label>
<textarea type="text" id="defaultFormContactMessageEx" class="form-control" rows="3"></textarea>
<div class="text-center mt-4">
<button class="btn btn-outline-warning" type="submit">Send<i
class="far fa-paper-plane ml-2"></i></button>
</div>
</form>
<!-- Default form contact -->
</template>
A form within a card
To see more cards options, go here.
<template>
<!-- Card -->
<mdb-card>
<mdb-card-body>
<form>
<p class="h4 text-center py-4">Sign up</p>
<div class="grey-text">
<mdb-input label="Your name" icon="user" group type="text" validate error="wrong"
success="right" />
<mdb-input label="Your email" icon="envelope" group type="email" validate error="wrong"
success="right" />
<mdb-input label="Confirm your email" icon="exclamation-triangle" group type="text" validate
error="wrong" success="right" />
<mdb-input label="Your password" icon="lock" group type="password" validate />
</div>
<div class="text-center py-4 mt-3">
<mdb-btn color="cyan" type="submit">Register</mdb-btn>
</div>
</form>
</mdb-card-body>
</mdb-card>
<!-- Card -->
</template>
<script>
import {
mdbInput,
mdbBtn,
mdbCard,
mdbCardBody
} from 'mdbvue';
export default {
name: 'Basic',
components: {
mdbInput,
mdbBtn,
mdbCard,
mdbCardBody
}
}
</script>
<template>
<!-- Card -->
<div class="card mx-xl-5">
<!-- Card body -->
<div class="card-body">
<!-- Default form subscription -->
<form>
<p class="h4 text-center py-4">Subscribe</p>
<!-- Default input name -->
<label for="defaultFormCardNameEx" class="grey-text font-weight-light">Your name</label>
<input type="text" id="defaultFormCardNameEx" class="form-control">
<br>
<!-- Default input email -->
<label for="defaultFormCardEmailEx" class="grey-text font-weight-light">Your email</label>
<input type="email" id="defaultFormCardEmailEx" class="form-control">
<div class="text-center py-4 mt-3">
<button class="btn btn-outline-purple" type="submit">Send<i
class="far fa-paper-plane ml-2"></i></button>
</div>
</form>
<!-- Default form subscription -->
</div>
<!-- Card body -->
</div>
<!-- Card -->
</template>
A form within a modal
To see more modals options, go here.
<template>
<mdb-container>
<mdb-row>
<mdb-col size="12" class="text-center mb-5">
<mdb-btn @click.native="showModal = true" color="info">Launch modal contact form</mdb-btn>
<mdb-modal :show="showModal" @close="showModal = false" cascade class="text-left">
<mdb-modal-header class="primary-color white-text">
<h4 class="title">
<fa class="fas fa-pencil-alt" /> Contact form</h4>
</mdb-modal-header>
<mdb-modal-body class="grey-text">
<mdb-input size="sm" label="Your name" icon="user" group type="text" validate error="wrong"
success="right" />
<mdb-input size="sm" label="Your email" icon="envelope" group type="email" validate
error="wrong" success="right" />
<mdb-input size="sm" label="Subject" icon="tag" group type="text" validate error="wrong"
success="right" />
<mdb-textarea size="sm" :rows="2" label="Your message" icon="pencil" />
</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click.native="showModal = false">Close</mdb-btn>
<mdb-btn color="primary">Save changes</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbInput,
mdbTextarea,
mdbBtn,
mdbIcon,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbModalFooter
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbInput,
mdbTextarea,
mdbBtn,
mdbIcon,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbModalFooter
},
data() {
return {
showModal: false
};
}
}
</script>
Forms with icons
<template>
<mdb-row>
<mdb-col md="6" class="pb-2">
<mdb-card class="purple-text grey lighten-4">
<mdb-card-header class="pt-4 white">
<mdb-card-title><strong>Reservation</strong></mdb-card-title>
</mdb-card-header>
<mdb-card-body>
<mdb-row>
<mdb-col>
<mdb-input label="name" far icon="user" placeholder="John Smith" />
<mdb-input :min="2" :max="10" icon="edit" far type="number" label="guests" v-model="guests" />
<mdb-textarea :rows="4" label="special requests" far icon="comment"
placeholder="Vegetarian menu" />
</mdb-col>
</mdb-row>
</mdb-card-body>
<mdb-card-footer class="d-flex white justify-content-end">
<mdb-btn outline="purple" icon="paper-plane">Reserve table</mdb-btn>
</mdb-card-footer>
</mdb-card>
</mdb-col>
<mdb-col md="6">
<mdb-card class="purple-text">
<mdb-card-header class="pt-4 grey lighten-4">
<mdb-card-title><strong>Reservation</strong></mdb-card-title>
</mdb-card-header>
<mdb-card-body>
<mdb-row class="mb-4 pb-3">
<mdb-col>
<mdb-input outline label="name" icon="user" />
<mdb-input outline :min="2" :max="10" icon="edit" type="number" label="guests" />
<mdb-input type="textarea" outline :rows="4" label="special requests" icon="comment" />
</mdb-col>
</mdb-row>
</mdb-card-body>
<mdb-card-footer class="d-flex grey lighten-4 justify-content-end">
<mdb-btn outline="purple" icon="paper-plane">Reserve table</mdb-btn>
</mdb-card-footer>
</mdb-card>
</mdb-col>
</mdb-row>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbInput,
mdbTextarea,
mdbBtn,
mdbCard,
mdbCardHeader,
mdbCardTitle,
mdbCardFooter,
mdbCardBody
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbRow,
mdbCol,
mdbInput,
mdbTextarea,
mdbBtn,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbCardFooter,
mdbCardTitle
},
data() {
return {
guests: 4
};
}
};
</script>
Reservation form with icons MDB Pro component
<template>
<mdb-card>
<mdb-card-header class="pt-4 amy-crisp-gradient">
<mdb-card-title><strong>Reservation</strong></mdb-card-title>
</mdb-card-header>
<mdb-card-body>
<mdb-row>
<mdb-col>
<mdb-input label="name" icon="user" />
</mdb-col>
<mdb-col>
<mdb-select multiple v-model="selectOptions" label="meal" icon="check-square" />
</mdb-col>
</mdb-row>
<mdb-row>
<mdb-col>
<mdb-date-picker label="date" icon="calendar" />
</mdb-col>
<mdb-col>
<mdb-time-picker label="time" icon="clock" />
</mdb-col>
</mdb-row>
<mdb-row>
<mdb-col>
<mdb-input :min="2" :max="10" icon="user-friends" type="number" label="guests" />
</mdb-col>
<mdb-col>
<mdb-autocomplete icon="heart" clearClass="fa-lg" :data="food" label="Food preferences" />
</mdb-col>
</mdb-row>
<mdb-row>
<mdb-col>
<mdb-input type="textarea" label="special requests" icon="pen" :rows="2" />
</mdb-col>
</mdb-row>
</mdb-card-body>
<mdb-card-footer class="white d-flex justify-content-end">
<mdb-btn gradient="amy-crisp" class="black-text" icon="paper-plane" rounded>Reserve table</mdb-btn>
</mdb-card-footer>
</mdb-card>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbInput,
mdbBtn,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbCardTitle,
mdbSelect,
mdbDatePicker,
mdbTimePicker,
mdbCardFooter,
mdbAutocomplete
} from "mdbvue";
export default {
name: "FormsPage",
components: {
mdbRow,
mdbCol,
mdbInput,
mdbBtn,
mdbCard,
mdbCardBody,
mdbSelect,
mdbDatePicker,
mdbTimePicker,
mdbCardHeader,
mdbCardTitle,
mdbCardFooter,
mdbAutocomplete
},
data() {
return {
numeric: 'hello',
selectOptions: [{
text: "Breakfast",
value: "Option 1"
},
{
text: "Dinner",
value: "Option 2"
},
{
text: "Brunch",
value: "Option 3"
},
{
text: "Supper",
value: "Option 4"
}
],
food: [
"Glutenfree",
"Vegetarian",
"Vegan",
"Sugarfree"
]
};
}
};
</script>
Form elements with animated background MDB Pro component
<template>
<mdb-container class="text-center grey-text">
<h4 class="h4 pt-2">
Find your <span class="text-primary">connection</span>
</h4>
<hr class="p-2 mx-5" />
<mdb-input bg label="Name" />
<mdb-autocomplete bg label="Destination" :data="destination" />
<mdb-date-picker bg label="Date" />
<mdb-time-picker bg label="Time of arrival" />
<mdb-btn class="px-5" block color="primary">Search</mdb-btn>
<hr class="p-2 mt-5 mx-5" />
<div>
<mdb-icon class="mx-3" icon="subway" />
<mdb-icon class="mx-3" icon="bus" />
<mdb-icon class="mx-3" icon="tram" />
<mdb-icon class="mx-3" icon="car" />
<mdb-icon class="mx-3" icon="motorcycle" />
<mdb-icon class="mx-3" icon="shuttle-van" />
<mdb-icon class="mx-3" icon="plane" />
</div>
</mdb-container>
</template>
<script>
import {
mdbInput,
mdbBtn,
mdbIcon,
mdbContainer,
mdbDatePicker,
mdbTimePicker,
mdbCardFooter,
mdbAutocomplete
} from "mdbvue";
export default {
name: "FormsPage",
components: {
mdbInput,
mdbBtn,
mdbIcon,
mdbContainer,
mdbDatePicker,
mdbTimePicker,
mdbCardFooter,
mdbAutocomplete
},
data() {
return {
destination: [
"Amsterdam",
"Berlin",
"Cardiff",
"Dublin",
"Frankfurt",
"Glasgow",
"Helsinki",
"Istanbul",
"Kiev",
"Lisbon",
"Madrid",
"Nice",
"Oslo",
"Paris",
"Riga",
"Saint Petersburg",
"Turin",
"Vienna",
"Warsaw",
"Zagreb",
"Zurich"
]
}
}
};
</script>
Form elegant MDB Pro component
<template>
<section class="form-elegant">
<mdb-row>
<mdb-col md="5">
<mdb-card>
<mdb-card-body class="mx-4">
<div class="text-center">
<h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
</div>
<mdb-input label="Your email" type="email" />
<mdb-input label="Your password" type="password" containerClass="mb-0" />
<p class="font-small blue-text d-flex justify-content-end pb-3">Forgot
<a href="#" class="blue-text ml-1"> Password?</a></p>
<div class="text-center mb-3">
<mdb-btn type="button" gradient="blue" rounded class="btn-block z-depth-1a">Sign in</mdb-btn>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
with:</p>
<div class="row my-3 d-flex justify-content-center">
<mdb-btn type="button" color="white" rounded class="mr-md-3 z-depth-1a">
<mdb-icon fab icon="facebook" class="blue-text text-center" />
</mdb-btn>
<mdb-btn type="button" color="white" rounded class="mr-md-3 z-depth-1a">
<mdb-icon fab icon="twitter" class="blue-text" />
</mdb-btn>
<mdb-btn type="button" color="white" rounded class="z-depth-1a">
<mdb-icon fab icon="google-plus" class="blue-text" />
</mdb-btn>
</div>
</mdb-card-body>
<mdb-modal-footer class="mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">Not a member?
<a href="#" class="blue-text ml-1"> Sign Up</a></p>
</mdb-modal-footer>
</mdb-card>
</mdb-col>
</mdb-row>
</section>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon,
mdbModal,
mdbModalBody,
mdbModalFooter
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon,
mdbModal,
mdbModalBody,
mdbModalFooter
},
data() {
return {
showModal: false
};
}
}
</script>
<style>
.form-elegant .font-small {
font-size: 0.8rem;
}
.form-elegant .z-depth-1a {
-webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
}
.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
}
</style>
Form gradient MDB Pro component
<template>
<section class="form-gradient">
<mdb-row>
<mdb-col md="5">
<mdb-card>
<div class="header pt-3 peach-gradient">
<mdb-row class="d-flex justify-content-center">
<h3 class="white-text mb-3 pt-3 font-weight-bold">Log in</h3>
</mdb-row>
<mdb-row class="mt-2 mb-3 d-flex justify-content-center">
<a class="fa-lg p-2 m-2 fb-ic"><mdb-icon class="fab fa-facebook white-text fa-lg"/></a>
<a class="fa-lg p-2 m-2 tw-ic"><mdb-icon class="fab fa-twitter white-text fa-lg"/></a>
<a class="fa-lg p-2 m-2 gplus-ic"><mdb-icon class="fab fa-google-plus white-text fa-lg"/></a>
</mdb-row>
</div>
<mdb-card-body class="mx-4 mt-4">
<mdb-input label="Your email" type="text" />
<mdb-input label="Your password" type="password" containerClass="mb-0" />
<p class="font-small grey-text d-flex justify-content-end">Forgot
<a href="#" class="dark-grey-text ml-1 font-weight-bold"> Password?</a></p>
<mdb-row class="d-flex align-items-center mb-4 mt-5">
<mdb-col md="5" class="d-flex align-items-start">
<div class="text-center">
<mdb-btn color="grey" rounded type="button" class="z-depth-1a">Log in</mdb-btn>
</div>
</mdb-col>
<mdb-col md="7" class="d-flex justify-content-end">
<p class="font-small grey-text mt-3">Don't have an account?
<a href="#" class="dark-grey-text ml-1 font-weight-bold"> Sign up</a></p>
</mdb-col>
</mdb-row>
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
</section>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
}
}
</script>
<style>
.form-gradient .font-small {
font-size: 0.8rem;
}
.form-gradient .header {
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
}
.form-gradient input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #fd9267;
-webkit-box-shadow: 0 1px 0 0 #fd9267;
box-shadow: 0 1px 0 0 #fd9267;
}
.form-gradient input[type=text]:focus:not([readonly])+label {
color: #4f4f4f;
}
.form-gradient input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #fd9267;
-webkit-box-shadow: 0 1px 0 0 #fd9267;
box-shadow: 0 1px 0 0 #fd9267;
}
.form-gradient input[type=password]:focus:not([readonly])+label {
color: #4f4f4f;
}
</style>
Form light MDB Pro component
<template>
<section class="form-light">
<mdb-row>
<mdb-col md="5">
<mdb-card>
<mdb-card-body class="mx-4">
<div class="text-center">
<h3 class="pink-text mb-5"><strong>Sign up</strong></h3>
</div>
<mdb-input label="Your email" type="text" />
<mdb-input label="Your password" type="password" />
<mdb-input class="my-5" type="checkbox" id="defaultCheck16"
label="Accept the Terms and Conditions" />
<mdb-row class="d-flex align-items-center mb-4">
<mdb-col md="6" class="text-center">
<button type="button" class="btn btn-pink btn-block btn-rounded z-depth-1">Sign up</button>
</mdb-col>
<mdb-col md="6">
<p class="font-small grey-text d-flex justify-content-end">Have an account?
<a href="#" class="blue-text ml-1"> Log in</a></p>
</mdb-col>
</mdb-row>
</mdb-card-body>
<div class="footer pt-3 mdb-color lighten-3">
<mdb-row class="d-flex justify-content-center">
<p class="font-small white-text mb-2 pt-3">or Sign up with:</p>
</mdb-row>
<mdb-row class="mt-2 mb-3 d-flex justify-content-center">
<a class="fa-lg p-2 m-2 fb-ic"><mdb-icon class="fab fa-facebook white-text fa-lg"> </mdb-icon></a>
<a class="fa-lg p-2 m-2 tw-ic"><mdb-icon class="fab fa-twitter white-text fa-lg"> </mdb-icon></a>
<a class="fa-lg p-2 m-2 gplus-ic"><mdb-icon class="fab fa-google-plus white-text fa-lg"> </mdb-icon></a>
</mdb-row>
</div>
</mdb-card>
</mdb-col>
</mdb-row>
</section>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
}
}
</script>
<style>
.form-light .font-small {
font-size: 0.8rem;
}
.form-light [type="radio"]+label,
.form-light [type="checkbox"]+label {
-size: 0.8rem;
}
.form-light [type="checkbox"]+label:before {
top: 2px;
width: 15px;
height: 15px;
}
.form-light input[type="checkbox"]+label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.form-light input[type="checkbox"]:checked+label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #EB3573 #EB3573 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.form-light .footer {
border-bottom-left-radius: .3rem;
border-bottom-right-radius: .3rem;
}
</style>
Form dark MDB Pro component
<template>
<section class="form-dark">
<mdb-row>
<mdb-col md="5">
<mdb-card class="card-image"
:style="{'backgroundImage': 'url(https://mdbootstrap.com/img/Photos/Others/pricing-table7.webp)', 'width': '28rem'}">
<div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
<div class="text-center">
<h3 class="white-text mb-5 mt-4 font-weight-bold"><strong>SIGN</strong>
<a class="green-text font-weight-bold"><strong> UP</strong></a></h3>
</div>
<mdb-input label="Your email" type="text" />
<mdb-input label="Your password" type="password" />
<mdb-input class="my-5" type="checkbox" id="defaultCheck17"
label="Accept the Terms and Conditions" />
<mdb-row class="d-flex align-items-center mb-4">
<div class="text-center mb-3 col-md-12">
<mdb-btn color="success" rounded type="button" class="btn-block z-depth-1">Sign in</mdb-btn>
</div>
</mdb-row>
<mdb-col md="12">
<p class="font-small white-text d-flex justify-content-end">Have an account?
<a href="#" class="green-text ml-1 font-weight-bold"> Log in</a></p>
</mdb-col>
</div>
</mdb-card>
</mdb-col>
</mdb-row>
</section>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
}
}
</script>
<style>
.form-dark .font-small {
font-size: 0.8rem;
}
.form-dark [type="radio"]+label,
.form-dark [type="checkbox"]+label {
font-size: 0.8rem;
}
.form-dark [type="checkbox"]+label:before {
top: 2px;
width: 15px;
height: 15px;
}
.form-dark .md-form label {
color: #fff;
}
.form-dark input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=text]:focus:not([readonly])+label {
color: #fff;
}
.form-dark input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=password]:focus:not([readonly])+label {
color: #fff;
}
.form-dark input[type="checkbox"]+label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border: 1.5px solid #fff;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.form-dark input[type="checkbox"]:checked+label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #00c851 #00c851 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
</style>
Form simple MDB Pro component
<template>
<section class="form-simple">
<mdb-row>
<mdb-col md="5">
<mdb-card>
<div class="header pt-3 grey lighten-2">
<mdb-row class="d-flex justify-content-start">
<h3 class="deep-grey-text mt-3 mb-4 pb-1 mx-5">Log in</h3>
</mdb-row>
</div>
<mdb-card-body class="mx-4 mt-4">
<mdb-input label="Your email" type="text" />
<mdb-input label="Your password" type="password" containerClass="mb-0" />
<p class="font-small grey-text d-flex justify-content-end">Forgot
<a href="#" class="dark-grey-text font-weight-bold ml-1"> Password?</a></p>
<div class="text-center mb-4 mt-5">
<mdb-btn color="danger" type="button" class="btn-block z-depth-2">Log in</mdb-btn>
</div>
<p class="font-small grey-text d-flex justify-content-center">Don't have an account?
<a href="#" class="dark-grey-text font-weight-bold ml-1"> Sign up</a></p>
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
</section>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
} from 'mdbvue';
export default {
name: 'FormsPage',
components: {
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon
}
}
</script>
<style>
.form-simple .font-small {
font-size: 0.8rem;
}
.form-simple .header {
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
}
.form-simple input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #ff3547;
-webkit-box-shadow: 0 1px 0 0 #ff3547;
box-shadow: 0 1px 0 0 #ff3547;
}
.form-simple input[type=text]:focus:not([readonly])+label {
color: #4f4f4f;
}
.form-simple input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #ff3547;
-webkit-box-shadow: 0 1px 0 0 #ff3547;
box-shadow: 0 1px 0 0 #ff3547;
}
.form-simple input[type=password]:focus:not([readonly])+label {
color: #4f4f4f;
}
</style>