> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Reorder with drag and drop on Fillout

> Easily reorder form pages and field options for multiple choice, dropdown, checkboxes & picture choice questions with drag and drop.

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

## How to reorder pages

Simply drag pages in the bottom toolbar and position them in the order you would like the form pages to be shown.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5/Lq83nNnBnAASvXt8/images/guides/image-92.gif?s=5760ba0961f097b090408c179c43125e" alt="Reorder pages using drag and drop" style={{ width:"69%" }} width="800" height="54" data-path="images/guides/image-92.gif" />

<Warning>
  You cannot put any page before a cover page and after an ending page. Reordering is also disabled if you have added [branching](/page-logic) logic to your form.
</Warning>

## How to reorder questions or field options

This can be applied to **Multiple choice**, **Dropdown**, **Checkboxes**, and **Picture choice** field types.

**Multiple choice**

Drag the options in the center of the screen to reorder choices.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5/Lq83nNnBnAASvXt8/images/guides/image-93.gif?s=241a96402d2820bb8c26637eb6b13d12" alt="uides" style={{ width:"64%" }} width="800" height="331" data-path="images/guides/image-93.gif" />

**Dropdown and multi-select**

Click the field's <Icon icon="gear" iconType="solid" /> to open the right-hand panel. Drag options there to reorder them.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5/Lq83nNnBnAASvXt8/images/guides/image-94.gif?s=7d9ddf774561ce899077caf6c4246a1c" alt="Reorder dropdown options" width="800" height="183" data-path="images/guides/image-94.gif" />

**Checkboxes**

Hover towards the right side of the checkbox option you want to reorder then drag <Icon icon="grip-dots-vertical" iconType="solid" /> to where you want the option to be placed.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5/Lq83nNnBnAASvXt8/images/guides/image-95.gif?s=3c3ffadfc76330a488c6fe68ae714a00" alt="Reorder checkboxes" style={{ width:"66%" }} width="800" height="414" data-path="images/guides/image-95.gif" />

**Picture choices**

Simply drag the picture of choice you want to move and drop where you want it to be placed.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5/Lq83nNnBnAASvXt8/images/guides/image-96.gif?s=c6c64b2076facb4d6a2589466232712e" alt="Reorder picture choices" style={{ width:"68%" }} width="800" height="438" data-path="images/guides/image-96.gif" />

<SupportBanner />