Is it possible to make form responsive on Xara Web Designer Premium 11?

Hi Guys,

My form in question is found hosted via a Frame redirect from the URL: http://golime.co.uk/

I have done this as (using Xara web designer premium 11), i couldn't find a way to embed the form onto a website so that the responsiveness of the form was fluid and 'worked' as i wanted it to.

I assumed that i would need to add the code to a place holder, but then having to set the size of the place holder seems to restrict the forms ability to re-size across different devices.. As, of course, the place holder's size doesn't change...

If there is a tutorial to import a responsive form into a Xara website..as this would be a huge help?

Either way, as a temporary work around, I am Frame redirecting - and even that has issues. The form on a mobile device looks awful! All the Input fields and submit buttons are stretched and clearly haven't been re-sized!

I give you full permission to edit any CSS or other variable in the form to get this working as you would expect it to... 

The response offered in previous posts does not work and produces the same result as shown above...

(Previous fix offered by Dan below) 

"you need to first draw a rectangle graphic in your web page to the approximate size you want the form and adjust it's web properties to convert it to a placeholder to contain the JotForm html. To do this, once you have the rectangle graphic in place, right click inside the graphic to open its "Web Properties" dialogue box. Click on the "Placeholder" tab then click on the "Replace with html code" button and paste into the dialogue box the code you copied from JotForm. Click "OK" to go back to "Web Properties" and check the "re-generate place holder image automatically" box. Click OK and the form will be placed and working. If part of the form is missing, play with the page boundaries and the form boundaries until you're happy.View in "Web Preview" mode to see how it behaves in various browsers."!"

Hi,

Apologies, my knowledge with Xara is quite limited as I currently do not have that application to test it in my end. Although, I did my research for this.

Upon checking your website, I viewed it on an Android device and it displays like in a desktop computer.

It seems like the website itself is not optimized for responsiveness. I've searched for some video tutorials and found a guide here: http://support.xara.com/index.php?/Knowledgebase/Article/View/810/0/responsive-web-design. 

The video tutorials are found under the "Demo movie", here are the links:

http://www.xara.com/us/web-designer/tutorials-demos/48758.246534/

http://www.xara.com/us/web-designer/tutorials-demos/48758.246534/54051.246537/

You can create mobile variants of your web design, if you haven't tried that tutorial, please do so. Then you can add your form that same manner showed in this guide: http://www.jotform.com/help/175-Changing-Height-in-Xara-7. The version of Xara is quite outdated but I believe the same tools and option still applies.

Please also make sure that your form is mobile responsive, here's a guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

I hope that helps.

Thank you. 

Hi Charlie,

Re: GoLime.co.uk form on Desktop and Mobile 

Thanks for your reply.

I had hoped the 'make form responsive' option in the forms preferences would prevent having to do the long work around as suggested.. however as instructed, I've now got this working.

Steps I took for reference and for anyone else that's currently struggling with this same issue:

- Create a new Website variant in Xara Web designer Premium 11

- Created (*from a clone to save time!) a mobile sized version of my original form in Jotform and inserted this into the Mobile variant of the website.

Xara's upload website function does all the required re-direct work for sending appropriate devices to the relevant sites depending on the screen sizes so its pretty much plain sailing from here. 

All seems to be working as it should be. No problem integrating into Google Webmaster with the two site versions and Analytics picks up both fine..

Quick tip for anyone else trying to achieve this in Xara, The preview file is your saviour but try out your site in all the various browser options. This allows you to refine any issues before pushing live.

Also, Web Sticky option for a Jotform - Steer clear as this interrupts the users ability to enter data.

Thanks again

Chris 

Visual results of steps taken: 

Desktop View: 

Mobile View (not perfect by any means but it does the job!):

Chris 

Hi Chris,

Thank you for sharing your findings and solution for this. This'll help other users who uses Xara. 

For the Form itself, have you used the Mobile Responsive widget instead? But, make sure to remove or disable the Form Responsive options in the "Preferences" and the Form Designer tool if you'll use the widget.

See if that will give you better results, another option that you can use, you can use CSS @media rule to declare specific widths of the form fields if it seems short.

I hope that helps.

Thank you.

Thank you, this works perfectly for me