2020-10-13 21:04:50 +02:00
< h3 * ngIf = "formTitle" class = "uk-margin-auto" > {{formTitle}}< / h3 >
2019-12-03 13:50:39 +01:00
< 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 [ formGroup ] = " contactForm " >
< div class = "uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom" >
*Required fields
< / div >
2020-06-29 15:15:52 +02:00
< div * ngIf = "contactForm.get('name')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2019-12-03 13:50:39 +01:00
Name < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2019-12-03 13:50:39 +01:00
< input class = "uk-input" type = "text" placeholder = "Your name" formControlName = "name"
[class.uk-form-danger]="contactForm.get('name').invalid & & contactForm.get('name').touched">
< / div >
2020-06-29 15:15:52 +02:00
< div * ngIf = "contactForm.get('surname')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2019-12-03 13:50:39 +01:00
Surname < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2019-12-03 13:50:39 +01:00
< input class = "uk-input" type = "text" placeholder = "Your surname" formControlName = "surname"
[class.uk-form-danger]="contactForm.get('surname').invalid & & contactForm.get('surname').touched">
< / div >
2020-06-29 15:15:52 +02:00
< div * ngIf = "contactForm.get('email')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2019-12-03 13:50:39 +01:00
Email < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2020-06-23 22:50:46 +02:00
< input class = "uk-input" type = "text" placeholder = "Preferably your work email" formControlName = "email"
2019-12-03 13:50:39 +01:00
[class.uk-form-danger]="contactForm.get('email').invalid & & contactForm.get('email').touched">
< / div >
2020-06-29 15:15:52 +02:00
< div * ngIf = "contactForm.get('job')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2020-06-23 22:50:46 +02:00
Job Title < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2020-06-23 22:50:46 +02:00
< input class = "uk-input" type = "text" placeholder = "Your job title" formControlName = "job"
[class.uk-form-danger]="contactForm.get('job').invalid & & contactForm.get('job').touched">
< / div >
2020-06-29 15:15:52 +02:00
< div * ngIf = "contactForm.get('affiliation')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2019-12-03 13:50:39 +01:00
Affiliation < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2019-12-03 13:50:39 +01:00
< input class = "uk-input" type = "text" placeholder = "Your affiliation" formControlName = "affiliation"
[class.uk-form-danger]="contactForm.get('affiliation').invalid & & contactForm.get('affiliation').touched">
< / div >
2020-05-29 12:31:09 +02:00
< div * ngIf = "contactForm.get('community')" class = "uk-width-1-2@s uk-margin-top" >
2020-04-27 12:48:18 +02:00
< div class = "uk-width-1-1" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom uk-text-nowrap" > Research Community or Infrastructure < span class = "uk-text-danger uk-text-bold" > *< / span > < / h6 >
2020-04-23 17:58:04 +02:00
< / div >
2020-05-29 12:31:09 +02:00
< input class = "uk-input uk-width-1" type = "text" placeholder = "Your community name" formControlName = "community"
2019-12-03 13:50:39 +01:00
[class.uk-form-danger]="contactForm.get('community').invalid & & contactForm.get('community').touched">
< / div >
2020-06-23 22:50:46 +02:00
< div * ngIf = "contactForm.get('organization')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" > Organization < span class = "uk-text-danger uk-text-bold" > *< / span > < / h6 >
2020-06-23 22:50:46 +02:00
< input class = "uk-input uk-width-1-1" type = "text" placeholder = "Your organization" formControlName = "organization"
[class.uk-form-danger]="contactForm.get('organization').invalid & & contactForm.get('organization').touched">
< / div >
< div * ngIf = "contactForm.get('organizationType')" class = "uk-width-1-2@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" > Organization Type< span class = "uk-text-danger uk-text-bold" > *< / span > < / h6 >
2020-06-23 22:50:46 +02:00
< input type = "text" class = "uk-input uk-width-1-1" placeholder = "Your Organization Type" formControlName = "organizationType"
[class.uk-form-danger]="contactForm.get('organizationType').invalid & & contactForm.get('organizationType').touched"
[matAutocomplete]="auto">
< mat-autocomplete # auto = "matAutocomplete" >
< mat-option * ngFor = "let option of autoCompleteTypes | async" [ value ] = " option " >
{{option}}
< / mat-option >
< / mat-autocomplete >
2019-12-03 13:50:39 +01:00
< / div >
2020-06-11 19:03:03 +02:00
< div * ngIf = "contactForm.get('subject')" class = "uk-width-1-1@s uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" > Subject< span class = "uk-text-danger uk-text-bold" > *< / span > < / h6 >
2020-06-11 19:03:03 +02:00
< input class = "uk-input uk-width-1-1" type = "text" placeholder = "Your subject" formControlName = "subject"
[class.uk-form-danger]="contactForm.get('subject').invalid & & contactForm.get('subject').touched">
< / div >
2019-12-03 13:50:39 +01:00
< div * ngIf = "contactForm.get('message')" class = "uk-width-1-1 uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2019-12-03 13:50:39 +01:00
Message < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2019-12-03 13:50:39 +01:00
< textarea rows = "4" class = "uk-textarea" placeholder = "Your message" formControlName = "message"
[class.uk-form-danger]="contactForm.get('message').invalid & & contactForm.get('message').touched">
< / textarea >
< / div >
2020-09-14 17:08:34 +02:00
< div * ngIf = "contactForm.get('description')" class = "uk-width-1-1 uk-margin-top" >
2020-10-13 21:04:50 +02:00
< h6 class = "uk-text-bold uk-margin-small-bottom" >
2020-09-14 17:08:34 +02:00
Description < span class = "uk-text-danger uk-text-bold" > *< / span >
2020-10-13 21:04:50 +02:00
< / h6 >
2020-09-14 17:08:34 +02:00
< textarea rows = "4" class = "uk-textarea" placeholder = "Your description" formControlName = "description"
[class.uk-form-danger]="contactForm.get('description').invalid & & contactForm.get('description').touched">
< / textarea >
< / div >
< div * ngIf = "contactForm.get('recaptcha')" class = "uk-width-1-2@s uk-margin-top" >
2019-12-03 13:50:39 +01:00
< re-captcha ( resolved ) = " handleRecaptcha ( $ event ) " [ ( siteKey ) ] = " properties . reCaptchaSiteKey " >
< / re-captcha >
< / div >
2020-09-14 17:08:34 +02:00
< div class = "uk-width-1-2@s uk-text-right uk-margin-medium-top" [ class . uk-hidden ] = " ! right " >
< button class = "uk-button" [ class . portal-button ] = " ! buttonClass " [ ngClass ] = " buttonClass " ( click ) = " send ( ) " > Send< / button >
< / div >
< div class = "uk-margin-medium-top uk-width-1-1" [ class . uk-hidden ] = " right " >
< button class = "uk-button" [ class . portal-button ] = " ! buttonClass " [ ngClass ] = " buttonClass " ( click ) = " send ( ) " > Send< / button >
2019-12-03 13:50:39 +01:00
< / div >
< / div >