monitor/src/app/contact/contact.component.html

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>

<ng-template #info>
<!--  <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"-->
<!--          [texts]="pageContents['right']"></helper>-->
  <div class="uk-margin-auto-top uk-margin-remove-bottom  uk-text-bold uk-h4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
<!--  <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
      <li><h5><span class="uk-text-bold">Create and Manage</span> your
          Community Gateway</h5></li>
      <li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
      <li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
  </ul>-->
  <div class="uk-margin-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</ng-template>
<div class="image-front-topbar"
     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
     tm-header-transparent="light" tm-header-transparent-placeholder="">
  <div
    class="contact-background uk-section-large uk-background-top-center uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
    <div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle uk-margin-top uk-padding-remove-top">
      <div class="uk-align-center">
        <div *ngIf="showLoading" class="uk-margin-large">
          <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
            class="loading-gif  uk-align-center"></span></div>
        </div>
        <div *ngIf="!showLoading" class="uk-container uk-container-large">
          <div class="uk-grid-divider" uk-grid>
            <div class="uk-width-1-1 uk-hidden@m">
              <ng-container *ngTemplateOutlet="info"></ng-container>
            </div>
            <div class="uk-width-1-2@m uk-width-1-1@s">
              <div class="uk-margin-auto uk-text-bold uk-h4">Contact us to create your Monitor Dashboard</div>
              <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
                   role="alert">{{errorMessage}}</div>
              <div class="uk-margin-top" uk-grid>
                <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required
                  fields
                </div>
                <div class="uk-width-1-2@s uk-margin-small-top">
                  <label class="uk-h5 uk-text-bold">
                    Name <span class="uk-text-danger uk-text-bold">*</span>
                  </label>
                  <div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
                    Please add a name.
                  </div>
                  <input class="uk-input" type="text" placeholder="Your name" [(ngModel)]="contactForm.name" required
                         #name="ngModel">
                </div>
                <div class="uk-width-1-2@s  uk-margin-small-top">
                  <label class="uk-h5 uk-text-bold">
                    Surname <span class="uk-text-danger uk-text-bold">*</span>
                  </label>
                  <div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
                    Please add a surname.
                  </div>
                  <input class="uk-input" type="text" placeholder="Your surname" [(ngModel)]="contactForm.surname"
                         required #surname="ngModel">
                </div>
                <div class="uk-width-1-2@s uk-margin-small-top">
                  <label class="uk-h5 uk-text-bold">
                    Email <span class="uk-text-danger uk-text-bold">*</span>
                  </label>
                  <div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
                    Please add an email.
                  </div>
                  <div
                    *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')"
                    class=" uk-text-danger uk-text-small style=display:none">Please add a valid email.
                  </div>
                  <input class="uk-input" type="email" placeholder="Your email" [(ngModel)]="contactForm.email" required
                         #sender="ngModel">
                </div>
                <div class="uk-width-1-2@s uk-margin-small-top">
                  <label class="uk-h5 uk-text-bold">
                    Affiliation <span class="uk-text-danger uk-text-bold">*</span>
                  </label>
                  <div *ngIf="affiliation.invalid && isSubmitted"
                       class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation.
                  </div>
                  <input class="uk-input" type="text" placeholder="Your affiliation"
                         [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
                </div>
                <label class="uk-width-1-1 uk-h5 uk-text-bold">
                  Funder Name <span class="uk-text-danger uk-text-bold">*</span>
                </label>
                <div class="uk-width-1-2@s uk-margin-remove-top">
                  <div *ngIf="community.invalid && isSubmitted"
                       class=" uk-text-danger uk-text-small style=display:none"> Please add a funder name.
                  </div>
                  <input class="uk-input" type="text" placeholder="Your funder name"
                         [(ngModel)]="contactForm.community" required #community="ngModel">
                </div>
                <label class="uk-width-1-1 uk-h5 uk-text-bold">
                  Message <span class="uk-text-danger uk-text-bold">*</span>
                </label>
                <div class="uk-width-1-1 uk-margin-remove-top">
                  <div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
                    Please write us a message.
                  </div>
                  <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message"
                            [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
                </div>
                <div class="uk-width-1-1">
                  <div *ngIf="!contactForm.recaptcha && isSubmitted"
                       class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge.
                  </div>
                  <re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey"
                              required></re-captcha>
                </div>
                <div class="uk-width-1-1 uk-text-right">
                  <button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
                  <!-- (click)="send()" -->
                  <button class="uk-button portal-button" >Send</button>
                </div>
              </div>
            </div>
            <div class="uk-width-1-2 uk-visible@m">
              <ng-container *ngTemplateOutlet="info"></ng-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<modal-alert #AlertModal (alertOutput)="goToHome($event)">
  <div class="uk-text-center">
    Our team will respond to your submission soon.<br>
    Press OK to redirect to OpenAIRE Connect home page.
  </div>
</modal-alert>