Customize your form

3. Customize your form

Go to SP COD Order Form & Upsell > Form Builder and open the Form tab.

The settings are grouped into six sections, in the order you’d usually set them up. Click a section to open it. When a section is closed, it shows a short summary of its current settings.

The live preview on the right updates as you make changes. Switch between Desktop and Mobile to check both.

3.1. Display mode

Choose how shoppers open the form.

Form type

  • Pop-up: the form opens in a window when shoppers click the COD button.
  • Embedded: the form is shown on the product page. On the cart page, the form always opens as a pop-up.

Sticky bar

Keep a COD button on screen while shoppers scroll the product page. You can set:

  • Show on: Phones or All devices
  • Position: Bottom or Top
  • Appears: On scroll or Always

With Pop-up, the sticky button opens the form. With Embedded, it scrolls to the form.

Pop-up window

  • Show a close (×) button
  • Open full screen on phones

3.2. Buy button

Style the COD button that shoppers click.

  • Content: Label, Supporting text, Icon, and Attention effect
  • Colors: pick one of 10 quick styles, or set Fill, Text, and Border colors yourself
  • Shape & text: Corner radius, Border width, Text size (S to XL), bold or italic, and Shadow (None, Soft, Medium, Strong)

When you open this section, the preview shows the button instead of the form.

The attention effect turns off automatically for shoppers who have reduced motion turned on in their device settings.

3.3. Fields & address

Delivery countries

Choose the countries you deliver to. The app shows what it sets up for those countries, such as the phone code, the list of provinces or states, the postal code label, and whether the form shows a country picker.

Form fields

Each field shows its name, type, and whether it’s Required or Optional. You can:

  • Drag a field to change its order
  • Use the switch to show or hide a field
  • Click ⋯ to Edit, Move up, Move down, or Delete a field
  • Click a field name to change its label, placeholder, and whether Buyers must fill this in

The Phone field and the Submit button can’t be hidden or deleted.

Add field

Click Add field to:

  • Turn back on a standard field you hid: Email, Order note, or Discount code
  • Add a custom field: Short text, Dropdown, Checkbox, Date, or Info text

3.4. Appearance

Theme

Pick a starting style for the form and its fields: Light, Soft, Outlined, or Dark.

Form panel

Background, Text, Border, Corner radius, Border width, Text size, bold or italic, and Shadow.

Input fields

Background, Text, Border, Icon, Icon background, Corner radius, Show icons inside fields, Show labels above fields, and Label alignment.

If you change any color or corner setting yourself, the theme switches to Custom.

3.5. Text & messages

All the text in your form is in one place, so it’s easy to edit or translate.

Form text

  • Form title
  • Submit button: you can insert {total}, {quantity}, or {product} to show the order total, quantity, or product name on the button

Messages

  • Required field left empty
  • Value not valid
  • Buy button when sold out

3.6. Advanced

  • Right-to-left layout: for languages such as Arabic or Hebrew
  • Allow browser autofill: lets shoppers fill in saved details from their browser

3.7. Save your changes

When you change a setting, a bar appears at the top of the page with Unsaved changes. Click Save to apply your changes to your store, or Discard to undo them. You’ll see Settings saved when it’s done.