Adding form elements to a page

Form elements are used when creating a form. These can include text inputs, checkboxes, lists and more.

Typical examples include contact form or search box.

image

There are a few ways to create form elements with Web Export.

  • Use the tag name property to convert existing elements to form elements
  • Use the markup inside property to add form element code to the page
  • Link to an external stylesheet using a combination of the above two methods

In the future there may be more support for creating form elements.

Method 1 - Enter the name in the Tag Name property and then set the attributes

input_type

Method 2 - Enter form items in the Markup Inside property

TextInput:
markupinside-input

Button:
markup_inside
markup-inside-01

Next place these items inside of a group and set the tag name of the group to a form element or use the markup before and after to add a tag name:

image
Next define any additional styles that might be necessary. You may create a style rule for form elements so they fill the container they are in.

page_styles

Example project is here (requires XD 20.2.12.1).