Form Block Fields Previous Next

Form Block Fields Previous Next

License

Synopsis

Divide the fields of a long Form block into sections and add navigation elements to move through sections.

Version

• 0.1.0

SS Versions

• 7.1

• 7.0

Dependencies

• Squarespace plan that supports JavaScript.

• Form Block Wrapper Observe Changes

• jQuery

v7.1 Fluid Engine Compatible

• Yes

---

Install

• Install Form Block Wrapper Observe Changes. After you install the code be sure to continue on with the rest of the steps.

• Add the following to Website > Pages > Custom Code > Code Injection > HEADER.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

• Options

  • Page Specific

    Use this option when you want only one Page to have this effect.

    • Add code from file form block fields previous next.html to Page Settings > Advanced > Page Header Code Injection for the Page. Refer to per-page code injection for details.

  • Site-wide

    Use this option when you want multiple Pages to have this effect.

    • Add code from file form block fields previous next.html to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection.

• Read the code for any instructions within.

• Add or edit a Form block on your Page and set up as desired.

• In the Form Block Wrapper Observe Changes code add twcFbfpn to added per the Form Block Wrapper Observe Changes code install steps.

• Add a Line block after the twc-fbwoc Line block and set the LABEL to twc-fbfpn.

• Wherever you want to create a section add a Line block and set the LABEL to twc-fbfpn.

  The Line field(s) you have added with the twcFbfpn LABEL will have the step and total steps added to each section.

  If you want your own label you can set the field like the following. twc-fbfpn : my label

  You can of course use the DESCRIPTION field and the Underline toggle.

• Add the four following Button blocks in the same section as the Form block.

  • LABEL : First

    • Link URL : #twc-fbfpn-first

  • LABEL : Previous

    • Link URL : #twc-fbfpn-previous

  • LABEL : Next

    • Link URL : #twc-fbfpn-next

  • LABEL : Last

    • Link URL : #twc-fbfpn-last

  For a Classic Editor section you can simply stack the blocks in rows. For a Fluid Engine section you will probably want to put the buttons behind the Form block so they won't leave empty space in your design.

Demo

You can see a demo of this effect here.

Make a Donation

Please consider making a donation.

Changes

• 2025-03-31

  • initial version