How do I add a checkmark on my form fields?

Question

I'll start with a confession; I'm very new with HTML and CSS. Nonetheless, I haven gotten the task from work to customise and optimise the Microsoft Dynamics forms with HTML and CSS.

The request is to add checkmarks to the field that are filled in and a submit button that has a fade effect. However, everything I do, the checkmark is all over the place.

`*/ CS`your text`S styling */ 
.input-container {
      position: relative;
    }
    
    .checkmark {
      position: absolute;
      top: 0%;
      right: 0px;
      transform: translateY(-50%);
    }`
------------------
/* HTML */

`<div style="clear:both;"></div>
</div></div>
<div data-section="true" class="">
    <div style="display: flex; width: 100%; flex-wrap: wrap;">
        <div style="clear:both;"></div>
        <div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 0px; min-width: 0px; width: calc(100% - 0px); box-sizing: border-box; padding: 10px; float: left; word-wrap: break-word; word-break: break-word; word-wrap: break-word; word-break: break-word;">

            <div data-editorblocktype="Field-email" style="padding-top: 0px;">
                <div class="marketing-field">
                    <div class="lp-form-field" data-required-field="true">
                        <input aria-required="true" class="lp-form-fieldInput" data-requirederrormessage="Vul een geldig emailadres in a.u.b." id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" pattern="[^@\s\\&quot;<>)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;<>)(\[\]:;,.]+)+?|)@([^@\s\\&quot;<>)(\[\]\+:;,\.-]+(((\.|\+|-|--)[^@\s\\&quot;<>)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;<>)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;" title="Please enter a valid email address like example@email.com" type="email">
                        <span class="checkmark">&#10004;</span>
                    </div>
                </div>
            </div>`

What would you suggest?

Cheers!

By adding this CSS-styling

`.input-container { position: relative; }

.checkmark {
  position: absolute;
  top: 0%;
  right: 0px;
  transform: translateY(-50%);
}`

I thought that the checkmark would be in the e-mail field. But this is the result:

lost Checkmark.

where do you add the '.input-container' class? it is not seen on sample html — Prosenjit Chongder, Jul 13 '23 at 11:07

Eolo · Accepted Answer · 2023-07-13T13:25:03.957

your attempt was almost right, the position: absolute refers to the nearest parent that has a position set to relative, in your code you are setting the relative position to the correct parent but in the html the icon is outside of it. Also, using top: 50% for the checkmark is centered.

.lp-form-field {
  position: relative;
}
.lp-form-fieldInput{
  width: 100%;
}

.lp-form-fieldInput:valid{
  background-color: green;
}

.checkmark {
  visibility: hidden;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}

.lp-form-fieldInput:valid + .checkmark{
  visibility: visible !important; 
}

<div style="clear:both;"></div>
</div></div>
<div data-section="true" class="">
    <div style="display: flex; width: 100%; flex-wrap: wrap;">
        <div style="clear:both;"></div>
        <div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 0px; min-width: 0px; width: calc(100% - 0px); box-sizing: border-box; padding: 10px; float: left; word-wrap: break-word; word-break: break-word; word-wrap: break-word; word-break: break-word;">
            <div data-editorblocktype="Field-email" style="padding-top: 0px;">
                <div class="marketing-field">
                    <div class="lp-form-field" data-required-field="true">
                        <input aria-required="true" class="lp-form-fieldInput" data-requirederrormessage="Vul een geldig emailadres in a.u.b." id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" pattern="[^@\s\\&quot;<>)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;<>)(\[\]:;,.]+)+?|)@([^@\s\\&quot;<>)(\[\]\+:;,\.-]+(((\.|\+|-|--)[^@\s\\&quot;<>)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;<>)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;" title="Please enter a valid email address like example@email.com" type="email">
                      <span class="checkmark">&#10004;</span> 
                    </div>
                   <div class="lp-form-field" data-required-field="true">
                        <input aria-required="true" class="lp-form-fieldInput" data-requirederrormessage="Vul een geldig emailadres in a.u.b." id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" pattern="[^@\s\\&quot;<>)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;<>)(\[\]:;,.]+)+?|)@([^@\s\\&quot;<>)(\[\]\+:;,\.-]+(((\.|\+|-|--)[^@\s\\&quot;<>)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;<>)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;" title="Please enter a valid email address like example@email.com" type="email" value="example@gmail.com">
                      <span class="checkmark">&#10004;</span> 
                    </div>
                </div>
            </div>

Hi Eolo, Thanks for the quick reply and I got a step closer to my goal! However, with this code, I have the checkmark standard in the field. Whereas my goal is, that it appears when a field is filled. — RLV2525, Jul 13 '23 at 13:00
Hi, I updated the snippet, now it should be what you are looking for! — Eolo, Jul 13 '23 at 13:25
I think I made some errors in the CSS-styling because now the submit button and the first- & middle-name field turned green. Long live coding, he? — RLV2525, Jul 13 '23 at 14:15
you can just remove the class .lp-form-fieldInput:valid from the css. If everything else works could you mark my response as valid? — Eolo, Jul 13 '23 at 14:20
Mmmhh...Now I got two email fields instead. Thanks for your feedback, but I'm going to experiment a bit further — RLV2525, Jul 13 '23 at 15:02
In my code there were two fields, one empty one with an example email to show the checkmark working, be carefull mabye you copied both of the fields. — Eolo, Jul 13 '23 at 15:05

How do I add a checkmark on my form fields?

1 Answers1