Make form responsive/fluid for mobile & restore settings

Hi,

Thanks for your reply. We have tried your suggestions, but the form does not appear to be responsive.

We feel it is something to do with our personalised CSS settings within the form itself. For example:
CSS style for form DIV on the contact form is set to width:800px;

Even when we change the width:800px; to max-width:99%; it still does not work.

We also tried the following fix we found from another forum but to no avail:

/*make contact form fluid*/
#FSContact1 {max-width:100% !important;}
#si_contact_name1 {width:80% !important;}
#si_contact_email1 {width:80% !important;}
#si_contact_subject1 {width:80% !important;}

Here is an example of the form: http://bit.ly/2irbHjF

Any other advice you can give will be gratefully appreciated.

Looking forward to your reply.

Hi,

Thanks for your wonderful solution. We have managed to tweak some of the custom CSS further and it has made an improvement, but still not quite there yet.

In order to preserve some of the formatting we wonder if the following is possible:

1. Is there any way of making the titles on the form left align only when viewing on a mobile (but is right aligned on larger screens)?

2. Similarly, is there any way of removing any left-padding so that it does not show on a mobile (but is visible on larger screens)?

3. Also, any way of making the input fields resize automatically so that they do not appear on the next line when they do not fit the width of a mobile screen?

If you could provide some insights on the above that would be very helpful.

Many thanks in advance for your help.

Thanks for your input. We could edit our theme’s style sheet using ‘@media’ and adding CSS for various elements of the Fast Secure Contact Form. This will allow us the tweak the style (e.g. left align the titles and input fields on smaller screens/mobiles).

Do you have a list of external CSS codes/labels that can be used to change specific elements of the form?

For example (these are made up):
#fscf-div-input-titles – to apply CSS to the input titles
#fscf-div-input-fields – to apply CSS to the input fields
#fscf-extra-field-html – to apply CSS to the extra HTML fields
ETC

We cannot find this information anywhere online and wondered if you are able to help.

Many thanks.

Taz.

• This reply was modified 7 years, 3 months ago by taz1.

Hi,

We are still using version 3.05 as updating the plugin breaks much of our styling.

We have tried everything and still unable to get this to work. A simple solution would be to add some code in our theme’s style sheet that instructs the ‘default’ style of the form (i.e. Reset the styles to labels on top) to be shown on smaller screen sizes/mobiles.

Could you please assist with that and we have no idea where to start.

Many thanks in advance for your fantastic support.

Hi,

Correct, we are using v3.05 of the contact form because when we update to v4 it loses all our formatting even if we try to restore the settings by uploading a saved style backup file.

Many thanks.

Hi, Yes it is a very old version, but the formatting is all lost when we update.

We following the different methods in the troubleshooting guide this morning, but still no luck.

Any additional ideas would be welcome.

Best wishes.