iFrame Code

After creating your contact form in Táve (follow this tutorial if you haven’t done so already), you can embed the form into the content of an existing page on your website using the iframe code below.

<iframe id="taveForm" src="https://tave.com/yourstudioname-inline" width="100%" height="1400px" frameborder="0" scrolling="yes"></iframe>

You will need to change the part that says https://tave.com/yourstudioname-inline to what you have as your secure domain on your brand page within Táve.  If you copy and paste the entire URL, be sure to change it to https:, not http:!  Since my secure domain says https://tave.com/nicoleklym, I would also have to add -inline on the end of that to make it look like this:

<iframe id="taveForm" src="https://tave.com/nicoleklym-inline" width="100%" height="1400px" frameborder="0" scrolling="yes"></iframe>

If your contact form contains a lot of fields making it pretty lengthy, causing some of your form to not appear after embedding this code, you can lengthen your form by adjusting the height code.  For example, you can edit height=”1400px” to be 1900px or another number until it looks just right. Also check it out on mobile devices to be sure its length is appropriate.

IMPORTANT: You’ll need to have access to the html source code of the page you’re embedding this on. So you’ll need to look for something along the lines of “Edit HTML” or “Insert HTML”.

Redirecting an Embedded Contact Form

If you are redirecting your embedded contact form to a new URL, you'll need to add a specific script to your branding settings so that the redirect doesn't happen inside of the iFrame. To do this, simply go to Settings › Branding › Advanced Design Editor and then click on the Page Footer HTML tab. You'll then copy and paste the following code into the box: 

<script id="RedirectJS" src="https://tave.com/static/Permalinks/InlineBreakout.js" type="text/javascript"></script>

It should look like this:

Did this answer your question?