Integrating Online Forms with Your Website

Written by Chris Lucas on January 12, 2009

Posted in Form Hacks

Two questions that we are often asked is the best way to integrate your online forms with your website and how to get the forms to match the “look and feel” of your site.

Formstack gives you a few different options to integrate your web forms. The first is by using a simple link. Each form that you create in the form builder automatically generates a URL for that form. By using that URL you can easily link the form from anywhere on your site, use the link in an email newsletter or post on third party websites, without having to generate a new form for each instance.  When using the URL you can choose a standard template (we offer 6 basic templates) or you can create your template.

To create a new template simply scroll down to the bottom of the main admin panel after you have signed into your account.

Choose “Create a New Style Template”. You will then see the general Template Settings where you can name the template and also set your template as the default template for all your forms.

templatesettings

If you click on the Styles tab you can then start editing the look and feel of the template. Here you can add a header and footer, change the background and form colors, change the fonts. You can also change the field colors, the label fonts and colors and more. You can do all of this by simply clicking on the area you want to edit.

template-style1

Creating templates is any easy way to maintain the look you want with your forms without having to do too much work. Style templates allow you to match the look of your website (logo, color, etc.) without having to actually embed the form right within your web page. It is also great to use Style templates if you are going to be using the form from multiple sites (landing pages, home page, Third Party/partner websites, etc) or if you want to use the URL in email campaigns.

The other option that incorporates your form directly into your site is using our JavaScript Embed method.

Just like the URL, each form you create automatically generates a snippet of code (JavaScript) that can be placed inside any web page and will allow the form to work just as if it were its own seperate page (like the URL). The JavaScript also automatically updates any changes on your form, so you do not have to touch the code again once you place it inside your website.

To access the JavaScript embed option go to your forms “Use” area and click on the JavaScript tab. You will see some code. Simply copy the code.  You can then paste that bit of code into the code of your web page. One thing to remember is that any styles that you created will not carry over when using the JavaScript embed. Only the actual form elements will show up, however you can style the form in the CSS of your web page.

The JavaScript embed option is perfect for those who want to their website visitors to have seamless interaction on their site (not sending visitors to the Formstack URL). This also allows the form to simply “melt” right inside of your existing pages without any extra work on your part.

Both options give you flexibility in using your forms and will allow you to use Formstack but still maintain the integrity of your business or organizational branding.