Mac SEO Blog

EverWeb makes it easy to embed a JotForm contact form into your web pages. JotForm is a free to use, third party online contact form builder that does not require any coding. Like EverWeb, JotForm has great drag and drop capabilities, templates and even widgets so that you can create and customize the contact forms you want quickly and easily.

In the example below, students are going to be voting for a new Student Union president. Voting is via a contact form that is embedded in a web page. In this example the contact form has already been created in JotForm.

1. To start, click on the ‘Add Page’ button from the Toolbar in the  EverWeb project file that you want the contact form to be embedded in.
2. Select the Theme Template you want to use e.g. the ‘University’ Theme Template.
3. Next choose the page style you want e.g. the ‘Blank’ page style, then click the ‘Select’ button.
4. Make sure that you have enough space to embed the form on your page. You can adjust the page layout later, but it is a good idea to get an approximate look for your page before you embed the JotForm.
5. With the page layout prepared in EverWeb, go to the JotForm website and log in to your account if you have not done so already.
6. Select the JotForm contact form that you want to embed in to EverWeb.
7. Click on the ‘Publish’ button in the menu.
8. Select ‘Embed’ from the left hand side and then click on the ‘Copy Code’ button which will copy the embed code to the clipboard so it can be pasted in to EverWeb.
9. Now go back in EverWeb and click on the ‘Widgets’ Tab.
10. Select the ‘HTML Snippet’ widget and drag and drop it on to the page in the space that you created earlier for the JotForm contact form.
11. Click in the ‘HTML Code’ box and paste the code in from JotForm.
12. Press ‘Apply’ to finish. You should see your Jotform form embedded in your EverWeb page.
13. Optionally, you may want to make the embedded JotForm full width. If this is the case, keep the HTML Snippet widget selected, go to the Metrics Inspector and check ‘Full Width’.
14. Finally, reformat the page layout as required so that the embedded form is in the correct place on the page.
15. ‘Preview’ or ‘Publish’ the form so that you can test that it works correctly. In this example, Use Preview to check out the layout and form content.  Only click on the ‘Submit’ button when you ‘Publish’ your website and not when using Preview as it will not work correctly if you do so. When you have published the website, rest the JotForm to make sure that the email sent is received properly by your email program.

Matching Up Colors

If you need to match up the colors in your JotForm contact form with those in your EverWeb page there are two ways you can do this:

Using the Eye Dropper in EverWeb

1. Begin by selecting the object in EverWeb that needs to have its color changed
2. Next Click on the Shape Options tab in the Inspector Window
3. Click on the color swatch in the Fill section. The Color Picker appears on screen
4. In the bottom left hand corner of the Color Picker you will notice there is an Eye Dropper. Click on this.
5. Your mouse pointer will change in to a large magnifier. Move the magnifier over the object whose color you want it to match with and then click
6. Your selected object will change color and match the object you clicked on.

Using Digital Color Meter

Digital Color Meter comes with macOS. Use a Spotlight search (Cmd+Spacebar) and enter the words ‘Digital Color Meter’. As you type, the whole phrase gets autofilled by the search. Just press enter when this happens to open the application. When using Digital Color Meter, remember to set ‘Display in Generic RGB’ from the drop down menu. Once you have done this, mouse over the color you want to select. Make a note of the R, G and B (Red, Green and Blue) values that are shown in the Digital Color Meter.

When you have the color values, go back to EverWeb and select the object that you want to be the same color as in JotForm, for example, a rectangular shape. Go to the Shape Objects tab and click on the color swatch in the Fill section. This will call up the Color Picker. Select the second tab from the left in the Color Picker and enter in the R, G, B values in the corresponding Red, Green, Blue values boxes.

YouTube Video Link

There’s also a YouTube video available of this blog so check out Embedding a JotForm in EverWeb for the audio-visual walkthrough.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw