Create and Publish Your First Form

Build a short contact form, add it to a page with the Elzo Form block, and confirm that a test submission is saved.

Free & PRO Last reviewed

This tutorial builds a short contact form, places it on a page with the Elzo Form block, and confirms that a test submission is saved. Everything in it is available in Elzo Forms Free.

Once this first form works end to end, adding more fields, steps or conditions is a matter of repeating the same steps.

Create the form

  1. In the WordPress admin, go to Forms → Add New Form.
  2. Enter a title, such as Contact form.

Visitors never see the title. It identifies the form in the admin: in the Forms list, in the Elzo Form block’s form list, and in the Submissions screen.

Everything else about the form is set in the Form Data box below the title, on its Fields, Settings, Texts, Automations and Modules tabs. A new form starts with one empty step on the Fields tab.

Add the fields

  1. Click Add Field. A list of field types opens.
  2. Choose Text. The new field is added at the end of the step and opened for editing.
  3. Enter Name as its Label and tick Required.
  4. Click Add Field again, choose Email, enter Email address as the label, and tick Required.
  5. Add a Textarea field labelled Message.

You can type in the field type list to filter it — mail finds Email — and choose with the arrow keys and Enter.

The form does not need a button field. The last step of every form gets a submit button automatically, labelled Submit; you can change its wording on the Texts tab.

Each field has more settings on its View, Logic and Admin tabs. This form needs none of them; they are described in Field Settings.

Publish the form

Click Publish.

Until it is published, a form is shown only to users who are allowed to edit it. Visitors see nothing where the form is placed, and you see it with a notice that it is not published — so a draft can look fine while you are logged in and still be missing for everyone else.

Add the form to a page

  1. Open the page in the block editor.
  2. Insert the Elzo Form block. Searching the inserter for form or Elzo finds it.
  3. Choose your form in Select a form. You can type to search the list.
  4. Save or update the page.

Once a form is selected, the editor shows a preview of it. The preview cannot be filled in or submitted; test the form on the page itself. To switch to another form later, use Select a form in the block’s Form panel in the editor sidebar.

The list contains every published form, plus unpublished forms you are allowed to edit, which are marked with their status — Contact form — Draft, for example. If there is no form to choose, the block offers Create a form, which opens a new form in another browser tab.

Set the width and alignment

By default the form fills the width of the content area. The block’s Layout panel in the sidebar changes that:

  • Maximum width — for example 600px, 40rem or 80%. A number without a unit is read as pixels. A value in any other format is ignored, and the panel says so.
  • Form alignment — places a narrower form on the left, in the center, or on the right. It only has an effect together with a maximum width.
  • Text alignment — aligns the text inside the form.

Classic Editor and widgets

Where the block editor is not available, use the form’s shortcode. Copy it from the Shortcode column of Forms → All Forms — it looks like this:

[elzo_form id="123"]

The shortcode accepts the same width and alignment options as the block; see Rendering Forms with Shortcodes and PHP.

Submit a test entry

  1. Open the page in a private browser window, or log out, so that you see it the way visitors do.
  2. Click Submit with the fields empty. Each required field should show This field is required.
  3. Fill in the fields and submit again.

After a successful submission the form shows Form submitted successfully and clears its fields. The message is set on the form’s Texts tab; the Settings tab decides whether the form is also hidden afterwards, and can send the visitor to another page instead.

While you are logged in, an Edit form link appears above the form. Visitors do not see it.

Check the submission

Go to Forms → Submissions and open the test entry. The Submission Data box shows the submitted values, and Submitter Info shows who sent them and from which page.

Elzo Forms does not email you about new submissions until you turn it on. To be notified, open the form’s Settings tab, enable Email notifications, enter the Email notification recipients, and update the form. See Email Notifications.

Troubleshooting

The form does not appear on the page

Check: that the form is published. A draft is shown only to users who can edit it. If the site caches pages, clear the cache after publishing.

In the editor, a block reporting that the selected form is unavailable points at a form that was deleted or that you are no longer allowed to view. Choose another form, or click Clear selection.

The form appears but nothing happens on submit

Check: the browser console for JavaScript errors, and any caching, minification or script-deferral plugin. The form needs the Elzo Forms script to validate and submit.

The shortcode shows “Form not found” or “Invalid form ID”

Check: the id in the shortcode. It must be the ID of an existing form; copy the shortcode from the Forms list rather than typing it.

No email arrives

Check: first that the entry is in Forms → Submissions. If it is, the form works. Then check that Email notifications is enabled for the form, and finally the site’s email delivery — many hosts need an SMTP plugin before WordPress can send mail reliably.

Next steps

 
Contact us