Formstack is a powerful online form builder that allows users to create forms, surveys, and workflows without needing any coding knowledge. Whether you’re collecting contact information, processing payments, or conducting surveys, embedding a Formstack form on your website can help streamline the process. In this guide, we’ll walk you through the steps on how to embed a Formstack form on your website in detail.
Sign up for a free Formstack trial today to follow along with this tutorial.
Why Embed a Formstack Form on Your Website?
Embedding a Formstack form on your website offers a variety of benefits, including:
Customizable forms: Formstack allows you to create forms that match your brand’s aesthetic.
Easy to integrate: Formstack provides various embed options that make it easy to place forms directly on your website.
Data management: Responses are automatically collected and stored in your Formstack account, making data retrieval easy.
Analytics: Track form submissions and user behavior to optimize the experience.
Now let’s dive into the specific steps to embed your Formstack form on your website.
Step 1: Create a Formstack Account (If You Haven’t Already)
Before you can embed a form, you need a Formstack account. If you don’t have one already, follow these steps:
Sign up: Use this link to register for a free trial.
Login: Once your account is created, log in using your credentials.
Step 2: Create Your Form
Once you’re logged into your Formstack account, you’ll need to create the form you wish to embed. Here's how:
Create New Form: Click on “Forms" in the top menu and then "Create Form" in the top-right corner.
Choose a Form Type: Form or Survey
Give your Form a name, customize the URL if needed, and choose to use a template or start with a blank form. Formstack offers a variety of templates for different purposes, such as contact forms, feedback surveys, and registration forms. Alternatively, you can start with a blank form and customize it from scratch.
Design Your Form: Use the drag-and-drop builder to add fields such as text boxes, checkboxes, radio buttons, and more. Customize the form’s layout, colors, and design to match your website’s branding.
Set Form Preferences: Use the Settings menau to access options to configure other settings, such as email notifications, form behavior (e.g., redirecting users to a thank-you page after submission), and integrations (e.g., connecting to email marketing tools or CRMs).
Step 3: Get the Embed Code for Your Form
Formstack offers several ways to embed your form on your website. To get the embed code:
Navigate to the "Share" menu option:
Select the Embed Option: In the share section, Formstack will offer several embedding options such as:
JavaScript: Copy and paste the JavaScript code wherever you would like the form to appear.
iFrame: Copy and paste the code into an HTML page wherever you would like the form to appear. You can change the iFrame width and height if needed.
Lightbox: Copy and paste the code for the form to appear as a lightbox modal.
Step 4: Embed the Form on Your Website
Now that you have the embed code, it’s time to add the form to your website. The method you use depends on the platform your site is built on.
For WordPress:
If your website is built using WordPress, embedding a Formstack form is straightforward:
Open the Page/Post Editor: Go to the WordPress dashboard and navigate to the page or post where you want to embed the form.
Switch to the HTML View: In the page/post editor, switch to the HTML view (also called "Text" view) rather than the Visual editor.
Paste the Embed Code: Paste the Formstack embed code you copied earlier where you want the form to appear.
Update or Publish: Once the code is pasted, save your changes by clicking the Update or Publish button.
For Other Website Builders (Wix, Squarespace, etc.):
The process will vary slightly depending on the platform, but the general steps are as follows:
Access the Editor: Log in to your website builder (e.g., Wix, Squarespace, Weebly) and navigate to the page where you want to place the form.
Use an HTML Block or Embed Code Widget: Most website builders offer an option to add an HTML block or embed widget. This is where you’ll paste the Formstack code.
Paste the Embed Code: Paste the Formstack embed code into the HTML block or widget.
Save and Publish: After embedding the code, save your changes and publish the page.
For Static HTML Websites:
If you’re working with a static HTML website, follow these steps:
Open Your HTML File: Use a text editor (e.g., Notepad, Sublime Text) to open the HTML file where you want to place the form.
Paste the Embed Code: Find the appropriate spot in your HTML file and paste the Formstack embed code.
Save and Upload: Save the file and upload it to your web server, replacing the old file.
Step 5: Test the Form
Once you’ve embedded the form, visit the page on your website to ensure everything looks and functions correctly. Test the form by submitting a test entry to ensure that submissions are being recorded in your Formstack account.
Check for responsiveness: Ensure the form looks good on all screen sizes, including mobile devices. Formstack forms are responsive by default, but it's always a good idea to verify.
Check functionality: Make sure the form fields are working, and any integrations (such as email notifications) are functioning as expected.
Conclusion
Embedding a Formstack form on your website is a simple and efficient process. With just a few steps, you can integrate powerful, customizable forms that enhance user experience and streamline data collection. Whether you’re using WordPress, another website builder, or a static HTML site, Formstack makes it easy to integrate forms that fit seamlessly with your website’s design and functionality.
By following these detailed steps, you can start collecting valuable data from your website visitors in no time!
Sign up for a free Formstack trial today!
Click here is more detail on how to embed your form
Comments