Skip to content

E
EMSystemsWeb
Commit 0b809c28 by Mac Stephens
Options

Update Request Demo form: add state/county/comments + interest dropdown;… 

Update Request Demo form: add state/county/comments + interest dropdown; simplify validation (name/email/phone/agency required); make contact radios optional with Email default
parent c2c7ce52
Showing with 168 additions and 68 deletions
emSystemsWeb/View.RequestDemo.dfm
......@@ -5,8 +5,8 @@ object FRequestDemo: TFRequestDemo
ElementFont = efCSS
OnCreate = WebFormCreate
object lblReqPrefMethod: TWebLabel
Left = 54
Top = 138
Left = 50
Top = 218
Width = 225
Height = 15
Caption = 'Please choose a preferred contact method.'
......@@ -18,8 +18,8 @@ object FRequestDemo: TFRequestDemo
end
object edtReqName: TWebEdit
Left = 50
Top = 62
Width = 121
Top = 34
Width = 267
Height = 22
TabStop = False
ElementID = 'edt_req_name'
......@@ -30,7 +30,7 @@ object FRequestDemo: TFRequestDemo
WidthPercent = 100.000000000000000000
end
object edtReqEmail: TWebEdit
Left = 196
Left = 50
Top = 62
Width = 121
Height = 22
......@@ -45,8 +45,8 @@ object FRequestDemo: TFRequestDemo
WidthPercent = 100.000000000000000000
end
object edtReqAgency: TWebEdit
Left = 196
Top = 100
Left = 50
Top = 90
Width = 121
Height = 22
TabStop = False
......@@ -59,8 +59,8 @@ object FRequestDemo: TFRequestDemo
WidthPercent = 100.000000000000000000
end
object edtReqPhoneNumber: TWebEdit
Left = 50
Top = 100
Left = 196
Top = 62
Width = 121
Height = 22
TabStop = False
......@@ -75,8 +75,8 @@ object FRequestDemo: TFRequestDemo
WidthPercent = 100.000000000000000000
end
object radReqPhone: TWebRadioButton
Left = 54
Top = 164
Left = 50
Top = 239
Width = 117
Height = 22
Caption = 'Phone'
......@@ -89,26 +89,27 @@ object FRequestDemo: TFRequestDemo
HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000
OnClick = radReqPhoneClick
end
object radReqEmail: TWebRadioButton
Left = 196
Top = 164
Top = 239
Width = 121
Height = 22
Caption = 'Email'
Checked = False
Checked = True
ChildOrder = 6
Color = clNone
ElementID = 'rad_req_email'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000
OnClick = radReqEmailClick
end
object btnReqSendRequest: TWebButton
Left = 54
Top = 212
Left = 50
Top = 267
Width = 96
Height = 25
Caption = 'Send Request'
......@@ -121,10 +122,77 @@ object FRequestDemo: TFRequestDemo
WidthPercent = 100.000000000000000000
OnClick = btnReqSendRequestClick
end
object edtReqState: TWebEdit
Left = 196
Top = 90
Width = 121
Height = 22
TabStop = False
ChildOrder = 8
ElementClassName = 'form-control'
ElementID = 'edt_req_state'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object edtReqCounty: TWebEdit
Left = 50
Top = 118
Width = 121
Height = 22
TabStop = False
ChildOrder = 8
ElementClassName = 'form-control'
ElementID = 'edt_req_county'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object memoAdditionalComments: TWebMemo
Left = 50
Top = 147
Width = 267
Height = 65
TabStop = False
ElementID = 'memo_additional_comments'
ElementFont = efCSS
HeightPercent = 100.000000000000000000
Lines.Strings = (
'')
SelLength = 0
SelStart = 2
ShowFocus = False
WidthPercent = 100.000000000000000000
end
object wcbInterest: TWebComboBox
Left = 196
Top = 118
Width = 121
Height = 23
ElementClassName = 'form-select'
ElementID = 'wcb_interest'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
ShowFocus = False
TabStop = False
WidthPercent = 100.000000000000000000
ItemIndex = -1
Items.Strings = (
''
'Public Safety'
'Records Management'
'Custom Software'
'Other')
end
object xdwcRequestDemo: TXDataWebClient
Connection = DMConnection.ApiConnection
OnError = xdwcRequestDemoError
Left = 270
Top = 260
Left = 264
Top = 362
end
end
emSystemsWeb/View.RequestDemo.html
......@@ -22,24 +22,45 @@
</div>
<div class="col-12 col-md-7">
<label for="edt_req_email" class="form-label mb-1">Email</label>
<label for="edt_req_email" class="form-label mb-1">Email*</label>
<input type="email" class="form-control" id="edt_req_email">
<div id="fb_req_email" class="invalid-feedback">Please enter a valid email address.</div>
</div>
<div class="col-12 col-md-5">
<label for="edt_req_phone_number" class="form-label mb-1">Phone Number</label>
<label for="edt_req_phone_number" class="form-label mb-1">Phone Number*</label>
<input type="tel" class="form-control" id="edt_req_phone_number">
<div id="fb_req_phone" class="invalid-feedback">Please enter a phone number.</div>
</div>
<div class="col-12 col-md-6">
<label for="edt_req_agency" class="form-label mb-1">Agency</label>
<label for="edt_req_agency" class="form-label mb-1">Company/Agency*</label>
<input type="text" class="form-control" id="edt_req_agency">
<div id="fb_req_agency" class="invalid-feedback">Please enter your Agency or Company.</div>
</div>
<div class="col-12 col-md-6">
<label for="edt_req_state" class="form-label mb-1">State</label>
<input type="text" class="form-control" id="edt_req_state">
</div>
<div class="col-12 col-md-6">
<label for="edt_req_county" class="form-label mb-1">County</label>
<input type="text" class="form-control" id="edt_req_county">
</div>
<div class="col-12 col-md-6">
<label for="wcb_interest" class="form-label mb-1">Interest</label>
<select class="form-select" id="wcb_interest"></select>
</div>
<div class="col-12">
<div id="lbl_req_pref_method" class="form-label mb-2">Preferred Contact Method*</div>
<label for="memo_additional_comments" class="form-label mb-1">Additional Comments</label>
<textarea class="form-control" id="memo_additional_comments" rows="4"></textarea>
</div>
<div class="col-12">
<div id="lbl_req_pref_method" class="form-label mb-2">Preferred Contact Method</div>
<div class="d-flex flex-column flex-sm-row gap-2 gap-sm-4">
<div class="form-check">
......@@ -53,9 +74,6 @@
</div>
</div>
<div id="fb_req_pref" class="text-danger small mt-1 d-none">
Please choose a preferred contact method.
</div>
</div>
<div class="col-12 mt-4">
......@@ -63,12 +81,8 @@
Send Request
</button>
</div>
</div>
</form>
</div>
</div>
</div>
......
emSystemsWeb/View.RequestDemo.pas
......@@ -18,7 +18,13 @@ type
radReqEmail: TWebRadioButton;
btnReqSendRequest: TWebButton;
xdwcRequestDemo: TXDataWebClient;
edtReqState: TWebEdit;
edtReqCounty: TWebEdit;
memoAdditionalComments: TWebMemo;
wcbInterest: TWebComboBox;
procedure btnReqSendRequestClick(Sender: TObject);
procedure radReqEmailClick(Sender: TObject);
procedure radReqPhoneClick(Sender: TObject);
procedure WebFormCreate(Sender: TObject);
procedure xdwcRequestDemoError(Error: TXDataClientError);
private
......@@ -27,7 +33,6 @@ type
procedure NavScrollSizing;
procedure ClearFieldErrors;
procedure SetInvalid(const inputId: string);
procedure ShowFeedback(const feedbackId: string);
function ValidateRequest: Boolean;
procedure SendRequest;
end;
......@@ -93,14 +98,6 @@ begin
Result := '';
end;
procedure TFRequestDemo.ShowFeedback(const feedbackId: string);
var
el: TJSHTMLElement;
begin
el := TJSHTMLElement(document.getElementById(feedbackId));
if Assigned(el) then
el.classList.remove('d-none');
end;
procedure TFRequestDemo.SetInvalid(const inputId: string);
var
......@@ -114,7 +111,6 @@ end;
procedure TFRequestDemo.ClearFieldErrors;
var
inputEl: TJSHTMLElement;
prefEl: TJSHTMLElement;
begin
inputEl := TJSHTMLElement(document.getElementById('edt_req_name'));
if Assigned(inputEl) then inputEl.classList.remove('is-invalid');
......@@ -125,52 +121,49 @@ begin
inputEl := TJSHTMLElement(document.getElementById('edt_req_phone_number'));
if Assigned(inputEl) then inputEl.classList.remove('is-invalid');
prefEl := TJSHTMLElement(document.getElementById('fb_req_pref'));
if Assigned(prefEl) then
prefEl.classList.add('d-none');
inputEl := TJSHTMLElement(document.getElementById('edt_req_agency'));
if Assigned(inputEl) then inputEl.classList.remove('is-invalid');
end;
function TFRequestDemo.ValidateRequest: Boolean;
var
prefMissing: Boolean;
needsEmail: Boolean;
needsPhone: Boolean;
emailHasText: Boolean;
isValid: Boolean;
emailText: string;
begin
ClearFieldErrors;
isValid := True;
if edtReqName.Text.Trim = '' then
begin
SetInvalid('edt_req_name');
Exit(False);
isValid := False;
end;
prefMissing := not (radReqPhone.Checked or radReqEmail.Checked);
if prefMissing then
emailText := edtReqEmail.Text.Trim;
if emailText = '' then
begin
ShowFeedback('fb_req_pref');
Exit(False);
end;
needsEmail := radReqEmail.Checked;
needsPhone := radReqPhone.Checked;
emailHasText := edtReqEmail.Text.Trim <> '';
if (needsEmail or emailHasText) and (not IsEmailValid(edtReqEmail.Text)) then
SetInvalid('edt_req_email');
isValid := False;
end
else if not IsEmailValid(emailText) then
begin
SetInvalid('edt_req_email');
Exit(False);
isValid := False;
end;
if needsPhone and (edtReqPhoneNumber.Text.Trim = '') then
if edtReqPhoneNumber.Text.Trim = '' then
begin
SetInvalid('edt_req_phone_number');
Exit(False);
isValid := False;
end;
Result := True;
if edtReqAgency.Text.Trim = '' then
begin
SetInvalid('edt_req_agency');
isValid := False;
end;
Result := isValid;
end;
......@@ -194,17 +187,38 @@ begin
SendRequest;
end;
procedure TFRequestDemo.radReqEmailClick(Sender: TObject);
begin
if radReqEmail.Checked then
radReqPhone.Checked := False;
end;
procedure TFRequestDemo.radReqPhoneClick(Sender: TObject);
begin
if radReqPhone.Checked then
radReqEmail.Checked := False;
end;
procedure TFRequestDemo.SendRequest;
var
bodyText: string;
pref: string;
begin
pref := PreferredMethod;
bodyText :=
'Demo request details:' + sLineBreak +
'Name: ' + edtReqName.Text + sLineBreak +
'Email: ' + edtReqEmail.Text + sLineBreak +
'Phone: ' + edtReqPhoneNumber.Text + sLineBreak +
'Agency: ' + edtReqAgency.Text + sLineBreak +
'Preferred contact: ' + PreferredMethod;
'Company/Agency: ' + edtReqAgency.Text + sLineBreak +
'State: ' + edtReqState.Text + sLineBreak +
'County: ' + edtReqCounty.Text + sLineBreak +
'Interest: ' + wcbInterest.Text + sLineBreak +
'Additional comments: ' + memoAdditionalComments.Text;
if pref <> '' then
bodyText := bodyText + sLineBreak + 'Preferred contact: ' + pref;
xdwcRequestDemo.RawInvoke('IApiService.SendEmail',
[edtReqName.Text, edtReqEmail.Text, 'Demo Request', bodyText],
......@@ -217,8 +231,12 @@ begin
edtReqEmail.Text := '';
edtReqPhoneNumber.Text := '';
edtReqAgency.Text := '';
edtReqState.Text := '';
edtReqCounty.Text := '';
memoAdditionalComments.Text := '';
radReqPhone.Checked := False;
radReqEmail.Checked := False;
radReqEmail.Checked := True;
wcbInterest.ItemIndex := -1;
ShowNotificationModal('Your demo request has been sent successfully. We will reach out shortly.');
end);
......
emSystemsWebServer/bin/emSystemsWebServer.ini
[Settings]
memoLogLevel=3
fileLogLevel=4
LogFileNum=43
LogFileNum=44
webClientVersion=1.0.1
[SMTP]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment