i have a Marketing form and i need to change the display error message see Picture.
my form : 
and I want That my error message be like This: 
JavaScript
x
121
121
1
here is my Code :2
3
<div>4
<div>5
<meta type="xrm/designer/setting" name="layout-editable" value="marketing-designer-layout-editable">6
<meta type="xrm/designer/setting" name="layout-max-width" value="600px" datatype="text" label="Layout max width">7
<form data-container="true" style="null" action = "" method = "get" novalidate>8
<style>9
div[data-editorblocktype=Field-radioButtons] 10
{11
width: 25% ;12
text-align: left ;13
}14
15
div[data-editorblocktype=Field-radioButtons] input 16
{17
width: auto;18
height: auto;19
margin-bottom: 3px;20
float: right;21
}22
23
div[data-editorblocktype=Field-radioButtons] span.lp-radioButton 24
{25
/* This rule is needed to style all radio button fields. For product constraints each option is defined as input and label wrapped into a span*/26
display: block;27
margin: 2px;28
}29
30
[data-layout="true"]31
{32
margin: 0 auto;33
max-width: /* @layout-max-width */34
600px /* @layout-max-width */35
;36
}37
</style>38
39
<div data-layout="true" tabindex="0">40
<div data-section="true" class="emptyContainer">41
<div style=" display: flex;width: 100%;flex-wrap: wrap;">42
<div style="clear:both;"></div>43
<div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 70px; min-width: 20px; width: calc(100% - 0px); padding: 10px; float: left; word-wrap: break-word; word-break: break-word; flex-direction: column;">44
<div data-editorblocktype="Image">45
<div class="imageWrapper" width="100%" align="Center"> 46
<img alt="Test Newsletter" class="" src="https://test/Y0gdmVq8p6izVL5Ig6QF2elBYT71iDv3rsgqHc-uOI8!" style="max-height: 100%; max-width: 100%; position: static; display: block; top: 0px; left: 0px; box-sizing: border-box;">47
</div>48
</div>49
<div data-editorblocktype="Text"><p><big><big><span><strong>Abonnieren Sie unseren </strong></span></big></big><br>50
<span><big><big><strong>Test Newsletter!</strong></big></big></span></p>51
<p><span style="font-size:16px;">Nach der Übermittlung Ihrer Kontaktdaten erhalten Sie von <em>info@test.de</em> einen Bestätigungslink, um die Anmeldung abzuschließen.</span></p>52
</div>53
54
<div data-editorblocktype="Text"><p>* Pflichtfelder</p> </div>55
56
<div data-editorblocktype="Field-text" style="text-align: center;">57
<div class="marketing-field" style="text-align: center;">58
<div class="lp-form-field" data-required-field="false" style="text-align: left;"><label class="lp-ellipsis" for="3f746946-34b4-442c-a677-e232cdd2bc40" title="">Vorname</label>59
<input class="lp-form-fieldInput form-control form-text lp-form-fieldInput" data-requirederrormessage="Pflichtfeld! Bei Bedarf ein Pseudonym verwenden" id="3f746946-34b4-442c-a677-e232cdd2bc40" name="3f746946-34b4-442c-a677-e232cdd2bc40" placeholder="Vorname" style="width:100%" title="" type="text" value="Vorname" autocomplete="given-name">60
</div>61
</div>62
</div>63
<div data-editorblocktype="Field-text">64
<div class="marketing-field">65
<div class="lp-form-field" data-required-field="false"><label class="lp-ellipsis" for="e1dfc514-f301-4cb2-855a-4c8fa8331207" title="">Nachname</label>66
<input class="lp-form-fieldInput form-control form-text lp-form-fieldInput" data-requirederrormessage="Pflichtfeld! Bei Bedarf ein Pseudonym verwenden." id="e1dfc514-f301-4cb2-855a-4c8fa8331207" name="e1dfc514-f301-4cb2-855a-4c8fa8331207" placeholder="Nachname" style="width:100%" title="" type="text" value="Nachname " autocomplete="family-name">67
</div>68
</div>69
</div>70
<div data-editorblocktype="Field-email">71
<div class="marketing-field">72
<div class="lp-form-field" data-required-field="true"><label class="lp-ellipsis" for="7f685ebb-7c54-4cff-a1bc-772562d25c38" title="">E-Mail-Adresse</label><span class="lp-required">*</span>73
<input class="lp-form-fieldInput form-control form-text lp-form-fieldInput" id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" placeholder="E-Mail-Adresse" required="required" style="width:100%" title="" type="email" autocomplete="email">74
</div>75
</div>76
</div>77
</div>78
79
<div style="clear:both;"></div>80
</div>81
</div>82
<div data-section="true" class="">83
<div style="84
display: flex;85
width: 100%;86
;flex-wrap: wrap;">87
88
<div style="clear:both;"></div>89
<div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 70px; min-width: 20px; width: calc(100% - 0px); padding: 10px; float: left; word-wrap: break-word; word-break: break-word; flex-direction: column;">90
<div data-editorblocktype="Field-dropdown" style="display: none;">91
<div class="marketing-field">92
<div class="lp-form-field" data-required-field="true"><label class="lp-ellipsis" for="f7796368-6e5b-e911-a96e-000d3ab496ce" title="">Datenquelle</label><span class="lp-required">*</span>93
94
<select class="lp-form-fieldInput" id="f7796368-6e5b-e911-a96e-000d3ab496ce" name="f7796368-6e5b-e911-a96e-000d3ab496ce" required="required" title="">95
<option value="120000002">E-Mail (nachverfolgen)</option>96
<option value="120000001">Aktion</option>97
<option selected="selected" value="120000003">Newsletter / Mailing</option>98
<option value="181510000">Projekt-Workshop</option>99
<option value="181510001">Registrierung auf Webportal</option>100
<option value="120000000">Veranstaltung</option>101
<option value="100000000">Visitenkarte erhalten </option>102
</select>103
</div>104
</div>105
</div>106
<div data-editorblocktype="SubscriptionListBlock">107
<div class="marketing-subscription-list"><input class="lp-form-fieldInput" id="e6648b6d-0894-e911-a971-000d3ab496c3" name="e6648b6d-0894-e911-a971-000d3ab496c3" required="required" type="checkbox"> <label for="e6648b6d-0894-e911-a971-000d3ab496c3">Ich habe die <a href="https://www.test.de/datenschutz">Datenschutzerklärung</a> gelesen und akzeptiert.<span class="lp-required">*</span></label><br>108
109
</div>110
</div>111
<div class="btn." data-editorblocktype="SubmitButtonBlock">112
<p align="“center“"><button class=".btn .btn-primary lp-form-button lp-form-fieldInput" name="submit" type="submit">Anmeldung absenden</button></p>113
</div>114
</div>115
<div style="clear:both;"></div>116
</div>117
</div>118
</div>119
</form>120
</div>121
</div>Advertisement
Answer
As it has already been mentioned in the comments, you should use JavaScript to validate the form. Here is a runnable code snippet:
JavaScript
1
33
33
1
function formValidate() {2
var fname = document.getElementById("fname").value;3
var lname = document.getElementById("lname").value;4
var email = document.getElementById("email").value;5
var tc = document.getElementById("tc");6
if (fname.length === 0) {7
document.getElementById("errfname").style.display = "block";8
document.getElementById("errorbox").style.display = "block";9
} else {10
document.getElementById("errfname").style.display = "none";11
}12
if (lname.length === 0) {13
document.getElementById("errlname").style.display = "block";14
document.getElementById("errorbox").style.display = "block";15
} else {16
document.getElementById("errlname").style.display = "none";17
}18
if (email.length === 0) {19
document.getElementById("erremail").style.display = "block";20
document.getElementById("errorbox").style.display = "block";21
} else {22
document.getElementById("erremail").style.display = "none";23
}24
if (tc.checked === false) {25
document.getElementById("errtandc").style.display = "block";26
document.getElementById("errorbox").style.display = "block";27
} else {28
document.getElementById("errtandc").style.display = "none";29
}30
if (fname.length !== 0 && lname.length !== 0 && email.length !== 0 && tc.checked === true) {31
window.location.href = "https://stackoverflow.com";32
}33
}JavaScript
1
19
19
1
body {2
background-color: lightblue;3
}4
5
input[type=text],6
input[type=email] {7
width: 80%;8
font-size: 20px;9
float: right;10
}11
12
.errorbox {13
background-color: red;14
color: white;15
width: 98%;16
position: relative;17
padding: 1%;18
display: none;19
}JavaScript
1
30
30
1
<!DOCTYPE html>2
<html>3
4
<head>5
<title>Example form</title>6
</head>7
8
<body>9
<div class="errorbox" id="errorbox">10
<p id="errfname" style="display: none;">Please enter your first name!</p>11
<p id="errlname" style="display: none;">Please enter your last name!</p>12
<p id="erremail" style="display: none;">Please enter your Email address!</p>13
<p id="errtandc" style="display: none;">Please check the terms and conditions check box!</p>14
</div>15
<h1>Test newsletter!</h1>16
<p>This is a test newsletter</p>17
<p><span style="color: red;">* </span> Required fields</p><br>18
<span style="color: red;">*</span>First name:19
<input type="text" placeholder="First name" id="fname"><br><br>20
<span style="color: red;">*</span>Last name:21
<input type="text" placeholder="Last name" id="lname"><br><br>22
<span style="color: red;">*</span>Email-address:23
<input type="email" placeholder="Email address" id="email"><br><br><br>24
25
<input type="checkbox" name="checkbox" id="tc">I agree to the <a href="#">Terms and Conditions</a> of this website.<br>26
<button onclick="formValidate()">Submit</button>27
28
</body>29
30
</html>