Forms

Images and video inside a form

Some questions cannot be asked in words. Which of these three finishes do you want, does this match the damage you are reporting, did you watch the briefing. Image and video blocks put the thing itself on the page.

Create a form with OneCraftImage and video blocks, the ten border styles, and the playback options
The component panel showing a media section with image and video blocks, above a separate advanced section holding photo upload and file upload
Image and video sit in their own media section. Photo upload and file upload are elsewhere, because those collect a file rather than show one.

Two blocks, not two fields

The image and video blocks are things you show, not things you collect. They sit in the form like a heading does. If you want the respondent to give you a picture, that is the photo or file upload field instead, and the two are easy to mix up when you are building quickly.

Video playback options

Four toggles: autoplay, loop, muted and show controls. The combination that works for a form is muted autoplay with controls visible: it starts without a click, it does not surprise anyone with sound, and someone who wants to hear it can unmute. Autoplay with sound on is the one combination to avoid, because most browsers block it anyway and the ones that do not will annoy people.

Border styles

There are ten border treatments, from none through simple, elegant, bold, soft, floating, frame, polaroid, accent and modern. On a form the useful ones are none and simple, because the picture is evidence rather than decoration. Polaroid and frame belong on a form that is deliberately playful, like an event RSVP.

Weight matters

Every image and video is loaded before someone can answer. A form that opens with a large hero video will lose people on a phone connection before the first question. Keep the media to what the question needs, and put anything long after the first few fields rather than before them.

How it works, in three steps

  1. Step 1

    Add the block where the question needs it

    Directly above the question it supports, so the two read as one thing.

  2. Step 2

    Set video playback

    Muted, autoplay on, controls visible is the safe combination for a form.

  3. Step 3

    Pick a border

    None or simple for evidence, one of the decorative ones only if the form is meant to feel informal.

The full walkthrough with screenshots is in the guide Every form field and when to use it.

Limits worth knowing

See it on a finished piece

Questions people ask

Can I put a YouTube video in a form?

The video block plays a video you add to the form. For an externally hosted video, link to it from a paragraph block instead.

Will a video autoplay on a phone?

Only if it is muted. Every current browser blocks autoplay with sound, so set muted on and leave the controls visible.

Is there a size limit on an image in a form?

The practical limit is patience rather than a hard cap. Anything that takes more than a second or two to appear is costing you responses.

Make your own form

The button opens the generator with this use case already described. Change the wording to match yours, generate, then edit anything you like.

Create a form with OneCraft

Related pages

More finished work of this kind is on the form examples hub.