PopForms

Material Design Modal Forms

Contact Support

Created: 29/05/2016
By: ThemeLooks
www.themelooks.com
Email: support@themelooks.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

How to get help:

We will respond to buyers' questions via the contact form on our profile. We run support 24/7. You can expect a response within 24 hours.

Support requests are for:

Help using templates
Instructions setting up templates
Bug reports and fixes

Support requests aren’t for:

Help with 3rd party plugins
Integration of 3rd party plugins
Free Customization Requests of our templates

PopForms is a Material Design Modal Forms Set including login form, sign up form, forgot password form, subscribe from and contact form. Anyone can easily update/edit this plugin to follow our Well Sorted Documentation.

Main Features of "PopForms":

Based On Material Design Lite
Latest Bootstrap v3.3.6 Ready
Login Form
Sign Up Form
Forgot Password Form
Subscribe From
Working Contact Form
Unlimited Material Colors
Fully Responsive
Modern Cross Browser Support
W3C Validate Code

Other Features of "PopForms":

Google Fonts
FontAwesome Icons
Well Documented

Login Form Modal

Preview:

Markup:

<!-- Login Form Start -->
<div class="modal fade" id="loginFormModal" tabindex="-1" role="dialog" aria-labelledby="loginForm">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			<div class="loginForm">
				<div class="mdl-card mdl-shadow--2dp">
					<div class="mdl-card__title mdl-card--expand">
						<img src="img/logo.png" alt="">
					</div>
					<div class="mdl-card__supporting-text">
						<form action="#" method="post" id="loginForm">
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="loginUsername" id="loginUsername">
								<label class="mdl-textfield__label" for="loginUsername">Username</label>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="password" name="loginPassword" id="loginPassword">
								<label class="mdl-textfield__label" for="loginPassword">Password</label>
							</div>
							
							<button type="submit" class="login-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Login</button>
						</form>
					</div>
					<div class="mdl-card__actions mdl-card--border clearfix">
						<a href="#" class="pull-left mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#forgotFormModal" data-dismiss="modal">
							Forgot Password?
						</a>
						<a href="#" class="pull-right mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#signupFormModal" data-dismiss="modal">
							Create An Account
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Login Form End -->

Style:

/*------------------------------------*\
    4. LOGIN MODAL
\*------------------------------------*/
#loginFormModal {
    padding: 0 20px;
}
#loginFormModal .modal-dialog {
    max-width: 360px;
    margin: 30px auto;
}
#loginFormModal .modal-content {
    background-color: transparent;
}

.loginForm .mdl-card {
    width: auto;
}
.loginForm .mdl-card__title {
    padding-top: 0;
}
.loginForm .mdl-card__title img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.loginForm .mdl-card__supporting-text {
    width: 100%;
}

#loginForm input {
    outline: 0;
}
#loginForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#loginForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#loginForm .mdl-textfield {
    width: 100%;
}
.loginForm .mdl-card__actions {
    margin-top: 5px;
}
.loginForm .mdl-card__actions a {
    font-size: 12px;
}

Script:

var loginForm = $('#loginForm');
		
if ( loginForm.length ) {
	loginForm.validate({
		rules: {
			loginUsername: "required",
			loginPassword: "required"
		},
		errorPlacement: function (error, element) {
			return true;
		}
	});
}

Signup Form Modal

Preview:

Markup:

<!-- Signup Form Start -->
<div class="modal fade" id="signupFormModal" tabindex="-1" role="dialog" aria-labelledby="signupFormModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			<div class="signupForm">
				<div class="mdl-card mdl-shadow--2dp">
					<div class="mdl-card__title mdl-card--expand">
						<img src="img/logo.png" alt="">
					</div>
					<div class="mdl-card__supporting-text">
						<form action="#" method="post" id="signupForm">
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="singupName" id="singupName">
								<label class="mdl-textfield__label" for="singupName">Full Name</label>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="singupUsername" id="singupUsername">
								<label class="mdl-textfield__label" for="singupUsername">Username</label>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="singupEmail" id="singupEmail">
								<label class="mdl-textfield__label" for="singupEmail">E-mail Address</label>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="password" name="singupPassword" id="singupPassword">
								<label class="mdl-textfield__label" for="singupPassword">Password</label>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="password" name="singupPasswordAgain" id="singupPasswordAgain">
								<label class="mdl-textfield__label" for="singupPasswordAgain">Re-Type Password</label>
							</div>
							
							<button type="submit" class="singup-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Singup</button>
						</form>
					</div>
					<div class="mdl-card__actions mdl-card--border clearfix">
						<p class="pull-left">Already Have An Account?</p>
						<a href="#" class="pull-right mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#loginFormModal" data-dismiss="modal">
							Login
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Signup Form End -->

Style:

