Tutorial: Add a Formstack Form to Your Weebly Website

Written by Abby Nieten on October 30, 2014

Posted in Form Hacks

We’ve been getting a lot of questions lately about how to use Formstack forms on site builders like Weebly. It’s easy to build professional, polished forms into your Weebly website with Formstack. Whether you’d like to add a simple contact form or a complex survey, you can make any form appear on your webpages. Currently using Weebly forms as your solution? Check out our comparison to see if Formstack forms are a better fit for your scaling business.

All it takes is a little embed code. Don’t worry—it’s not as scary as it sounds, even if this is your first time looking at any sort of code.

They say experience is the best teacher, so let’s dive in! We’ll walk you through embedding one of Formstack’s pre-built order forms into a Weebly webpage.

First, you’ll need to create your form in Formstack using the easy drag-and-drop builder. (New to Formstack? Get form building tutorials here and here.) Next, select the Embed Form tab under Publish to get your Formstack embed code. You’ll need the first section, labeled “JavaScript Embed Script.”

Formstack-Embed

Super easy so far, right? Now keep this page open as you go to the Weebly Editor. Open the Weebly webpage where you’d like to add your form. Then, drag and drop the Embed Code element.

Weebly-Embed

Click inside the box where it says “Click to set custom HTML” to open the editor. Then select “Edit Custom HTML.”

Weebly-HTML

Here’s where that Javascript comes in. Go back to Formstack, where you’ve kept that handy Embed Form tab open. Copy everything under the first box labeled “JavaScript Embed Script.”

Formstack-Embed-Code

Paste your copied code into the Weebly HTML box.

Paste-to-Weebly

And voila! A beautiful form appears right within the webpage itself.

Formstack-Weebly

Want to know the great thing about using the embed code? Every time you make a change in the Formstack builder, the form automatically updates on your Weebly website. You can add conditional logic, customize the button or add some style. It will all be reflected on your website. Additionally, Formstack forms adjust to the mobile settings on Weebly, so your form will be just as accessible as your website on mobile devices.

Do you have any questions or feedback about this tutorial? Let us know in the comments below!