Client Editing website designed using Xara Web Designer 10 Premium

[gsthunder]

Again, I want to thank you so much for your guidance and super instructions. I plan to take a good look at JotForm and see how far I can go with it. However, If I have problems I feel comfortable I can come back here with questions. Let me ask a question all. I have some photos that have white backgrounds. Is there any way to blend (if that's the right terminology) the photo background with the background of the page the photo is located on? Is there any way the background of the photo can be colored to more closely match the page it's on? I hope I am being clear. If WD 10 Premium does not have this ability, does WD 11 Premium have it? I just found out what I am trying to describe here. The word is "Transparency" and I am going to print out all I see regarding transparency in the WD 10 Premium Help Section. I will try what they suggest and see what happens.

I am going to the "JotForm" website now. Thanks all.

Bob

In the case of your photos I would use some type of photo editing program( photoshop, paint shop pro, etc... )and turn them into transparent PNG's. It would make the white background part transparent while keeping the picture area. I do this often with photos and clipart. I don't know if this is something a Xara product can do or not? I use an old paint shop pro program from Corell I have had for years. The method will vary from product to product.

[musicmanbob]

Good afternoon GSThunder,
I followed your instructions and found widgets/form you spoke of. I also noted there was a graphic for Jotform and clicked on that and went straight to the Jotform website. I note they have a Free program and several that cost monthly fees. What choices do I make? Formtools, Jotform and others claim to be simple with a simple process. However, as you note, you use code in order to get the form to work. For us non-tech folk, that might present some difficulty. Thanks again to you.

Bob

[gsthunder]

Good afternoon GSThunder,
I followed your instructions and found widgets/form you spoke of. I also noted there was a graphic for Jotform and clicked on that and went straight to the Jotform website. I note they have a Free program and several that cost monthly fees. What choices do I make? Formtools, Jotform and others claim to be simple with a simple process. However, as you note, you use code in order to get the form to work. For us non-tech folk, that might present some difficulty. Thanks again to you.

Bob

Sorry I took so long to respond. Haven't had a chance until now.

Jotform is actually very easy to use and they have been extremely reliable for me over the years. You don't need to be a code genius to tweak the form so it fits everywhere properly either. If you did I wouldn't use them for my forms. It is so easy to remedy the issue that it has now become second nature for me and takes literally only a few minutes of adjusting and previewing to get it right.

Try going to Jotform and create a free account to try it out. No sense setting up a pay account until you are sure you will use them. Start with a blank page and add the items you want on the form vs. using a template( I don't care for 99.9% of their templates actually ). There are 5 menu options to the left. Start with Form Tools. Use Text Box for all of the persons personal info( name, address, phone, etc... )that you wish them to include. Just drag a new one onto the form as many times as needed to cover everything you need an input area for. Don't use the premade ones in Quick Tools( it is harder to tweak the form later for multi-browser compatibility ). 3-4 input areas per line is the norm. You may have to widen the form to accommodate them all on one line.

Once that is all there select/drag the Text Area option onto your form for them to enter their message/question to you in. Adjust it's size so it lines up with the rows of input areas above it. Even though you will adjust sizes later using CSS( see below )you still want to make sure everything lines up side to side while building it by adjusting each box's size properties( each item you add to the form has it's own settings you can edit easily ). If you want to add anti bot security go to Quick Tools and add a Captcha box. They offer a lot of fancy options in Quick Tools, Widgets, etc... but I usually just use the basic ones listed above.

Once it is done look in the overhead form menu for Publish. When that is clicked a popup appears to the right. Select the Platform option/tab and then scroll down and look for Xara. Click the Xara button and then copy the code it shows. Go to your website and create a placeholder box where you want the form to display. Click on the Link Properties icon overhead( looks like a piece of chain )and then click the Placeholder tab. Click the HTML Body button and paste the code into the field that appears and click ok/apply. You will have to adjust the placeholder box size to allow the form to fully display.

Once the form is built and placed into your website use the preview option in Xara to view how it is displayed in the various browsers. If you only have one browser on your computer do yourself a favor and get them all so you can preview your site in the various browsers and check for display differences. I have all 4 on my system even though I only use 1 for web browsing. I have the others just so I can see how my sites display on them. This is HUGE with forms like Jotform because each browser displays them differently. The 4 browsers WD10( that is what you are using I believe )allows previews in are Internet Explorer(IE), Firefox(FF), Google Chrome(GC), and Opera. Really you only need IE/FF/GC because Opera seems to mirror GC in my experience but it doesn't hurt to have Opera as well. No preview options are offered for Edge or Safari. You would have to publish the site and manually open in those browsers to see how they work. I just stick to doing the best I can to make it work right in the 4 Xara gives us( I too use WD10 ).

What I expect you will notice once you preview is that Xara Preview and IE display the form exactly as it appears on the Jotform site( in it's preview ). In FF,GC, and Opera however it will display differently. Those browsers display the form input areas/text message box wider so it throws off alignment and can even cause items to be shifted down a line. When that happens, it shifts everything else down and leads to things being cut off at the bottom. It can be fixed fairly easy though so that you come to a compromise allowing the form to display acceptably on all browsers. For that you have to go back to Jotform.

On Jotform, with your form open, click on the preferences tab in the overhead form menu. Then select the Form Styles Tab. Go down to Inject Custom CSS and click edit. This is where you enter the code to bring the form under control. You are setting sizes for the input boxes and text area message that are more universal to all browsers. It won't be 100% perfect but you can get it close. This is what you enter there( note - enter it exactly as displayed and then replace the ### with actual numbers - try starting with 150 for the text box and 600 for the text area and adjust each up and down as needed for your specific form )...

.form-textbox {
width: ###px;
}
.form-textarea {
max-width: ###px;
}

You will have to play with each one to get things to line up as best as you can. You will have to keep tweaking the CSS code numbers and then saving the form on Jotform and then going back into Xara and previewing the site to see how the changes affected it. It is not uncommon as well to have odd numbers like 149 and 703 when you are finally done vs. nice even 150/600. It all depends on how big or small the form is.

Use these links to one of my sites that uses Jotform to see how they display differently on different browsers. On IE the contact form is 100% lined up and looks how it should and what I strive to end up with. But on FF and GC/Opera the message area is wider. On the feedback form in IE the message area is smaller than I want but it has to be that way so that there is room for it on FF and GC/Opera. All form fields are pre defined and the same but as you can see different browsers display differently even when you set the parameters. Without that little bit of custom CSS code the forms would be WAY off. IE displays the forms the way they are on Jotform the best. FF makes them somewhat wider, and GC/Opera really widen them.

Because all the browsers display differently, you will have to take that into account when creating the form area on your site. Have enough room/blank space to the right so it can expand as needed without going over other things. Use my contact form as an example. You will see there is a lot( not too much so it looks really bad )of blank space between the right edge of the form and the divider line than needed in IE. I need that extra blank area though because in FF/GC/Opera it is needed.

Contact: http://www.rfdowninghomes.com/page2.htm

Feedback: http://www.rfdowninghomes.com/page7.htm

So don't be afraid to try it out. It really isn't too hard. You just have to spend some time tweaking the CSS code to get the forms to display acceptably across all browsers. Building the forms and then tweaking the code is as easy as it gets on Jotform IMO which is why I use them. The Jotform message community is awesome as far as getting help. They answer fast and they never talk down to people with little experience. Don't hesitate to ask questions there too.

Hope this helps and please ask if I can offer any more info for you.

[nobbyy]

gsthunder - many thanks for taking the time to post the tweaks with jotform, I was pulling my hair out at one stage trying to get a form to display properly and I think that your suggestions may be the answer - cant wait to try them!

[gsthunder]

gsthunder - many thanks for taking the time to post the tweaks with jotform, I was pulling my hair out at one stage trying to get a form to display properly and I think that your suggestions may be the answer - cant wait to try them!

It drove me insane too. It never used to be an issue as the forms displayed pretty much the same among the browsers and then all of a sudden FF and GC went hay wire after various revisions. I asked on the Jotform community forum for help and that is where I got the CSS tweaks. If you will use more than just the basic inputs I talk of you may need different tweaks. Ask on their forum. Great folks over there just as there is here. Glad to help whenever I can( not often as my skills are limited )and hope it actually does help you.

[nobbyy]

Thanks gsthunder -thats a really helpful suggestion.

[musicmanbob]

Hello all, I've been saved. One of the church Ministers has taken on the task of building the church website. She will be using "Word Press". I'm thinking it's like working with Dreamweaver, but I could be wrong since it may not require one to know HTML or code stuff. Thanks everyone for guiding me away from this project. I sure do appreciate. Thanks all.

bob

[Starmo]

Hi,
I am having similar problems with Jotform, I have got my form showing correctly on Safari mobile, (finally) and also on Chrome, Edge etc, my problem is the ipad, again running Chrome or Safari, I am having to put a large gap after the form and before the footer on my desktop version, so it shows correctly on the ipad.
Anybody had this one?
My form is set to responsive, but I think I tried it without, tried so many different things, cannot remember half of them now!