SQSP Themes

View Original

Is JotForm Compatible With Squarespace?

Yes, JotForm is compatible with Squarespace, and integrating the two platforms can be a seamless process. Whether you’re looking to add a contact form, a survey, an order form, or any other type of form to your Squarespace site, JotForm provides the tools you need to make the integration successful. Here is a step-by-step guide on how to do it:

Step-by-Step Integration Process:

  1. Create Your Form on JotForm:
  2. Sign in to your JotForm account (or create one if you don’t have an account yet).
  3. Click on the “Create Form” button to design your form. JotForm offers various templates and customization options to tailor the form to your specific needs.
  4. Once your form is ready, click on the “Publish” button to get the embed code. JotForm offers different embedding options like iFrame, Script, or the classic JotForm embed.

  5. Copy the Embed Code:

  6. After publishing your form, navigate to the “Embed” tab.
  7. Choose the appropriate embedding option (usually, the classic JotForm embed or the iFrame embed works well with Squarespace).
  8. Click on “Copy Code” to copy the embed code to your clipboard.

  9. Log in to Your Squarespace Account:

  10. Access your Squarespace website by logging in to your Squarespace account.
  11. Navigate to the page where you want to embed your JotForm form.

  12. Add the Form to Your Squarespace Page:

  13. In the Squarespace editor, choose the section where you want to add your form.
  14. Click on the “+” icon to add a new block.
  15. Select the “Code” block from the options menu. This block allows you to add custom HTML, CSS, and JavaScript to your Squarespace page.
  16. Paste the embed code you copied from JotForm into the Code Block.
  17. Click “Apply” or “Save” to confirm the changes.

  18. Adjust Form Styling (Optional):

  19. Depending on your form’s design and how it fits within your Squarespace site’s styling, you might need to make some adjustments.
  20. Both JotForm and Squarespace allow custom CSS. You can add custom CSS through the Squarespace editor to fine-tune the appearance of your embedded form.

  21. Test the Integration:

  22. Ensure that the form is properly displayed on your Squarespace site.
  23. Test the form by filling it out and submitting it to verify that all fields and functionalities work as expected.
  24. Make sure to check the form on different devices (desktop, tablet, mobile) to ensure it’s responsive and works well across various screen sizes.

Considerations and Limitations:

  • Form Customization: While JotForm offers extensive customization options, be aware that embedding complex forms with heavy scripts might sometimes slow down your page load times. Monitor the performance and make adjustments if necessary.

  • Styling Consistency: Ensure that the form design harmonizes with your website’s overall look and feel. Sometimes, the embedded form might require additional styling adjustments using custom CSS to match your brand’s aesthetics.

  • Content Readability: Use appropriate padding and margins to ensure the form fits well within your Squarespace page layout without truncating any content.

  • Mobile Responsiveness: Both JotForm and Squarespace generally support mobile responsiveness, but test your form on various devices to ensure usability and readability.

By following these steps, you can integrate JotForm forms seamlessly into your Squarespace website, enhancing its functionality and user engagement.