Embeding forms into WordPress sites

There are three ways of embeding the form you created with SalesAutopilot into your Wordpress website. These include two ways of embeding it as content, and another way of embeding it as a widget. This page will introduce you to these three methods.

Embeding forms in Wordpress content

By default, you cannot place Javascript codes and CSS definitions in the content part of Wordpress. Since the forms generated by SalesAutopilot contain such elements, this restriction has to be bypassed. There are two ways of doing this: either by using an extension, or by separating Javascript and CSS definitions (we recommend the latter to those who have a fundamental understanding of HTML and CSS).

A.) Embeding forms with the help of plug-ins (recommended)

First you need to download the Insert Html Snippet extension. Activate it, and then click on the HTML Snippets option of the XYZ HTML menu.

Click the “Add new HTML Snippet” button on the page that appears next.

Write a short title in the Tracking name field, which will refer to the form. Copy-paste the HTML source code of the form in the HTML code field (it doesn’t matter whether you use the iframe or HTML source code). Next, click on the Create button.

The list of your saved snippets will appear. Copy the text in the Snippet Short Code column.

Open the content where you would like to embed the form. Paste the previously copied short code in the appropriate section of the content. Save the changes you made to the content, and click on the preview button to display the form.

Another plug-in that works similarly is the Raw HTML Snippet.

B.) Embeding form without a plug-in (Web editing knowledge is required)

Before you could embed your SalesAutopilot form, you have to make a minor change to its source code. The form validation Javascript code in the source code of the form cannot be directly copied into the Wordpress content with the rest of the form. For this reason, you have to cut that from the source code of the form, and paste it in a separate file. The validation script code is the text between the<script type="text/javascript"> and the </script> tags.

This code has to be saved in a file that has a .js extension, and then uploaded to the server that runs Wordpress. Then you will have to replace the validation code in the source code of the form with a link to this file, the following way:
<script type="text/javascript" src="http://www.yourwebsite.com/form-validation.js">

The thus modified source code can be copied in the Wordpress content (only in HTML view).

If you are inserting a form in the content, you should not change to Visual view, because then Wordpress would remove the formatting and the elements of the form.

C.) Embeding form in Wordpress widget

You have a much easier task if you would like to use the form in a widget. Wordpress widgets are the boxes that appear on the left or right sidebar of a webpage, which are usually pre-defined (e.g. search, tag cloud, etc.).

To use the form in a widget, you have to copy the source code of the form generated by SalesAutopilot into the “Text” Widget type, as illustrated by the pictures below.

First, select Widgets in the Appearance menu.

Scroll down to the Text option, and then click on it.

Click on the Add widget button.

Type a short title in the Title field, and then copy the source code of the form in the Content field (it doesn’t matter whether you use the iframe or HTML source code).