/*------------------------------------*\
    5. SIGNUP MODAL
\*------------------------------------*/
#signupFormModal {
    padding: 0 20px;
}
#signupFormModal .modal-dialog {
    max-width: 360px;
    margin: 30px auto;
}
#signupFormModal .modal-content {
    background-color: transparent;
}

.signupForm .mdl-card {
    width: auto;
}
.signupForm .mdl-card__title {
    padding-top: 0;
}
.signupForm .mdl-card__title img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.signupForm .mdl-card__supporting-text {
    width: 100%;
}

#signupForm input {
    outline: 0;
}
#signupForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#signupForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#signupForm .mdl-textfield {
    width: 100%;
}
.signupForm .mdl-card__actions {
    margin-top: 5px;
    padding-left: 15px;
}
.signupForm .mdl-card__actions p {
    margin-bottom: 0;
    margin-top: 8px;
}
.signupForm .mdl-card__actions a {
    font-size: 12px;
}

Script:

var signupForm = $('#signupForm');
		
if ( signupForm.length ) {
	signupForm.validate({
		rules: {
			singupName: "required",
			singupUsername: "required",
			singupEmail: {
				required: true,
				email: true
			},
			singupPassword: "required",
			singupPasswordAgain: {
				equalTo: "#singupPassword"
			}
		},
		errorPlacement: function (error, element) {
			return true;
		}
	});
}

Forgot Form Modal

Preview:

Markup:

<!-- Forgot Form Start -->
<div class="modal fade" id="forgotFormModal" tabindex="-1" role="dialog" aria-labelledby="signupFormModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			<div class="forgotForm">
				<div class="mdl-card mdl-shadow--2dp">
					<div class="mdl-card__title mdl-card--expand">
						<img src="img/logo.png" alt="">
					</div>
					<div class="mdl-card__supporting-text">
						<form action="#" method="post" id="forgotForm">
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="forgotEmail" id="forgotEmail">
								<label class="mdl-textfield__label" for="forgotEmail">E-mail Address</label>
							</div>
							
							<button type="submit" class="forgot-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Recover</button>
						</form>
					</div>
					<div class="mdl-card__actions mdl-card--border clearfix">
						<p class="pull-left">No Account?</p>
						<a href="#" class="pull-right mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#signupFormModal" data-dismiss="modal">
							Create An Account
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Forgot Form End -->

Style:

/*------------------------------------*\
    6. FORGOT MODAL
\*------------------------------------*/
#forgotFormModal {
    padding: 0 20px;
}
#forgotFormModal .modal-dialog {
    max-width: 360px;
    margin: 30px auto;
}
#forgotFormModal .modal-content {
    background-color: transparent;
}

.forgotForm .mdl-card {
    width: auto;
}
.forgotForm .mdl-card__title {
    padding-top: 0;
}
.forgotForm .mdl-card__title img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.forgotForm .mdl-card__supporting-text {
    width: 100%;
}

#forgotForm input {
    outline: 0;
}
#forgotForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#forgotForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#forgotForm .mdl-textfield {
    width: 100%;
}
.forgotForm .mdl-card__actions {
    margin-top: 5px;
    padding-left: 15px;
}
.forgotForm .mdl-card__actions p {
    margin-bottom: 0;
    margin-top: 8px;
}
.forgotForm .mdl-card__actions a {
    font-size: 12px;
}

Script:

var forgotForm = $('#forgotForm');
		
if ( forgotForm.length ) {
	forgotForm.validate({
		rules: {
			forgotEmail: {
				required: true,
				email: true
			}
		},
		errorPlacement: function (error, element) {
			return true;
		}
	});
}

Subscribe Form Modal

Preview:

Markup:

<!-- Subscribe Form Start -->
<div class="modal fade" id="subscribeFormModal" tabindex="-1" role="dialog" aria-labelledby="subscribeFormModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			<div class="subscribeForm">
				<div class="mdl-card mdl-shadow--2dp">
					<div class="mdl-card__title mdl-card--expand">
						<img src="img/logo.png" alt="">
					</div>
					<div class="mdl-card__supporting-text">
						<form action="#" method="post" id="subscribeForm">
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="subscribeEmail" id="subscribeEmail">
								<label class="mdl-textfield__label" for="subscribeEmail">E-mail Address</label>
							</div>
							
							<button type="submit" class="subscribe-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Subscribe</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Subscribe Form End -->

Style:

/*------------------------------------*\
    7. SUBSCRIBE MODAL
\*------------------------------------*/
#subscribeFormModal {
    padding: 0 20px;
}
#subscribeFormModal .modal-dialog {
    max-width: 360px;
    margin: 30px auto;
}
#subscribeFormModal .modal-content {
    background-color: transparent;
}

.subscribeForm .mdl-card {
    width: auto;
}
.subscribeForm .mdl-card__title {
    padding-top: 0;
}
.subscribeForm .mdl-card__title img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.subscribeForm .mdl-card__supporting-text {
    width: 100%;
}

