EverWeb Logo


Add JotForm Contact Form to your EverWeb Website

In this EverWeb video tutorial I’m going to show you just how easy it is to embed a JotForm into a web page in EverWeb.

In my example, students are going to be voting for a new Student Union president so I want them to be able to vote online.

To start, I click on the ‘Add Page’ button from the Toolbar and select the ‘University’ Theme Template. I’m going to use the ‘Blank’ page style here because it contains lots of space in which I can embed the JotForm into.

I’m just going to adjust the ‘Content Height’ from the default of 700 to 500 and now my page is complete.

I’m now going to switch to a preprepared JotForm that I made earlier. As you can see, the colors in the JotForm match the colors that I have from my Theme Template in EverWeb. I have achieved this matching by using the Digital Color Meter that comes with macOS.

Once I have finished my JotForm, I just click the ‘Publish’ button in the menu, select ‘Embed’ from the left hand side and then I just click on the ‘Copy Code’ button which will copy the code from JotForm, which can be then used in EverWeb.

Now back in EverWeb I click on the ‘Widgets’ Tab, select the ‘HTML Snippet' widget and drag and drop it on to my page. Next, I click in the ‘HTML Code’ box and paste the code in from JotForm.

Next, I go to the Metrics Inspector and check ‘Full Width’.

With some final adjustments my form is now complete. Once I am finished I can ‘Preview’ or ‘Publish’ the form. In this example, I am going to preview the form. I can fill in most of the fields but will only click the ‘Submit’. button when i publish my website and not when using Preview.