How to create and launch embedded forms

Avatar

By Jitta Rao

updated 9 months ago

Spread your reach, build your list, and gain new subscribers by embedding your forms to virtually any page on the web. And with Gist, it's incredibly easy to embed any forms on your site.

In this article, you will learn exactly how to create an embedded form and then add it to your website.

1) Creating an embedded form

One of the new form types you can create in Gist are "Embedded Forms".

When creating a new form, from the list of form types, click over Embedded type. You'll be taken to the template gallery, filtered to only see embedded form.

Browse and preview the templates to find the one you like and once you've found that looks like a good starting point for your form, click the "Use Template" button on the template and name your new form.

2) Customizing your embedded form

Once you've created your form, you'll be taken to the form builder. 

Here you can quickly customize the form template. Edit the headlines, paragraph text, button text and the button's redirect settings.

Your embedded form can be content for your website as simple as a single button, form or headline, or as robust as a full fledged form that captures multiple fields and data with a background image.

To learn more about using the drag-and-drop builder,  head here →

3) Adjusting the embedded form width

Each embedded form template will come with a default form maximum width.

This can be adjusted by clicking to the "Settings" tab in the builder panel.

Here you'll be able to control the maximum width of your embedded form, as well as the direction it aligns when you place it on your site.

Pro tip: Use the 100% setting if you want your form to expand to the maximum width of the container on your site you plan to place it in.

4) Publish  your changes

For this step, we recommend having your site’s code (for whichever page you’re publishing your embedded form to) open while you work. NOTE: If you’re not sure how to access your site’s code, you may need to consult your website software’s support options, or whoever set up your site.

Next, click "Share" tab to get the embedded code need to display your form on your site.

Click the blue color Copy button on the the simple embed code. Paste the snippet in your webpage’s source code wherever you’d like your pop-up's trigger to appear.


Once you’ve pasted your code, we recommend updating your site and testing out your pop-up to make sure everything’s running smoothly!

If you're struggling to find where you embedded the form embed code on your site or blog, when working in the Google Chrome browser, you can right-click on a page, click View Page Source, then you can hold command+F on your keyboard to search for "gist-embed-form". All form code looks similar and contains the word "gist-embed-form"

Note that the form Embed code is unique to the individual embedded form and must be added everywhere you want that form to appear. If you wish to embed multiple forms across your site and you will need to add the unique embed code for each embedded form where you want that form to load. If you want to replace or remove a embed form you must manually edit the embed code present on your site.

Also, note that if you’re adding a embed form, the embedded form will appear on your page exactly where you place the embed code.

Ideas for embeds

Think embedded forms only belong in the footer? Think again! Consider adding an embedded form in the context of a blog article to capture subscribers while they’re reading your article or on the blog sidebar. You can also use embedded forms on a dedicated page on your site for a sweepstakes or event signup.

FAQs

Q: Can I manually add my campaign to the same page/post in multiple places?

A: Yes, it’s possible to display the same form in multiple different places of the same page/post.

Did this answer your question?