789 lines
30 KiB
HTML
789 lines
30 KiB
HTML
<html data-vvvebjs-editor><head><base src="../"><link href="../css/style.bundle.css" rel="stylesheet"><link href="../css/screenshots.css" rel="stylesheet"><style>[data-reveal] {
|
|
opacity: 1;
|
|
transform: translate(0);
|
|
}</style><link href="../css/screenshots.css" rel="stylesheet"></head><body><section title="Contact form 1" class="contact-form-9" aria-label="contact-form-9">
|
|
<div class="container py-5 my-5">
|
|
<div class="row py-5">
|
|
<div class="col py-5">
|
|
<div>
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-12 col-md-9 col-lg-7">
|
|
<h1>Contact Us</h1>
|
|
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center pt-4">
|
|
<div class="col-12 col-md-8">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-12 col-md">
|
|
<input type="text" class="form-control" placeholder="Name">
|
|
</div>
|
|
<div class="col-12 col-md mt-4 mt-md-0">
|
|
<input type="text" class="form-control" placeholder="Email">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Subject">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col text-center">
|
|
<button type="submit" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 2" class="contact-form-11 pt-0" aria-label="contact-form-11">
|
|
<div class="container-fluid p-0 pb-5">
|
|
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row pt-5">
|
|
<div class="col-12">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-12 col-md">
|
|
<label>First Name</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="col-12 col-md mt-4 mt-md-0">
|
|
<label>Last Name</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<label>Your Email</label>
|
|
<input type="email" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<label>Subject (optional but helpful)</label>
|
|
<input type="email" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<label>How can we help?</label>
|
|
<textarea class="form-control" name="message" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4 text-center">
|
|
<div class="col">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 3" class="contact-form-12 py-0" aria-label="contact-form-12">
|
|
<div class="container py-5">
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-7">
|
|
<h1>Contact Us</h1>
|
|
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row-50">
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-7">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col">
|
|
<label>Your Email Address</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<label>Subject</label>
|
|
<input type="email" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<label>How can we help?</label>
|
|
<textarea class="form-control" name="message" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col text-end">
|
|
<button type="submit" class="btn btn-dark">Send</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row-100"></div>
|
|
</div>
|
|
|
|
<div class="container-fluid p-0">
|
|
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
|
|
</div>
|
|
</section><section title="Contact form 4" class="contact-form-13" aria-label="contact-form-13">
|
|
<div class="container">
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-7">
|
|
<h1>Contact Us</h1>
|
|
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row-70"></div>
|
|
<div class="row">
|
|
<div class="col-12 col-md-8 col-lg m-auto">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Email">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Subject">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-8 col-lg pt-5 m-auto pt-lg-0">
|
|
<iframe loading="lazy" class="mb-4" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="200" frameborder="0"></iframe>
|
|
|
|
<p>
|
|
<strong>Showroom</strong>
|
|
</p>
|
|
<p>
|
|
71 Pilgrim Avenue
|
|
<br>Chevy Chase, MD 20815
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 5" class="contact-form-2 container-fluid px-5 my-5" aria-label="contact-form-2">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-10">
|
|
<div class="card border-0 rounded-3 shadow-lg ">
|
|
<div class="card-body p-0">
|
|
<div class="row g-0">
|
|
<div class="col-sm-6 d-none d-sm-block bg-image">
|
|
|
|
<img alt="image" src="demo/img/illustrations.co/day68-happy-cat.svg" alt="happy cat" loading="lazy" class="img-fluid">
|
|
|
|
</div>
|
|
<div class="col-sm-6 p-4">
|
|
<div class="text-center">
|
|
<div class="h3 fw-light">Contact Form</div>
|
|
<p class="mb-4 text-muted">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
|
|
</div>
|
|
|
|
|
|
<form id="contactForm">
|
|
|
|
|
|
<div class=" mb-3">
|
|
<input class="form-control" id="name" type="text" placeholder="Name" required />
|
|
<label for="name">Name</label>
|
|
</div>
|
|
|
|
|
|
<div class=" mb-3">
|
|
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" required />
|
|
<label for="emailAddress">Email Address</label>
|
|
</div>
|
|
|
|
|
|
<div class=" mb-3">
|
|
<textarea class="form-control" id="message" type="text" placeholder="Message" style="height: 10rem;" required></textarea>
|
|
<label for="message">Message</label>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="d-grid">
|
|
<button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 6" title="contact-form-6" class="contact-form-6">
|
|
<div class="container-fluid g-0">
|
|
|
|
<div style="height:300px" data-component-maps>
|
|
<iframe loading="lazy" frameborder="0" title="map" src="https://maps.google.com/maps?q=Bucharest&z=15&t=q&key=&output=embed" width="100%" height="100%" style="width:100%;height:100%;left:0px">
|
|
</iframe>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="container">
|
|
<div class="row my-5">
|
|
<div class="col-12 col-md-6 col-lg-5">
|
|
<h2 class="display-6 mb-1 fw-bold mb-4">Contact Us</h2>
|
|
<p class="lead">
|
|
Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.
|
|
</p>
|
|
|
|
<p class="lead">
|
|
The html for sections blocks and components and this template are built using Bootstrap 5.
|
|
</p>
|
|
|
|
<div data-v-component-site>
|
|
<p class="mt-5">
|
|
<b>
|
|
<i class="la la-lg la-envelope opacity-50"></i> Email:
|
|
</b>
|
|
<span data-v-if="site.contact-email">
|
|
<a href="mailto:contact@mysite.com" data-v-site-contact-email>
|
|
<span data-v-site-contact-email>contact@mysite.com</span>
|
|
</a>
|
|
</span>
|
|
</p>
|
|
<p class="">
|
|
<b>
|
|
<i class="la la-lg la-phone opacity-50"></i> Phone:
|
|
</b>
|
|
<a href="tel:5511112377" data-v-site-description-phone-number>
|
|
<span data-v-site-description-phone-number>+55 (111) 123 777</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6 ms-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
|
|
|
|
<div class="notifications" data-v-notifications>
|
|
|
|
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center text-small">
|
|
<div>
|
|
<div data-v-notification-text>
|
|
This is a placeholder for a notification message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
|
|
This is a placeholder for a success message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center" data-v-notification-text>
|
|
This is a placeholder for a info message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="border rounded-3 p-4 border-opacity-25 border-light-subtle">
|
|
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
|
|
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
|
|
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="First name" name="first_name" required>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Last name" name="last_name" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Email" name="email" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Subject" name="subject" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- if these hidden inputs are filled then ignore, robots -->
|
|
|
|
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
|
|
|
|
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
|
|
|
|
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
|
|
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
|
|
</span>
|
|
<span>Submitting</span> ...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<span>Submit</span>
|
|
<i class="la la-lg la-envelope opacity-50 ms-2"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 7" class="contact-form-8" aria-label="contact-form-8">
|
|
<div class="container">
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-7">
|
|
<h1>Contact Us</h1>
|
|
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pt-4">
|
|
<div class="col-12 col-md-6">
|
|
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6 pt-5">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Email">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Subject">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 8" class="contact-form-8 pt-0" aria-label="contact-form-8">
|
|
<div class="container-fluid p-0 pb-3">
|
|
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row text-center justify-content-center pt-5">
|
|
<div class="col-12 col-md-7">
|
|
<h1>Contact Us</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center pt-4">
|
|
<div class="col-12 col-md-7">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Email">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Subject">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col text-center">
|
|
<button type="submit" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row-100"></div>
|
|
</div>
|
|
<div class="">
|
|
<div class="container">
|
|
<div class="row-50"></div>
|
|
<div class="row justify-content-center text-center">
|
|
<div class="col-12 col-md me-auto ms-auto">
|
|
<p class="lead">+55 (111) 123 777</p>
|
|
</div>
|
|
|
|
<div class="col-12 col-md pt-4 me-auto ms-auto">
|
|
<p class="lead">7th St.
|
|
<br>New York, NY 12345
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-12 col-md pt-4 me-auto ms-auto">
|
|
<p class="lead">support@vvveb.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="row-50"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row-70"></div>
|
|
<div class="row text-center">
|
|
<div class="col">
|
|
<p class="h2">
|
|
<a class="mx-2">
|
|
<i class="la la-facebook"></i>
|
|
</a>
|
|
<a class="mx-2">
|
|
<i class="la la-twitter"></i>
|
|
</a>
|
|
<a class="mx-2">
|
|
<i class="la la-instagram"></i>
|
|
</a>
|
|
<a class="mx-2">
|
|
<i class="la la-google"></i>
|
|
</a>
|
|
<a class="mx-2">
|
|
<i class="la la-pinterest"></i>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 9" class="contact-form-3 py-5" aria-label="contact-form-3">
|
|
<div class="row no-gutters">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card-shadow">
|
|
<img alt="image" src="demo/img/illustrations.co/day68-happy-cat.svg" alt="happy cat" loading="lazy" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="contact-box ms-3">
|
|
<h1 class=" mt-2">Quick Contact</h1>
|
|
<form class="mt-4">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="form-group mt-2">
|
|
<input class="form-control" type="text" placeholder="name">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="form-group mt-2">
|
|
<input class="form-control" type="email" placeholder="email address">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="form-group mt-2">
|
|
<input class="form-control" type="text" placeholder="phone">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="form-group mt-2">
|
|
<textarea class="form-control" rows="3" placeholder="message"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<button type="submit" class="btn btn-success mt-3 text-white border-0 px-3 py-2">
|
|
<span> Submit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="card mt-4 border-0 mb-4">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-4">
|
|
<div class="card-body d-flex align-items-center c-detail pl-0">
|
|
<div class="me-3 align-self-center">
|
|
<i class="la la-map la-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h6>Address</h6>
|
|
<p>708 Picadilly Ave.
|
|
<br> New York
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4">
|
|
<div class="card-body d-flex align-items-center c-detail">
|
|
<div class="me-3 align-self-center">
|
|
<i class="la la-phone la-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h6>Phone</h6>
|
|
<p>555 111 333</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-4">
|
|
<div class="card-body d-flex align-items-center c-detail">
|
|
<div class="me-3 align-self-center">
|
|
<i class="la la-email la-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h6>Email</h6>
|
|
<p>
|
|
hello@vvveb.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><section title="Contact form 10" title="contact-form-10" class="contact-form-10 border-top">
|
|
<div class="container">
|
|
<div class="row my-5">
|
|
<div class="col-12 col-md-6 col-lg-5">
|
|
<h2 class="display-6 mb-1 fw-bold mb-4">Contact Us</h2>
|
|
<p class="lead">
|
|
Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.
|
|
</p>
|
|
|
|
<p class="lead">
|
|
The html for sections blocks and components and this template are built using Bootstrap 5.
|
|
</p>
|
|
|
|
<div data-v-component-site>
|
|
<p class="mt-5">
|
|
<b>
|
|
<i class="la la-lg la-envelope opacity-50"></i> Email:
|
|
</b>
|
|
<span data-v-if="site.contact-email">
|
|
<a href="mailto:contact@mysite.com" data-v-site-contact-email>
|
|
<span data-v-site-contact-email>contact@mysite.com</span>
|
|
</a>
|
|
</span>
|
|
</p>
|
|
<p class="">
|
|
<b>
|
|
<i class="la la-lg la-phone opacity-50"></i> Phone:
|
|
</b>
|
|
<a href="tel:5511112377" data-v-site-description-phone-number>
|
|
<span data-v-site-description-phone-number>+55 (111) 123 777</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6 ms-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
|
|
|
|
<div class="notifications" data-v-notifications>
|
|
|
|
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center text-small">
|
|
<div>
|
|
<div data-v-notification-text>
|
|
This is a placeholder for a notification message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
|
|
This is a placeholder for a success message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center" data-v-notification-text>
|
|
This is a placeholder for a info message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="border rounded-3 p-4 border-opacity-25 border-light-subtle">
|
|
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
|
|
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
|
|
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="First name" name="first_name" required>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Last name" name="last_name" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="email" class="form-control" placeholder="Email" name="email" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<input type="text" class="form-control" placeholder="Subject" name="subject" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- if these hidden inputs are filled then ignore, robots -->
|
|
|
|
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
|
|
|
|
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
|
|
|
|
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
|
|
|
|
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
|
|
</span>
|
|
<span>Submitting</span> ...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<span>Submit</span>
|
|
<i class="la la-lg la-envelope opacity-50 ms-2"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section></body></html> |