Lean Design Blog

Blocks Edit update: editable form fields

Drag and drop fields to build out a form that matches your brand and submits to any form processor.

An example of a website contact form being edited in the visual editor.

Setting up a custom form on your site has just gotten easier with our latest update. You can now build out your forms from custom-designed fields that match your website branding. And easily set properties for your fields to submit to any form processor.

Component-based form building

Form fields work the same as other components in Blocks Edit. They are part of the left sidebar, ready to drag and drop into your page. Each form field has all the functionality needed to make a form work.

Clicking on a form field after dragging it in brings up options the same way as editing text or an image. These options include naming your fields for processing your form, and setting which fields should be required for validation. With additional customizable options based on the field type.

Designing form fields

Designing your form fields for use requires coding the HTML for your fields, with editable options that are completely flexible to your design requirements. The editable tags work around your code and allow for setting limits to the properties you want to enable for customization.

You can use either the visual theme editor to enable editable options, or view the help docs for the CSS classes to use for the tagging elements in your code. You can also refer to our Starter page components theme which features example form fields that are Blocks Edit enabled.

Form and form fields functionality is now available, ready to enable for your designs. Not signed up for Blocks Edit yet? Sign up to start using it free.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building websites and emails for over 15 years