Making a Modern Form

By Erick Engelke
July 24, 2025

Recently a friend challenged me to replicate a modern data entry form with EWB. The resulting form looks like this:

I’ve attached the sample project.

Data Fields

To make the enhanced data entry fields, first add a TBasicPanel, enable all borders top, bottom, left and right visible flags, then set the corners to 16 pixels.

Add a TImage of 64 pixels wide and high, and reference PNG files in the URL property, they will be loaded at run time.

Then add a TEdit or TLabel to the box. Set it’s height to fill the box and look good.

Add Placeholder Text for Each Element

The following code adds placeholder text:

procedure TForm1.Form1Show(Sender: TObject);
begin
   AddPlaceHolder( edit1,'First name');
   AddPlaceHolder( edit2,'Last name');
   AddPlaceHolder( edit3,'Company');

end;

Technically Adding Placeholder Text

You need this cracker class to add the PlaceHolder to the DOM element.

// cracker class, opens up TEdit to our mods
type
  TEdit2 = class( TEdit )
  public
  end;


procedure AddPlaceholder( edit : TEdit ; msg : string );
var
  ed2 : TEdit2;
  ie : TInputElement;
  de : TDOMElement;
begin
  ie := TEdit2(edit).InputElement;
  de := ie.DOMElement;
  de.setAttribute('placeholder', msg) ;
end;

And that’s about it.

Warning

The browser built into EWB’s IDE is the crappy Internet Explorer, and it doesn’t handle placeholder text correctly, but it works in all real browsers.

Here’s the source code