Fabrik doesn’t currently offer a contact form template (one day it will) but you can still have a contact form using a service called JotForm. JotFrom is free to use and a great tool for building forms of any kind. In this tutorial we will quickly show you how to build a form in JotForm and add it to your Fabrik website.

First off go to JotForm https://eu.jotform.com/ and sign up. Once you have signed up you should be welcomed with your forms, but as you have only just joined you have none. Lets create one one by clicking the Create Form button.

Select the Blank template and give it the title Contact Form so you know what it is in your forms list.

Once you have done that you should now be in the form builder. First thing to do is delete the title 'Contact Form' as it is not needed. To delete it just click on it and then click the red cross top right.

Now to add your form fields, I suggest adding three fields, name, email and message, feel free to add more if you want. From the left hand side in the Quick Fields select Email, then in the Basic Fields select Text Box giving it the title of Name and then select Text Area giving it the name Message. Order them so Name is at the top followed by Email and then Message. You should be left with something like this.

Thats the form building done, now to add it to you Fabrik site. At the top of the form builder in the Setup & Embed section, find and click on the button titled Publish. We want to embed the form so select the Embed tab and from the Embed Options dropdown select Source Code.

Click the Copy Code button.

Head over to Fabrik, if you haven’t already create a page called Contact in the pages section of your Fabrik. Once inside the page on the right hand side change your content editor to HTML and paste your JotForm source code into the editor on the left hand side.

One last thing to do, we just need to remove the JotForm styling from your form so it looks nice a fits in with your Fabrik site. Scroll to the top of the Source code and delete out all the <link> and <style> tags, all the highlighted text in the image below.

Click Save Page at the bottom of the screen and you should be ready to go. Click View Page to view your new contact form and go on send yourself an email through your new form for the fun of it. 

Happy Days!