The Xara Xone Workbook
H    1    2    3    4    5    Download Zipped Tutorial  
Adding Forms to Web Designer

A equally frequently asked question which is asked even more frequently is  can Web Designer create forms? The short answer is no. The longer answer is this tutorial.

There are many form builder websites where users can create forms. Some of these are free and some charge a monthly fee. JotForm is a free/fee website that lets visitors create simple forms for free. More complex forms, including those with Captcha encoding (those forms that require you to key in some text before you can press Submit) cost about $10 US a month.

JotForm is as easy as it gets. You can choose from predesigned forms, design your own, or use a Wizard to walk you through the steps. JotForm uses your personal information such as name and e-mail address that you provide when you register on the site, to direct the responses from the form to your e-mail address.

There are excellent tutorials on the website that explain the form creation process so I am not going to cover that here.

Adding Forms to Xara Web Designer - Xara Xone Workbook

So, you ask, how do I get my form from JotForm into Web Designer.

It’s easy. Honest. Trust me, I’m an editor.

Once you have created and have tested your form, press the small Source icon shown above in the attractive enlargement.


Adding Forms to Xara Web Designer - Xara Xone Workbook

JotForm presents you with two options The first option provides a simple link to the JotForm website which in this case hosts the form for you. When your visitor calls up the form, she or he is taken off your site and onto the JotForm website where they fill in and submit the form. It is up to your visitors to find his and her way back to your site.

The second option gives you the entire code which you can use in Web Designer to reconstruct the form. We’ll use the second option for this exercise . After all, if JotForm decides to pack it in and shut down the website, you are left without a form like a canoe without a paddle, a ship without a rudder, a... you get the point. With the second option you’ll still be good to go. Unless of course you pack it in and close down your website. But that is out of your editor’s control.

Note the size shown in the Option 1 script, in this case Width 100% and Height 640 pix. The height is the important figure.

Click your cursor in the Option 2 yellow area text, then press Ctrl a to select all the text (there is quite a bit of it). Press Ctrl c to copy the text to the clipboard.


Adding Forms to Xara Web Designer - Xara Xone Workbook

Create a new page in Web Designer for your form. Add a banner if you wish.

Create a rectangle that is 640 pixels tall and about 600 pixels wide. The color does not matter because this rectangle is just a placeholder for where the actual form is going to appear on the page.


Adding Forms to Xara Web Designer - Xara Xone Workbook

Click the Website Properties icon and select the Placeholder tab.

Paste the code into the Replace with HTML Code text entry box.


You have just added a form to your website. How hard was that?


Changing the Page Background - Xara Xone Workbook

To see the proof, press Export and Preview Website.


Adding Forms to Xara Web Designer - Xara Xone Workbook

Here’s the form previewed in Web Designers browser preview window. You can test it right from the browser preview window. The response will be sent to your e-mail address.

    NOTE: The contents of the form are automatically sent to your e-mail address. There are some additional options offered on the JotForm website that link to pages that you will need to add to your site and which will display a short note to your visitor that her or his feedback has been submitted and you will respond in a timely manner (or whatever you want to say). This merely requires a page on your website that you then link to. This is kind of putting the cart before the horse but if you create the pages and give them page names you can link to, it is a snap.


Adding Forms to Xara Web Designer - Xara Xone Workbook

Here are some of the tools and features that you’ll find on the JotForm website. The TOOLBOX options are the basic form creation components in case you want to modify an existing form or create your own. The POWER TOOLS are available for a monthly fee and include the Captcha option which prevents forms from being hijacked by spam spewing web bots. If you are creating a form for a client this is really a must. Otherwise heaven only knows what kinds of trash will be mailed out under your client’s name! PAYMENT TOOLS is free and lets you create forms for payment including PayPal. You need to have one of these accounts before you can create the payment forms. PayPal is free and charges about 3% to process the transaction.

So did this answer your question?

There are literally thousands of scripts like this that you can add to your website via the placeholder option, which is one of the real power options in Web Designer.