> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0.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-ip-address-10-4-0/pXU8HEFUKu03lyrP/images/guides/image-92.gif?s=9dc18c66f157413aef65fb729d1ff84d" 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-ip-address-10-4-0/pXU8HEFUKu03lyrP/images/guides/image-93.gif?s=b15747c0ad1f7ceb83dce35b4a654129" 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-ip-address-10-4-0/pXU8HEFUKu03lyrP/images/guides/image-94.gif?s=f6b6bb91f75b54e1894840b3cbdf8379" 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-ip-address-10-4-0/pXU8HEFUKu03lyrP/images/guides/image-95.gif?s=141ca359b0c987f2ace8cc6f6b5607bb" 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-ip-address-10-4-0/pXU8HEFUKu03lyrP/images/guides/image-96.gif?s=ef9bec67b327fb885a40355b156f9c80" alt="Reorder picture choices" style={{ width:"68%" }} width="800" height="438" data-path="images/guides/image-96.gif" />

<SupportBanner />