Using 3rd Party Forms

SiteWrench is built on Microsoft's .NET framework. The version of .NET it uses makes all web pages a Form. This creates a challenge because you cannot have nested forms on a web page. This will be true for lead for things like Marketo, Hubspot, etc. This is also going to be true for things like email signup forms.

Meaning that if you embed a form on a page in SiteWrench, you have nested a form inside a form and that won't work.

The easiest way to get around this is to use an iFrame, because an iFrame is actually a separate web page that you can see in a specific area of your web page. Think of it like cutting a hole in a piece of paper and then positioning another piece of paper where you can see what you want to see through the hole. The basic steps are:

1. Create a new HTML file that contains your form code (or JS code that creates the form)
2. Upload it somewhere so that it is web accessible
3. Use something like http://embedresponsively.com to be sure your new iFrame will behave well on mobile
4. Paste the embed code on a page in your site
5. Test and tweak

Here are the steps broken down with more details:

1. Create a new HTML file that contains your form code

- In a plain text editor of your choice (you can't use Word or Pages for this, Notepad or Text Edit work great provided you use Plain Text mode) add the code that is provided by the 3rd party. If you don't have a good plain text editor, Sublime or VS Code are both free and are superb.

- Save this code as a .hmtl file. The file has to have that extension, if your computer is set to "hide" file extensions, you may have trouble with this one (using something like Sublime will help).

2. Upload it somewhere so that it is web accessible

- You can upload this file to Files in SiteWrench, it'll be web accessible from there. You can also upload it to a GIT Repo (like Buddy) or any other web server. All you need is a URL that will load the file.

- Load the file, submit a test and be sure it works

- Copy the file's URL

3. Use something like http://embedresponsively.com to be sure your new iFrame will behave well on mobile

- Go to http://embedresponsively.com/ and choose Generic iFrame

- Replace the URL that is in the text field with your url. It should look like this:

<iframe src='https://[YourURL]/' style='border:0'></iframe>

- Click the blue Embed button, scroll down and copy all of the Embed Code:

4. Paste the embed code on a page in your site

You'll have to either use a Code Module or use the Source view of the WYSIWYG editor. Paste the Embed Code, save it and then view the page. You should see the form, it should successfully submit. It may not look great yet.

5. Test and tweak

- Test the form and be sure it submits. It probably will. Here are some common things you can do to tweak the form to make it look right.

Scrolling="no"

If you don't want your iFrame to scroll independently inside your page, you can add an attribute to the embed code to prevent it from scrolling It'll look like this

<iframe src='https://[YourURL]/' style='border:0' Scrolling="no"></iframe>

Height

If your iFrame isn't tall enough to display everything you can change the first height attribute in the Embed Code. You'll want to make it a set number of pixels, so something like height: 850px;

Confirmation issues

If the form's loads a different page for its confirmation, it's likely that it won't fit in the iframe you've created. In most cases you can make the form load in a different window once submitted. You can add an attribute to the <form> tag in the HTML file you've created. Often times these two will work

target="_top"

target="_blank"

Styling Issues

If the styling on the site and in the iFrame don't match, you can add your site's existing CSS to your .html file. This will help in some cases. You'll want to be sure that your .html file you created a few steps ago is well-formed and you can link to your style sheet in the head.

<link rel="stylesheet" href="//[path to your CSS file" />

Need more help, let us know!