Advance Forms
Examples Snippet of Geeks Course Form which used in Theme.
Billing Form
Billing Address
<!-- Card -->
<div class="card mb-4">
<!-- Card Header -->
<div class="card-header">
<h3 class="mb-0">Billing Address</h3>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form class="form-row">
<div class="form-group col-12 col-md-6">
<label class="form-label" for="fname">First Name</label>
<input type="text" id="fname" class="form-control" placeholder="First Name" required>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label" for="lname">Last Name</label>
<input type="text" id="lname" class="form-control" placeholder="Last Name" required>
</div>
<div class="form-group col-12 col-md-12">
<label class="form-label" for="phone">Phone Number (Optional)</label>
<input type="text" id="phone" class="form-control" placeholder="Phone" required>
</div>
<div class="form-group col-12 col-md-12">
<label class="form-label" for="address1">Address Line 1</label>
<input type="text" id="address1" class="form-control" placeholder="Address" required>
</div>
<div class="form-group col-12 col-md-12">
<label class="form-label" for="address2">Address Line 2
(Optional)</label>
<input type="text" id="address2" class="form-control" placeholder="Address" required>
</div>
<div class="form-group col-12 col-md-4">
<label class="form-label">State</label>
<select class="selectpicker" data-width="100%">
<option value="">Select State</option>
<option value="1">Gujarat</option>
<option value="2">Rajasthan</option>
<option value="3">Maharashtra</option>
</select>
</div>
<div class="form-group col-12 col-md-4">
<label class="form-label">Country</label>
<select class="selectpicker" data-width="100%">
<option value="">Select Country</option>
<option value="">India</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
</select>
</div>
<div class="form-group col-12 col-md-4">
<label class="form-label" for="zipCode">Zip/Postal Code</label>
<input type="text" id="zipCode" class="form-control" placeholder="Zip" required>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="shippingAddress">
<label class="custom-control-label" for="shippingAddress">Shipping
address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="saveCard" checked>
<label class="custom-control-label" for="saveCard">Save this
information for next time</label>
</div>
</div>
</form>
</div>
</div>Payment Form
Payment Method
<!-- Card -->
<div class="card mb-3 mb-lg-0">
<!-- Card Header -->
<div class="card-header">
<h3 class="mb-0">Payment Method</h3>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="cardRadioone" name="cardRadioone" class="custom-control-input"
checked>
<label class="custom-control-label " for="cardRadioone"><span class=" text-dark">Credit
or debit card</span></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="cardRadioTwo" name="cardRadioone" class="custom-control-input">
<label class="custom-control-label" for="cardRadioTwo"><span
class=" text-dark">PayPal</span></label>
</div>
<!-- Form -->
<form class="form-row " id="cardpayment">
<!-- Card Number -->
<div class="form-group mt-4 col-12">
<label class="d-flex justify-content-between align-items-center " for="cc-mask">Card
Number <span><i class="fab fa-cc-amex mr-1 text-primary"></i><i
class="fab fa-cc-mastercard mr-1 text-primary"></i> <i
class="fab fa-cc-discover mr-1 text-primary"></i> <i
class="fab fa-cc-visa text-primary"></i></span></label>
<div class="input-group">
<input type="text" class="form-control" id="cc-mask" data-inputmask="'mask': '9999 9999 9999'"
inputmode="numeric" placeholder="xxxx-xxxx-xxxx-xxxx" required />
<div class="input-group-append border-left-0">
<span class="input-group-text" id="basic-addon2"><i class="fe fe-lock "></i></span>
</div>
</div>
<small class="text-muted">Full name as displayed on card.</small>
</div>
<!-- Month -->
<div class="form-group col-12 col-md-4">
<label>Month</label>
<select class="selectpicker" data-width="100%">
<option value="">Month</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
</select>
</div>
<!-- Year -->
<div class="form-group col-12 col-md-4">
<label>Year</label>
<select class="selectpicker" data-width="100%">
<option value="">Year</option>
<option value="June">2018</option>
<option value="July">2019</option>
<option value="August">2020</option>
<option value="Sep">2021</option>
<option value="Oct">2022</option>
</select>
</div>
<!-- CVV Code -->
<div class="form-group col-12 col-md-4">
<label for="cvv">CVV Code <i class="fe fe-help-circle ml-1 font-size-xs"
data-toggle="tooltip" data-placement="right" title=""
data-original-title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="password" class="cc-inputmask form-control" name="cvv" id="cvv"
placeholder="xxx" maxlength="3">
</div>
<!-- Name on card -->
<div class="form-group col-12">
<label for="nameoncard">Name on Card</label>
<input id="nameoncard" type="text" class="form-control" name="nameoncard"
placeholder="Name" required>
</div>
<!-- Country -->
<div class="form-group col-6">
<label>Country</label>
<select class="selectpicker" data-width="100%">
<option value="">India</option>
<option value="uk">UK</option>
<option value="usa">USA</option>
</select>
</div>
<!-- Zip Code -->
<div class="form-group col-6">
<label for="postalcode">Zip/Postal Code</label>
<input id="postalcode" type="text" class="form-control" name="postalcode"
placeholder="Zipcode" required>
</div>
<!-- CheckBox -->
<div class="col-12 mb-5">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Remember this
card</label>
</div>
</div>
<div class="col-md-4 col-12">
<!-- Button -->
<div>
<button type="submit" class="btn btn-primary mb-3 mb-lg-0 mr-4">Make
a
Payment</button>
</div>
</div>
<div class="col-md-8 col-12 d-flex align-items-center justify-content-end">
<small class="mb-0">By click start learning, you agree to our <a href="#!">Terms of
Service and Privacy Policy.</a></small>
</div>
</form>
<!-- Paypal -->
<form id="internetpayment">
<div class="form-group mt-4 ">
<label for="paypalemail">PayPal</label>
<input type="email" id="paypalemail" name="paypalemail"
placeholder="Enter your PayPal email" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">PayPal Checkout</button>
</form>
</div>
</div>Google Setting
Google Settings
Google Map
<!-- Card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">Google Settings</h4>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="googleSwitch">
<label class="custom-control-label" for="googleSwitch"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<form>
<div class="form-group">
<label for="googleage" class="form-label">Google Analytics Tracking ID<small class="text-muted">
(ex. UA-000000-2 )</small>
</label>
<input class="form-control" id="googleage" placeholder="UA-000000-2 " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>
<!-- Card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">Google Map</h4>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="MapSwitch">
<label class="custom-control-label" for="MapSwitch"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form>
<div class="form-group">
<label for="trackingPage" class="form-label">Goole Map API KeY
</label>
<input class="form-control" id="trackingPage" placeholder="6LeJd8IUAAAAAFOR_aW-SO8wMASDSDFRuYT-zQDLnHC " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="latitudePage1" class="form-label">Map Latitude:</label>
<input class="form-control" id="latitudePage1" placeholder="e.g. 25.3500 " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="latitudePage2" class="form-label">Map Longitude:</label>
<input class="form-control" id="latitudePage2" placeholder="e.g. 74.6333 " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>General
General Settings
<!-- Card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header">
<h4 class="mb-0">General Settings</h4>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form>
<div class="form-group mb-4">
<label for="siteName" class="form-label">Site Name
<small class="text-muted">(Enter your website name below)</small>
</label>
<input class="form-control" id="siteName" placeholder="Your Site " type="text" required="">
<small>The site title might be the name of your company or
organization, or a brief description of the
organization, or a combination of the two.
</small>
</div>
<div class="form-group mb-4">
<label for="siteDescription" class="form-label">Site Description
<small class="text-muted">(Enter your website description below)</small>
</label>
<textarea class="form-control" id="siteDescription" placeholder="Site Description " required="" rows="4"></textarea>
<small>The site title might be the name of your company or
organization, or a brief description of the
organization, or a combination of the two.
</small>
</div>
<div class="form-group mb-4">
<label class="form-label">Logo
<small class="text-muted">(Upload your website logo - 120 x 40 )</small>
</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile1">
<label class="custom-file-label" for="customFile1">Choose file</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Favicon
<small class="text-muted">(Upload your website favicon - Standard for most
desktop browsers. 32×32)</small>
</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile2">
<label class="custom-file-label" for="customFile2">Choose file</label>
</div>
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>Currency
Currency Settings
<!-- Card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header">
<h4 class="mb-0">Currency Settings</h4>
</div>
<!-- Card Body -->
<div class="card-body">
<form>
<select class="selectpicker" data-width="100%">
<option value="">Select</option>
<option value="₹ Indian">₹ Indian</option>
<option value="$ USD">$ USD</option>
<option value="€ Euro">€ Euro</option>
<option value="£ British Pound">£ British Pound</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Update Setting</button>
</form>
</div>
</div>
<!-- Card -->Langauge
Language Settings
<!-- Card -->
<div class="card ">
<!-- Card Header -->
<div class="card-header">
<h4 class="mb-0">Language Settings</h4>
</div>
<!-- Card Body -->
<div class="card-body">
<form>
<select class="selectpicker" data-width="100%">
<option value="">Select</option>
<option value="English">English</option>
<option value="German">German</option>
<option value="Spanish">Spanish</option>
<option value="Hindi">Hindi</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Update Setting</button>
</form>
</div>
</div>Social Network
<!-- Card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header">
<h4 class="mb-0">Social Network</h4>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form>
<div class="form-group mb-4">
<label for="facebookPage" class="form-label">Facebook Page ID
<small class="text-muted">
(ex. https://www.facebook.com/geeksuidesign)</small>
</label>
<input class="form-control" id="facebookPage" placeholder="geeksuidesign " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="twitterPage" class="form-label">Twitter Username
<small class="text-muted">
(Enter your website description below)</small>
</label>
<input class="form-control" id="twitterPage" placeholder="geeksuidesign " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="youtubePage" class="form-label">YouTube Channel Name<small class="text-muted">
(ex. https://www.youtube.com/geeksuidesign)</small>
</label>
<input class="form-control" id="youtubePage" placeholder="geeksuidesign " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="instaPage" class="form-label">Instagram Username<small class="text-muted">
(ex.https://www.instagram.com/geeksuidesign)</small>
</label>
<input class="form-control" id="instaPage" placeholder="geeksuidesign " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>Facebook login
Facebook Login Settings
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">
<i class="mdi mdi-facebook text-primary mdi-24px align-middle mr-2"></i>Facebook
Login Settings
</h4>
<!-- Custom Control -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="facebookSwitch">
<label class="custom-control-label" for="facebookSwitch"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- form -->
<form>
<div class="form-group mb-4">
<label for="facebookAppid" class="form-label">App ID<span class="text-danger">*</span>
</label>
<input class="form-control" id="facebookAppid" placeholder="26346567894578985 " type="text" required="">
<small class="text-muted">If you are not sure what is your APP ID, Please
head
over to
<span class="text-primary">Getting Started.</span></small>
</div>
<div class="form-group mb-4">
<label for="consumerKey1" class="form-label">App Secret<span class="text-danger">*</span></label>
<input class="form-control" id="consumerKey1" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="consumerSecret1" class="form-label">Login Redirect URL
</label>
<input class="form-control" id="consumerSecret1" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>Twitter login
Twitter Login Settings
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">
<i class="mdi mdi-twitter text-primary mdi-24px align-middle mr-2"></i>Twitter
Login Settings
</h4>
<!-- Custom Control -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="twitterSwitch">
<label class="custom-control-label" for="twitterSwitch"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form>
<div class="form-group mb-4">
<label for="twiiterAppid" class="form-label">Consumer Key (API Key)<span class="text-danger">*</span>
</label>
<input class="form-control" id="twiiterAppid" placeholder="26346567894578985 " type="text" required="">
<small class="text-muted">If you are not sure what is your APP ID, Please
head
over to
<span class="text-primary">Getting Started.</span></small>
</div>
<div class="form-group mb-4">
<label for="consumerKey2" class="form-label">Consumer Secret (Secret
Key)<span class="text-danger">*</span></label>
<input class="form-control" id="consumerKey2" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="consumerSecret2" class="form-label">Login Redirect URL
</label>
<input class="form-control" id="consumerSecret2" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>Google login
Google Login Settings
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">
<i class="mdi mdi-google text-primary mdi-24px align-middle mr-2"></i>Google
Login Settings
</h4>
<!-- Custom Control -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="googleSwitch">
<label class="custom-control-label" for="googleSwitch"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form>
<div class="form-group mb-4">
<label for="googleAppid" class="form-label">Client ID<span class="text-danger">*</span>
</label>
<input class="form-control" id="googleAppid" placeholder="26346567894578985 " type="text" required="">
<small class="text-muted">If you are not sure what is your APP ID, Please
head
over to
<span class="text-primary">Getting Started.</span></small>
</div>
<div class="form-group mb-4">
<label for="consumerKey3" class="form-label">Client Secret Key<span class="text-danger">*</span></label>
<input class="form-control" id="consumerKey3" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="consumerSecret3" class="form-label">Login Redirect URL
</label>
<input class="form-control" id="consumerSecret3" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>LinkedIn login
LinkedIn Login API Settings
<!-- card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">
<i class="mdi mdi-linkedin text-primary mdi-24px align-middle mr-2"></i>LinkedIn
Login API Settings
</h4>
<!-- Custom Control -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="linkedinSwitch">
<label class="custom-control-label" for="linkedinSwitch"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form>
<div class="form-group mb-4">
<label for="linkedinAppid" class="form-label">Client ID<span class="text-danger">*</span>
</label>
<input class="form-control" id="linkedinAppid" placeholder="26346567894578985 " type="text" required="">
<small class="text-muted">If you are not sure what is your APP ID, Please
head
over to
<span class="text-primary">Getting Started.</span></small>
</div>
<div class="form-group mb-4">
<label for="consumerKey4" class="form-label">Client Secret Key<span class="text-danger">*</span></label>
<input class="form-control" id="consumerKey4" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
</div>
<div class="form-group mb-4">
<label for="consumerSecret4" class="form-label">Login Redirect URL
</label>
<input class="form-control" id="consumerSecret4" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>Paypal
Paypal
Enter your PayPal email address below to accept payments from students.
<!-- Card -->
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">Paypal</h4>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="paypalSwitch1" checked="">
<label class="custom-control-label" for="paypalSwitch1"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<img src="../assets/images/paypal.svg" alt="" class="mb-2">
<p class="mb-4">Enter your PayPal email address below to accept payments from
students.
</p>
<!-- Form -->
<form>
<div class="form-group">
<label for="paypalEmail" class="form-label">Paypal Email Address
</label>
<input class="form-control" id="paypalEmail" placeholder="your@example.com" type="email" required="">
</div>
<button class="btn btn-primary" type="submit">
Save
</button>
</form>
</div>
</div>Stripe
Stripe
Connect your Geeks to your stripe account for faster payouts.
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
<h4 class="mb-0">Stripe</h4>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="stripeSwitch1">
<label class="custom-control-label" for="stripeSwitch1"></label>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<img src="../assets/images/stripe.svg" alt="" class="mb-2">
<p class="mb-4">Connect your Geeks to your stripe account for faster payouts.</p>
<!-- Form -->
<form>
<div class="form-group">
<label for="stripeEmail" class="form-label">Stripe Email Address
</label>
<input class="form-control" id="stripeEmail" placeholder="your@example.com" type="email" required="">
</div>
<button class="btn btn-primary" type="submit">
Save
</button>
</form>
</div>
</div>SMPT Server Setting
SMTP Server Setting
<div class="card mb-4">
<!-- Card Header -->
<div class="card-header">
<h4 class="mb-0">SMTP Server Setting</h4>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Form -->
<form class="row">
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="senderName" class="form-label">Sendere’s Name </label>
<input class="form-control" id="senderName" placeholder="Geeks" type="text" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="address" class="form-label">Mail Address<span class="text-danger">*</span> </label>
<input class="form-control" id="address" placeholder="Address here" type="text" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="mailDriver" class="form-label">Mail Driver (SMTP, Mail)<span class="text-danger">*</span> </label>
<input class="form-control" id="mailDriver" placeholder="e.g.smtp,gmail.com" type="text" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="userName" class="form-label">Mail Username<span class="text-danger">*</span> (info@geeksuidesign.com) </label>
<input class="form-control" id="userName" placeholder="e.g.smtp,gmail.com" type="text" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="mailHost" class="form-label">Mail Host<span class="text-danger">*</span> </label>
<input class="form-control" id="mailHost" placeholder="smtp,gmail.io" type="text" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="mailPassword" class="form-label">Mail Password<span class="text-danger">*</span> </label>
<input class="form-control" id="mailPassword" placeholder="*****************" type="password" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="mailPort" class="form-label">Mail Port Number<span class="text-danger">*</span> </label>
<input class="form-control" id="mailPort" placeholder="e.g. 465, 587" type="text" required="">
</div>
<div class="form-group col-12 col-md-12 col-lg-6">
<label for="mailEncryption" class="form-label">Mail Encryption (TLS / SSL) </label>
<input class="form-control" id="mailEncryption" placeholder="tls" type="text" required="">
</div>
<div class="col-12 col-md-12 col-lg-6">
<button class="btn btn-primary" type="submit">
Save
</button>
<a href="#!" class="btn btn-outline-white">
Cancel
</a>
</div>
</form>
</div>
</div>Create Post Form
Create Post
One Ring to Rule Them All
Three Rings for the
Elven-kingsunder the sky,
Seven for the
Dwarf-lords in halls of stone, Nine for Mortal Men,
doomed to die, One for the Dark Lord on his dark throne.
In the Land of Mordor where the Shadows lie.
One Ring to
rule them all,
One Ring to find them,
One Ring to bring them all and in the darkness bind them.
In the Land of Mordor where the Shadows lie.
<!-- Card -->
<div class="card border-0 mb-4">
<!-- Card header -->
<div class="card-header">
<h4 class="mb-0">Create Post</h4>
</div>
<!-- Card Body -->
<div class="card-body">
<button type="button" class="btn btn-outline-white">
<i class="fe fe-image mr-1"></i>
Photo
</button>
<button type="button" class="btn btn-outline-white">
<i class="fe fe-video mr-1"></i>
Video
</button>
<button type="button" class="btn btn-outline-white">
Quote
</button>
<button type="button" class="btn btn-outline-white">
<i class="fe fe-link mr-1"></i>
Link
</button>
<form action="#" class="dropzone mt-4 border-dashed">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<div class="mt-4">
<form>
<!-- Form -->
<div class="row">
<!-- Date -->
<div class="form-group col-md-4">
<label for="selectDate" class="form-label">Date</label>
<input type="text" id="selectDate" class="form-control text-dark flatpickr "
placeholder="Select Date">
</div>
<div class="form-group col-md-9">
<!-- Title -->
<label for="postTitle" class="form-label">Title</label>
<input type="text" id="postTitle" class="form-control text-dark "
placeholder="Post Title">
<small>Keep your post titles under 60 characters. Write heading
that
describe the topic content. Contextualize for Your
Audience.</small>
</div>
<!-- Slug -->
<div class="form-group col-md-9">
<label for="basic-url" class="form-label">Slug</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/</span>
</div>
<input type="text" class="form-control" id="basic-url"
aria-describedby="basic-addon3" placeholder="post-title">
</div>
<small>Field must contain an unique value</small>
</div>
<!-- Excerpt -->
<div class="form-group col-md-9">
<label for="Excerpt">Excerpt</label>
<textarea rows="3" id="Excerpt" class="form-control text-dark "
placeholder="Excerpt"></textarea>
<small>A short extract from writing.</small>
</div>
<!-- Category -->
<div class="form-group col-md-9">
<label class="form-label">Category</label>
<select class="selectpicker" data-width="100%">
<option value="">Course</option>
<option value="Post Category">Post Category</option>
<option value="Workshop">Workshop</option>
<option value="Marketing">Marketing</option>
</select>
</div>
</div>
</form>
</div>
<!-- Editor -->
<div class="mt-2 mb-4">
<div id="editor">
<br>
<h4>One Ring to Rule Them All</h4>
<br>
<p>
Three Rings for the
<i> Elven-kingsunder</i> the sky,
<br> Seven for the
<u>Dwarf-lords</u> in halls of stone, Nine for Mortal Men,
<br> doomed to die, One for the Dark Lord on his dark throne.
<br> In the Land of Mordor where the Shadows lie.
<br>
<br>
</p>
<p>
One Ring to
<b>rule</b> them all,
<br> One Ring to find them,
<br> One Ring to bring them all and in the darkness bind them.
<br> In the Land of Mordor where the Shadows lie.
</p>
<p>
<br>
</p>
</div>
</div>
<!-- button -->
<a href="#!" class="btn btn-primary ">
Publish
</a>
<a href="#!" class="btn btn-outline-white ">
Save to Draft
</a>
</div>
</div>Payment Method
Note: that you can later remove your card at the account
setting page.
<div>
<form class="form-row mb-4">
<div class="form-group col-12 col-md-12 mb-4">
<h5 class="mb-3">Credit / Debit card</h5>
<div class="custom-control custom-radio custom-control-inline mr-1">
<input type="radio" id="paymentRadioOne" name="paymentRadioOne"
class="custom-control-input">
<label class="custom-control-label" for="paymentRadioOne"><img
src="../assets/images/logo-americanexpress.svg" alt=""></label>
</div>
<div class="custom-control custom-radio custom-control-inline mr-1">
<input type="radio" id="paymentRadioTwo" name="paymentRadioOne"
class="custom-control-input">
<label class="custom-control-label" for="paymentRadioTwo"><img
src="../assets/images/logo-mastercard.svg" alt=""></label>
</div>
<div class="custom-control custom-radio custom-control-inline mr-1">
<input type="radio" id="paymentRadioThree" name="paymentRadioOne"
class="custom-control-input">
<label class="custom-control-label" for="paymentRadioThree"><img
src="../assets/images/logo-paypal.svg" alt=""></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="paymentRadioFour" name="paymentRadioOne"
class="custom-control-input">
<label class="custom-control-label" for="paymentRadioFour"><img
src="../assets/images/logo-visa.svg" alt=""></label>
</div>
</div>
<!-- Form -->
<div class="form-group col-12 col-md-4">
<label for="nameoncardSecond" class="form-label">Name on card</label>
<input id="nameoncardSecond" type="text" class="form-control" name="nameoncard"
placeholder="Name" required>
</div>
<div class="form-group col-12 col-md-4">
<label class="form-label">Month</label>
<select class="selectpicker" data-width="100%">
<option value="">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="form-group col-12 col-md-4">
<label class="form-label">Year</label>
<select class="selectpicker" data-width="100%">
<option value="">Year</option>
<option value="June">2018</option>
<option value="July">2019</option>
<option value="August">2020</option>
<option value="Sep">2021</option>
<option value="Oct">2022</option>
</select>
</div>
<div class="form-group col-md-8 col-12">
<label for="ccMask" class="form-label">Card Number</label>
<input type="text" class="form-control" id="ccMask"
data-inputmask="'mask': '9999 9999 9999'" inputmode="numeric"
placeholder="xxxx-xxxx-xxxx-xxxx" required>
</div>
<div class="form-group col-md-4 col-12">
<div class="form-group">
<label for="cvvSecond" class="form-label">CVV Code <i
class="fas fa-question-circle ml-1" data-toggle="tooltip" data-placement="top"
title=""
data-original-title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="text" class="form-control" name="cvvSecond" id="cvvSecond"
placeholder="xxx" data-inputmask="'mask': '999'" inputmode="numeric" required>
</div>
</div>
<div class="col-md-6 col-12">
<button class="btn btn-primary btn-sm" type="submit">Add New Card</button>
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
</div>
</form>
<span><strong>Note:</strong> that you can later remove your card at the account
setting page.</span>
</div>Personal
<!-- Card -->
<div class="card ">
<!-- Card Header -->
<div class="card-header">
<h3 class="mb-0 ">Profile Details</h3>
<p class="mb-0 ">You have full control to manage your own account setting.</p>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="d-lg-flex align-items-center justify-content-between">
<div class="d-flex align-items-center mb-4 mb-lg-0">
<img src="../assets/images/avatar-3.jpg" id="img-uploaded"
class="avatar-xl rounded-circle " alt="">
<div class="ml-3">
<h4 class="mb-0">Your avatar</h4>
<p class=" mb-0">PNG or JPG no bigger than 800px wide and tall.</p>
</div>
</div>
<div>
<a href="#!" class="btn btn-outline-white btn-sm">Update</a>
<a href="#!" class="btn btn-outline-danger btn-sm ">Delete</a>
</div>
</div>
<hr class="my-5">
<div>
<h4 class="mb-0">Personal Details</h4>
<p class="mb-4 ">Edit your personal information and address.</p>
<!-- Form -->
<form class="form-row">
<div class="form-group col-12 col-md-6">
<label class="form-label" for="profilefname">First Name</label>
<input type="text" id="profilefname" class="form-control" placeholder="First Name"
required>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label" for="profilelname">Last Name</label>
<input type="text" id="profilelname" class="form-control" placeholder="Last Name"
required>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label" for="profilephone">Phone</label>
<input type="text" id="profilephone" class="form-control" placeholder="Phone"
required>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label" for="birth">Birthday</label>
<input class="form-control flatpickr" type="text" placeholder="Birth of Date"
id="birth" name="birth">
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label" for="profileaddress">Address Line 1</label>
<input type="text" id="profileaddress" class="form-control" placeholder="Address"
required>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label" for="profileaddress2">Address Line
2</label>
<input type="text" id="profileaddress2" class="form-control" placeholder="Address"
required>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label">State</label>
<select class="selectpicker" data-width="100%">
<option value="">Select State</option>
<option value="1">Gujarat</option>
<option value="2">Rajasthan</option>
<option value="3">Maharashtra</option>
</select>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label">Country</label>
<select class="selectpicker" data-width="100%">
<option value="">Select Country</option>
<option value="1">India</option>
<option value="2">UK</option>
<option value="3">USA</option>
</select>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Update Profile</button>
</div>
</form>
</div>
</div>
</div>Password Reset
Security
Edit your account settings and change your password here.
Email Address
Your current email address is geekslearn@gmail.com
Change Password
We will email you a confirmation when changing your password, so please expect that email after submitting.
<!-- Card -->
<div class="card ">
<!-- Card Header -->
<div class="card-header">
<h3 class="mb-0">Security</h3>
<p class="mb-0 ">Edit your account settings and change your password here.</p>
</div>
<!-- Card body -->
<div class="card-body">
<h4 class="mb-0">Email Address </h4>
<p>Your current email address is <span class="text-success">geekslearn@gmail.com</span></p>
<form class="form-row">
<div class="form-group col-lg-6 col-md-12 col-12">
<label class="form-label" for="email">New email address</label>
<input id="email" type="email" name="email" class="form-control" placeholder="" required="">
<button type="submit" class="btn btn-primary mt-2">Update Details</button>
</div>
</form>
<hr class="my-5">
<div>
<h4 class="mb-0">Change Password</h4>
<p>We will email you a confirmation when changing your password, so please expect that
email after submitting.
</p>
<!-- Form -->
<form class="form-row">
<div class="col-lg-6 col-md-12 col-12">
<div class="form-group">
<label class="form-label" for="currentpassword">Current password</label>
<input id="currentpassword" type="currentpassword" name="currentpassword" class="form-control" placeholder="" required="">
</div>
<div class="form-group password-field">
<label class="form-label" for="newpassword">New password</label>
<input id="newpassword" type="password" name="newpassword" class="form-control mb-2" placeholder="" required="">
<div class="row align-items-center no-gutters">
<div class="col-6 ">
<span data-toggle="tooltip" data-placement="right" title="" data-original-title="Test it by typing a password in the field below. To reach full strength, use at least 6 characters, a capital letter and a digit, e.g. 'Test01'">Password
strength <i class="fas fa-question-circle ml-1"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label" for="confirmpassword">Confirm New Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" class="form-control mb-2" placeholder="" required="">
</div>
<button type="submit" href="#" class="btn btn-primary">Save Password</button>
<div class="col-6">
</div>
</div>
<div class="col-12 mt-4">
<p class="mb-0 ">Can't remember your current password? <a href="#">Reset your
password via email</a>
</p>
</div>
</form>
</div>
</div>
</div>Social Profiles
Add your social profile links in below social accounts.
Add your Twitter username (e.g.
johnsmith).
Add your Facebook username (e.g.
johnsmith).
Add your Instagram username (e.g.
johnsmith).
LinkedIn Profile URL
Add your linkedin profile URL. (
https://www.linkedin.com/in/jitu-chauhan-ba004b78)
YouTube
Add your Youtube profile URL.
<!-- Card -->
<div class="card ">
<!-- Card Header -->
<div class="card-header">
<h3 class="mb-0">Social Profiles</h3>
<p class="mb-0 ">Add your social profile links in below social accounts.</p>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="row mb-5">
<div class="col-lg-3 col-md-4 col-12">
<h5>Twitter</h5>
</div>
<div class="col-lg-9 col-md-8 col-12">
<input type="text" class="form-control mb-1" placeholder="Twitter Profile Name">
<small class="text-muted">Add your Twitter username (e.g. johnsmith).</small>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-3 col-md-4 col-12">
<h5>Facebook</h5>
</div>
<div class="col-lg-9 col-md-8 col-12">
<input type="text" class="form-control mb-1" placeholder="Facebook Profile Name">
<small class="text-muted">Add your Facebook username (e.g. johnsmith).</small>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-3 col-md-4 col-12">
<h5>Instagram</h5>
</div>
<div class="col-lg-9 col-md-8 col-12">
<input type="text" class="form-control mb-1" placeholder="Instagram Profile Name">
<small class="text-muted">Add your Instagram username (e.g. johnsmith).</small>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-3 col-md-4 col-12">
<h5>LinkedIn Profile URL</h5>
</div>
<div class="col-lg-9 col-md-8 col-12">
<input type="text" class="form-control mb-1" placeholder="LinkedIn Profile URL ">
<small class="text-muted">Add your linkedin profile URL. (
https://www.linkedin.com/in/jitu-chauhan-ba004b78)</small>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-4 col-12">
<h5>YouTube</h5>
</div>
<div class="col-lg-9 col-md-8 col-12">
<input type="text" class="form-control mb-1" placeholder="YouTube URL">
<small class="text-muted">Add your Youtube profile URL. </small>
</div>
</div>
<div class="row">
<div class="offset-lg-3 col-lg-6 col-12">
<a href="#" class="btn btn-primary">Save Social Profile</a>
</div>
</div>
</div>
</div>
Social