How to make a Responsive form for my website- Revolution Slider Wordpress CMS

I got small form that I added to revolution slider (wordpress CMS), now I need some how make this form responsive 

Current form code

<script type="text/javascript" src="//form.jotformpro.com/jsform/41405796054961"></script>

http://awesomescreenshot.com/0eb2ufkl6d

http://prpalaska.com/ - my website

Hi,

Add the following CSS codes to your form, this will make the form text box and submit button responsive when viewed on small screen devices. Guide: How-to-Inject-Custom-CSS-Codes

@media only screen and (max-width: 468px) {

.form-input, .form-textbox, .form-submit-button {

width: 100% !important;

}

}

Apparently, your form container isn't positioning well on mobile as of checking resulting the form not to render properly on mobile so I would suggest checking that on your end since that's way out of our scope.

Feel free to let us know here should you need any further assistance. We'd be glad to help.

Regards!

Can we add CSS for this http://awesomescreenshot.com/0752uop1e5? So it will scale down as I squeze website? + May be font & fields scale down proportionaly too?  

You certainly are able to scale down a form by adding CSS code to it. For more information on performing this type of customization, kindly review the guides below.

Thank you.

Related Guides:

-How-to-Inject-Custom-CSS-Codes

-Customize-your-Form-using-Custom-CSS-Codes

Which code should I use?

Using the shared guiides, please try the following CSS code:

@media only screen and (max-width: 468px) {

.form-input, .form-textbox, .form-submit-button {

width: 100% !important;

}

}

You may want to create a test page on your website so that we can check the result and advice further if there are some anomalies.

Looking forward to your response.

I added this code after  EltonCris  replied.

 http://awesomescreenshot.com/0752uop1e5 how can I scale down space & text fields?

Hi,

You can also adjust the question vertical spacing of fields and as well us the form width using the form builder.

For question spacing check this user guide 

-How-to-Reduce-Vertical-Spacing-between-Fields

For the form width, this guide

http://www.jotform.com/help/35-The-Importance-of-Form-Widths

You can also adjust the inected CSS code value for the max-width

Example, if this was the CSS code

@media only screen and (max-width: 468px) {

.form-input, .form-textbox, .form-submit-button {

width: 100% !important;

}

}

adjust it to 

@media only screen and (max-width: 420px) {

.form-input, .form-textbox, .form-submit-button {

width: 100% !important;

}

}

to make the width narrower.

Hope this help. Inform us if you need further assistance.

Thanks.

I made changes, but still got problems. IF I scale down website I am getting this http://awesomescreenshot.com/0e72uwjif2. Is it possible to scale font & text fields down?

Scale down to what percent? I'm not able to replicate that using Chrome v35 and FF v29. Scaling the browser to any percentage doesn't hide some part of the form. For example:

Google Chrome: https://shots.jotform.com/welvin/ss/05-24-2014-056hdi7i65.png

Mozilla Firefox: https://shots.jotform.com/welvin/ss/05-24-2014-i75rds3scd.png

Is there any way you could check it using an actual mobile device? This way, we'll know on how that looks like to your end and so we can help further in adding the adjustments.

Thanks