D-Net

<div class="contact-background image-front-topbar uk-section-large uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" 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 style=" min-height: 350px;"  class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">

        <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-2@m uk-width-1-1@s">

                        <h4 class="uk-margin-auto uk-h4 uk-text-bold">Contact us to create your Community Gateway</h4>

                        <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 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 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 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 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">

                                Community Name <span class="uk-text-danger uk-text-bold">*</span>

                            </label>

                            <div class="uk-width-1-2 uk-margin-remove-top">

                                <div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>

                                <input class="uk-input" type="text" placeholder="Your Community 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>

                                <button class="uk-button portal-button" (click)="send()">Send</button>

                            </div>

                        </div>

                    </div>

                    <div class="uk-width-1-2@m uk-width-1-1@s">

                        <h5 class="uk-margin-auto-top uk-margin-remove-bottom uk-h5 uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h5>

                        <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">

                            <li><h5 class="uk-h5"><span class="uk-text-bold">Create and Manage</span> your

                                Community Gateway</h5></li>

                            <li><h5 class="uk-h5"><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>

                            <li><h5 class="uk-h5"><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>

                        </ul>

                    </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>