Ghost Plugins

View Original

Wryte Contact Form (Preview Guide)

Ghost

⚠️ 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

See this content in the original post

Step 2. Add this code to Footer Code Injection

See this content in the original post

Step 3. Add this code to Custom CSS

See this content in the original post

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.

See this content in the original post

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.