balloon contact

Client/src/app/components/balloon/balloon.component.css

@@ -6,6 +6,14 @@
     display: none;
 }
 
+.bold {
+    font-weight: bold;
+}
+
+.margin-top-space {
+    margin-top: 20px;
+}
+
 .errorMessages{
     color: white;
     background-color: rgb(255,90,90);

Client/src/app/components/balloon/balloon.component.html

@@ -1,9 +1,15 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent>
       <br>
-      <p>
+      <p class="bold">
-        For general questions please complete the form below. If you are a missionary requesting
+        We are so glad you found one of our balloons. We would love to hear from you 
-        support please complete the <a routerLink="/missionary">Missionary Questionnaire form by clicking here.</a>
+        and where you found it!        
+      </p>
+      <p class="margin-top-space">
+        Click <a routerLink="/whoweare">here</a> to learn more about us.
+      </p>
+      <p class="margin-top-space">
+        Click <a routerLink="/salvation">here</a> to learn more about <span class="bold">Jesus</span>.
       </p>
       <br>
         <div *ngIf="!formSubmitted">            
@@ -12,13 +18,16 @@
                 <input matInput type="text" placeholder="Name" required value="" [(ngModel)]="name" name="name" >
               </mat-form-field>
               <mat-form-field class="full-width">
-                <input matInput type="email" placeholder="Email" required value="" [(ngModel)]="email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
+                <input matInput type="text" placeholder="City, State" required value="" [(ngModel)]="location" name="location" >
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <input matInput type="email" placeholder="Email" value="" [(ngModel)]="email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
               </mat-form-field>
               <mat-form-field class="full-width">
                 <input matInput type="tel" placeholder="Phone" value="" [(ngModel)]="phone" name="phone">
               </mat-form-field>
               <mat-form-field class="full-width">
-                <textarea matInput type="text" placeholder="Message" required value="" [(ngModel)]="body" name="body" rows="5" ></textarea>
+                <textarea matInput type="text" placeholder="Other Information or Questions" value="" [(ngModel)]="body" name="body" rows="5" ></textarea>
               </mat-form-field>
               <mat-form-field class="hide">
                 <input matInput type="text" placeholder="hp" required value="" [(ngModel)]="hp" name="subject">

Client/src/app/components/balloon/balloon.component.ts

@@ -18,6 +18,7 @@ export class BalloonComponent implements OnInit {
 
   public name: string;
   public email: string;
+  public location: string;
   public phone: string;
   public body: string;
   public hp: string = ".";
@@ -37,20 +38,23 @@ export class BalloonComponent implements OnInit {
     if (this.name == null || this.name == ""){
       this.errorMessages.push("Please enter a name");
     }
-    if (this.email == null || this.email == ""){
+    if (this.location == null || this.location == ""){
-      this.errorMessages.push("Please enter an email address");
+      this.errorMessages.push("Please enter a city and state");
     }
     if (this.body == null || this.body == ""){
       this.errorMessages.push("Please enter a message");
     }
     if (this.errorMessages.length > 0){ return; }
 
+    const body = `Location of balloon: ${this.location}\n${this.body}`;
+    const email = this.email || ' ';
+
     this.submitButtonText = "Please Wait...";
     this.submitButtonDisabled = true;
     this.emailService.sendEmail(this.name,
                                 this.email,
                                 this.phone,
-                                this.body,
+                                body,
                                 this.hp)
                       .subscribe(
                         success => {this.emailSuccess();},