Embedding FormBuilder Forms into your site
FormBuilder is a script that allows you to easily create fantastic AJAX forms, complete with validation and a great design, which are sent directly to your email. This article shows how you can include a FormBuilder form in your site.
After you've done configuring FormBuilder and adding fields, you would probably want to include the forms in your site.
There are two ways in which you can do this.
- Using an iframe - recommended.
- Modifying index.php (for advanced users only).
In the rest of this short tutorial, we will take a brief look at both of these methods.
Using an iframe
This is the easiest and fastest way to get going. You can choose one of the two inbuilt themes that matches your current design best (a dark and a light one) in the configuration file. You can also modify the themes' CSS files to match your current design if you are CSS savvy.
After you choose the theme, it is really easy to include the form, just put this code in your site:
<iframe height="550" width="500" src="http://example.com/ContactForm/index.php?embed=1" frameborder="0" scrolling="no"> </iframe>
The src attribute must point to where your form is located. When you type the URL you see in src in your browser, you should see the form. The ?embed=1 parameter is optional - it strips the form from paddings and makes it more compact so it fits in a smaller iframe.
Depending on the number of fields in your form, you might need to adjust the height attribute, so the submit button is visible. You should also replace the src attribute with the URL of your FormBuilder copy (also do not forget the ?embed=1 attribute at the end).
If you are a WordPress user you can include the form easily. Just create a new page (say Contact) and paste the code in the HTML tab. For this to work, however, you will need to first install the free Embed Iframe WordPress plugin, as the platform does not allow for iframes to be added to posts by default.
Modifying index.php
If you feel comfortable with editing PHP code, you can just open up index.php in your favorite text editor, and apply whatever changes you like. The logic behind the form is abstracted away in the FormBuilder class, so index.php is easier to modify.
Important: do not rename index.php to something else! This will cause the script to break and get stuck in the "working" state.