#subscribeForm input {
    outline: 0;
}
#subscribeForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#subscribeForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#subscribeForm .mdl-textfield {
    width: 100%;
}

Script:

var subscribeForm = $('#subscribeForm');
		
if ( subscribeForm.length ) {
	subscribeForm.validate({
		rules: {
			subscribeEmail: {
				required: true,
				email: true
			}
		},
		errorPlacement: function (error, element) {
			return true;
		}
	});
}

Contact Form Modal

Preview:

Markup:

<!-- Contact Form Start -->
<div class="modal fade" id="contactFormModal" tabindex="-1" role="dialog" aria-labelledby="contactFormModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			<div class="contactForm">
				<div class="mdl-card mdl-shadow--2dp">
					<div class="mdl-card__title mdl-card--expand">
						<img src="img/logo.png" alt="">
					</div>
					<div class="mdl-card__supporting-text">
						<form action="#" method="post" id="contactForm">
							<div class="row">
								<div class="col-md-6">
									<div class="mdl-textfield mdl-js-textfield">
										<input class="mdl-textfield__input" type="text" name="contactName" id="contactName">
										<label class="mdl-textfield__label" for="contactName">Full Name</label>
									</div>
								</div>
								<div class="col-md-6">
									<div class="mdl-textfield mdl-js-textfield">
										<input class="mdl-textfield__input" type="text" name="contactEmail" id="contactEmail">
										<label class="mdl-textfield__label" for="contactEmail">E-mail Address</label>
									</div>
								</div>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<input class="mdl-textfield__input" type="text" name="contactSubject" id="contactSubject">
								<label class="mdl-textfield__label" for="contactSubject">Subject</label>
							</div>
							<div class="mdl-textfield mdl-js-textfield">
								<textarea class="mdl-textfield__input" name="contactMessage" id="contactMessage"></textarea>
								<label class="mdl-textfield__label" for="contactMessage">Message</label>
							</div>
							
							<button type="submit" class="contact-form-submit-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Send</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Contact Form End -->

Style:

/*------------------------------------*\
    8. CONTACT MODAL
\*------------------------------------*/
#contactFormModal {
    padding: 0 20px;
}
#contactFormModal .modal-dialog {
    max-width: 600px;
    margin: 30px auto;
}
#contactFormModal .modal-content {
    background-color: transparent;
}

.contactForm .mdl-card {
    width: auto;
}
.contactForm .mdl-card__title {
    padding-top: 0;
}
.contactForm .mdl-card__title img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.contactForm .mdl-card__supporting-text {
    width: 100%;
}

#contactForm input {
    outline: 0;
}
#contactForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#contactForm input.error + label:after,
#contactForm textarea.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#contactForm .mdl-textfield {
    width: 100%;
}
#contactMessage {
    min-height: 80px;
    border-color: rgba(0,0,0,.12);
}

Script:

var contactForm = $('#contactForm');
		
if ( contactForm.length ) {
	contactForm.validate({
		rules: {
			contactName: "required",
			contactEmail: {
				required: true,
				email: true
			},
			contactSubject: "required",
			contactMessage: "required"
		},
		errorPlacement: function (error, element) {
			return true;
		}
	});
}

How to change my "Email Address" (Sendmail.php)?

Open Up your 'sendmail.php' file.
Then Search For the Comment '// Replace this with your own email address'
Update The Email Address'example@example.com' and Owner Name 'Example' from there.

Code Structure:

HTML Structure:

CSS Structure:

This Plugin using the following CSS files:

css/bootstrap.min.css - The main responsive grid stylesheets, from Bootstrap 3 framework. It is recommended to make any changes/additions to style.css and keep bootsrap.css as it are. In this way, you can easily upgrade the grid framework when Bootstrap releases an update.
css/font-awesome.min.css - The css file using for font-awesome icons.
css/material.min.css - The css file using for material design lite library.
css/style.css - The main css file.
css/main-color-1.css - The css file using for color switcher.

JS Structure:

This Plugin using the following JS files:

css/jquery-2.2.2.min.js - The jQuery Framework.
css/bootstrap.min.js - The main js file that hook the supported scripts of Bootstrap 3 framework.
css/material.min.js - The main js file for material design lite library.
css/jquery.validate.min.js - The main js file for material design lite library.
css/main.js - The main script
css/color-switcher.js - The main js file for color switcher

Source and Credits:

Photos:

All 'images' used on the demo site is for demonstration purposes only and are not included in the main download file.
All Images Collected From 'Google Image Search'

Fonts Used:

Google Fonts (Raleway) - http://www.google.com/webfonts
Font Awesome - http://fontawesome.io/

Frameworks / Libraries:

jQuery - https://jquery.com/
Twitter Bootstrap - http://getbootstrap.com
Material Design Lite - https://github.com/google/material-design-lite

Plugins Used:

jQuery Validate - https://github.com/jzaefferer/jquery-validation