1#@!#!123s

32759 1#@!#!123s
: / home / aissorg / www / pug / pages /
Filename : forms.pug
back
extends  ../_skeleton

//- Includes

block variables
	- var activeCategory = 'pages'
	- var pageName = 'Forms'

block page
	// Page Header
	include ../sections/_header-minimal

	+breadcrumbs({
		category: activeCategory,
		path: [pageName]
	})

	// Newsletter form
	.section-sm.section-first
		.container: h6: span(data-toggle='modal' data-target='#forms-modal-tip') Newsletter form #[span.tip-mark ?]
		include ../sections/_section-newsletter-form

	// Small newsletter form
	.section-sm
		.container: h6: span(data-toggle='modal' data-target='#forms-modal-tip') Small newsletter form #[span.tip-mark ?]
		section.section.section-md.bg-gray-700
			.container
				.row.justify-content-center
					.col-sm-9.col-md-6.col-lg-5.col-xl-4
						h4 Newsletter
						p Sign up to our newsletter and be the first to know about the latest news, special offers, events, and discounts.

						// RD Mailform
						form.rd-form.rd-mailform.form-inline(data-form-output="form-output-global", data-form-type='subscribe', method='post', action='bat/rd-mailform.php')
							.form-wrap
								input.form-input(id="subscribe-form-4-email" type="email" name="email" data-constraints="@Email @Required")
								label.form-label(for="subscribe-form-4-email") E-mail
							.form-button
								button.button.button-primary.button-icon.button-icon-only.button-winona(type="submit" aria-label='submit')
									span.icon.mdi.mdi-email-outline


	// Photo newsletter form
	.section-sm
		.container: h6: span(data-toggle='modal' data-target='#forms-modal-tip') Photo newsletter form #[span.tip-mark ?]
		include ../sections/_section-photo-newsletter-form

	// Map & contact form
	section.section-sm
		.container: h6 Map & contact form
		include ../sections/_section-contact-form-and-map

	// Map & contact form with reCAPTCHA
	section.section.bg-gray-light
		.range.justify-content-xl-between
			.cell-xl-6.align-self-center.container
				.row
					.col-lg-9.cell-inner: .section-lg
						h3.wow-outer: span.wow.slideInDown Contact Us
						// RD Mailform
						form.rd-form.rd-mailform(data-form-output='form-output-global', data-form-type='contact', method='post', action='bat/rd-mailform.php')
							.row.row-10
								.col-md-6
									.form-wrap
										label.form-label-outside(for='contact-2-first-name') First Name
										input#contact-2-first-name.form-input(type='text' name='name' data-constraints='@Required')

								.col-md-6
									.form-wrap
										label.form-label-outside(for='contact-2-last-name') Last Name
										input#contact-2-last-name.form-input(type='text' name='name' data-constraints='@Required')

								.col-md-6
									.form-wrap
										label.form-label-outside(for='contact-2-email') E-mail
										input#contact-2-email.form-input(type='email' name='email' data-constraints='@Email @Required')

								.col-md-6
									.form-wrap
										label.form-label-outside(for='contact-2-phone') Phone
										input#contact-2-phone.form-input(type='text' name='phone' data-constraints='@PhoneNumber')

								.col-12
									.form-wrap
										label.form-label-outside(for='contact-2-message') Your Message
										textarea#contact-2-message.form-input(name='message' data-constraints='@Required')

							// Google captcha
							.form-wrap.text-left.form-validation-left
								.recaptcha#captcha1(data-sitekey='6LfZlSETAAAAAC5VW4R4tQP8Am_to4bM3dddxkEt')

							.group.group-middle
								button.button.button-primary.button-winona(type='submit') Send Message
								p or use
								button.button.button-primary-outline.button-icon.button-icon-left.button-winona
									span.icon.text-primary.mdi.mdi-facebook-messenger
									| Messenger

			.cell-xl-5.height-fill.wow.fadeIn
				//Google Map

				//Please, add the data attribute data-key="YOUR_API_KEY" in order to insert your own API key for the Google map.
				//Please note that YOUR_API_KEY should replaced with your key.
				//Example: <div class="google-map-container" data-key="YOUR_API_KEY">
				.google-map-container( data-center='9870 St Vincent Place, Glasgow, DC 45 Fr 45.', data-zoom='5', data-icon='images/gmap_marker.png', data-icon-active='images/gmap_marker_active.png', data-styles='[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":60}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"lightness":30}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ef8c25"},{"lightness":40}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#b6c54c"},{"lightness":40},{"saturation":-40}]},{}]' )
					.google-map
					ul.google-map-markers
						li( data-location='9870 St Vincent Place, Glasgow, DC 45 Fr 45.', data-description='9870 St Vincent Place, Glasgow' )




	// Login form
	.section-sm
		.container: h6 Login form
		section.section.section-md.bg-black-1.context-dark
			.container
				.box-1
					h4 Sign In

					form.rd-form.rd-form-small
						.form-wrap
							input#login-email.form-input(type='email' name='email' data-constraints='@Email @Required')
							label.form-label(for='login-email') E-mail

						.form-wrap
							input#login-password.form-input(type='password' name='password' data-constraints='@Required')
							label.form-label(for='login-password') Password

						.form-wrap
							button.button.button-primary.button-winona(type='submit') Sign in

	// Registration form
	.section-sm.section-last
		.container: h6 Registration form
		section.section.section-md.bg-black-1.context-dark
			.container
				.box-1
					h4 Registration

					form.rd-form.rd-form-small
						.form-wrap
							input#register-name.form-input(type='text' name='username' data-constraints='@Required')
							label.form-label(for='register-name') Username

						.form-wrap
							input#register-email.form-input(type='email' name='email' data-constraints='@Email @Required')
							label.form-label(for='register-email') E-mail

						.form-wrap
							input#register-password.form-input(type='password' name='password' data-constraints='@Required')
							label.form-label(for='register-password') Password

						.form-wrap
							input#register-password-2.form-input(type='password' name='password' data-constraints='@Required')
							label.form-label(for='register-password-2') Confirm Password

						.form-wrap
							button.button.button-block.button-primary.button-winona(type='submit') Create an Account

						.form-wrap
							.text-decoration-lines
								span.text-decoration-lines-content or enter with

						.form-wrap
							.button-group
								a.button.button-facebook.button-icon.button-icon-only.button-winona(href='#' aria-label='Facebook'): span.icon.mdi.mdi.mdi-facebook
								a.button.button-twitter.button-icon.button-icon-only.button-winona(href='#' aria-label='Twitter'): span.icon.mdi.mdi-twitter
								a.button.button-google.button-icon.button-icon-only.button-winona(href='#' aria-label='Google+'): span.icon.mdi.mdi-google

	// Page Footer
	include ../sections/_footer-standard
	+footer-standard({
		about: 'We are one of the leading Hinduism websites and non-profit organizations offering you both essential and detailed information as well as news from the world of this religion. We aim to help everyone discover Hinduism.'
	})

	.modal.fade#forms-modal-tip
		.modal-dialog(role='document')
			.modal-content
				.modal-header
					h6 Subscribe form tip
					button.close(type='button', data-dismiss='modal', aria-label='Close'): span(aria-hidden='true')
				.modal-body
					p Subscribe form works as an e-mail newsletter.
					p To activate such form with an enabled #[strong MailChimp] service, replace the #[code .rd-mailform] class with #[code .mailchimp-mailform] and the form's action with MailChimp subscription URL.
					p To activate the #[strong Campaign Monitor] service, you need to replace the form’s [#code.rd-mailform] class with #[code .campaign-mailform] and copy the form's action and the name of the input field from the form generated by Campaign Monitor service.