⚠️ Important Update: Squarespace Changes

Due to Squarespace making changes, this plugin is only compatible with the Classic Form Block. We recommend opting out of the “Localization Form Block” option in Settings > Circle Labs.

If you do not have access to the Circle Labs setting, submit a ticket and we can disable this for you.

Step 1. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  function lorem(ipsum, dolor = 1) {const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; 
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  function lorem(ipsum, dolor = 1) {const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; 
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }

    function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4. Customizable Options

These options are available in Custom CSS.

Form General Text

Form Font Size, Color, and Line Height
Form Font Weight
Form Font Family

Input Field Style

Input Field Width
Input Font Size and Color
Input Background Color
Input Text Alignment
Input Border Style and Radius
Input Padding
Input Font Family
Input Background Color, Padding, Border Style, and Radius (When Selected)

Input Placeholder Text

Placeholder Font Size and Color

Form Button

Button Font Size
Button Border Radius
Button Width

Other button styles can be changed in Squarespace settings like normal.

Step 5. Add Contact Form

Add a contact form block to any page and create a new “text” field option in the form. Follow the guide below on inputting the text and were it will display. Show me this

Label = The text shown BEFORE the input field
Placeholder = The text shown in the input field
Description - The text shown AFTER the input field

Note: Wryte is only compatible with the “text” form field option. So be sure not to use other field options such as text area, select, checkbox, radio, etc.

Important: Due to recent Squarespace changes, some forms are no longer offering a placeholder text option. This change does not affect the plugin but the placeholder option will be unavailable.

Step 6. Contact Form - HTML Box

Add this code to the form’s settings via Content > Post-Submit > HTML Box.

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  function lorem(ipsum, dolor = 1) { const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; 
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Plugin Notes

Only compatible with classic Form Blocks (not Localization Form Blocks).
Not compatible with lightbox setting.

Troubleshooting (Plugin Not Working)

Ensure the code has been added to the form’s HTML box.
Only use the “text” field option. Other fields like checkbox, select, etc are not compatible.
It is recommend only one form be used per page.

Wryte Contact Form