53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
<article class="contact" data-page="contact">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Contact</h2>
|
|
</header>
|
|
|
|
<section class="mapbox" data-mapbox>
|
|
<figure>
|
|
<iframe
|
|
src="https://maps.google.com/maps?width=520&height=400&hl=en&q=Main%20Street%20Samalkot+(My%20City)&t=&z=12&ie=UTF8&iwloc=B&output=embed"
|
|
width="400" height="300" loading="lazy"></iframe>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="contact-form">
|
|
|
|
<h3 class="h3 form-title">Contact Form</h3>
|
|
|
|
<form class="form" #messageForm="ngForm" (ngSubmit)="sendMessage(messageForm)" autocomplete="off">
|
|
|
|
<div class="input-wrapper">
|
|
<div>
|
|
<input type="text" name="fullname" maxlength="20" #fullName="ngModel" autocomplete="new" [(ngModel)]="messageModel.name" class="form-input" placeholder="Full name" required>
|
|
<em class="error" *ngIf="(fullName.errors?.['required']) && fullName.touched">Full name is required</em>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="email" name="email" email #email="ngModel" autocomplete="new" [(ngModel)]="messageModel.email" class="form-input" placeholder="Email address" required>
|
|
<em class="error" *ngIf="(email.errors?.['email'] && !email.errors?.['required']) && email.touched">Must be a valid email format</em>
|
|
<em class="error" *ngIf="(email.errors?.['required']) && email.touched">Email is required</em>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-area">
|
|
<textarea name="message" #message="ngModel" autocomplete="off" maxlength="500" [(ngModel)]="messageModel.content" class="form-input" placeholder="Your Message" required></textarea>
|
|
<em class="error" *ngIf="(message.errors?.['required']) && message.touched">Message is required</em>
|
|
</div>
|
|
|
|
<button class="form-btn" type="submit" [disabled]="messageForm.form.invalid && submitted">
|
|
<i class="fa-regular fa-paper-plane"></i>
|
|
<span>Send Message</span>
|
|
</button>
|
|
<div class="messageSentError" *ngIf="messageSentError">
|
|
Message not sent. Please try again.
|
|
</div>
|
|
<div class="messageSentSuccess" *ngIf="messageSentSuccess">
|
|
Message sent successfully.
|
|
</div>
|
|
</form>
|
|
|
|
</section>
|
|
|
|
</article> |