How to embed forms on your blog

Post on 14-Apr-2017

356 views 1 download

Transcript of How to embed forms on your blog

EMBED HOW TO

ON YOUR BLOG

FORMS

Forms are exceptionally effective at engaging users. We’re going to show you how to incorporate them into your content strategy!

YOU WILL NEED

1. A form embed code A block of code used to implant a form on a page

2. A blogging platform Squarespace, Wix, or Wordpress. (Others will not be included in this tutorial).

FORM EMBED CODE

Em·bed code \- ımˈbed kəʋd \ noun

Looks a little something like this:

You do not need to know what the code means, all you need to know is how to copy and paste

WHERE TO FIND IT

After you create the form look for…

Embed Embed Code Embed in a Web Page These brackets </>

Many form builders like Blitzen, Survey Monkey, Typeform, and Google Forms supply you with an embed code after you create the form.

COPY THE WHOLE CODE Alternatively you can use this code as an example:

<script src="https://blitzen.com/scripts/blitzenForm.js" type="text/javascript"></script> <iframe src="https://ol.blitzen.com/form/Was-this-content-helpful-qs-" id="14c2f3ce224e2a60781267ed78763b"onload="resizeCrossDomainIframe('14c2f3ce224e2a60781267ed78763b', 'https://ol.blitzen.com');" width="100%" style="border: none;"resize="true"></iframe>

ACCESS YOUR BLOG

Squarespace

Wix

Wordpress

The following slides will go over how to embed forms in each of these blogs. Feel free to skip to the blog that you are using.

SQUARESPACE

Difficulty level: Super simple

Create a new blog post or use an existing one

Hover beneath your content to add a content block. Click on the raindrop shape on the left when it appears.

Click the ‘Embed’ option

Click on the source code button

Paste your embed code in the box. And click ‘Set’

And there you have it!

WIX

Difficulty level: Even simpler than Squarespace

Create a new blog post or use an existing one

Click on the ‘</> html’ button in the top bar

Paste your embed code into the text-box and click ‘Update’

And there it is!

Difficulty level: Not too bad

WORDPRESS

BUT! There are some limitations…

Wordpress makes it more difficult to use anything other than their form-builder JotForm.

JotForm is great for simple things like contact us forms but has limited functionality for more advanced lead generation activities like exit-intent forms.

HOW TO EMBED ALL OTHER FORMS

1. Try this first! Open the blog and paste your code in the ‘text-editor’

If this doesn’t work for you it’s because some themes are not compatible with this method.

If this is the case, you will have add a widget or download a plugin to embed any type of code.

EMBEDDING FORMS WITH WIDGETS

Difficulty level: Easy

Login to Wordpress Admin and navigate to the Appearance tab, where you will find Widgets

Scroll through your list of available widgets to find ‘Text’ and add it to your location of choice

Copy and paste the embed code into the text-area and press ‘Save’

THE DOWNSIDE: This widget will appear on every single page of your blog

If you want to embed unique forms right into your blog content you will need to download a plugin

Because most forms require javascript code (a type of language) that Wordpress does not allow you to embed without a plugin or widget.

WHY?

IF YOU ARE A FREE-TIERED USER

You will NOT be able to do this Because you cannot upload the necessary plugins. Hopefully, Wordpress will come up with a solution for this problem soon. Read more about it here. If you are hosting your own site (if you have wordpress.org domain) you will be able to do this.

(If you have a wordpress.com site)

EMBEDDING FORMS IN WORDPRESS.ORG

Difficulty level: Hard

Requires knowledge of plugins and some developing skills

HOW TO EMBED MAILCHIMP FORMS

Download this plugin https://connect.mailchimp.com/integrations/yikes-inc-easy-mailchimp-extender-for-wordpress Follow the installation instructions

HOW TO EMBED GOOGLE FORMS

Download this plugin https://wordpress.org/plugins/wpgform/ Follow the installation instructions

THANKS FOR FOLLOWING

ALONG! Tutorial provided by

https://blitzen.com/