Make form responsive/fluid for mobile & restore settings

Hi, the contact form is already responsive. There must be something in your website that is stopping the plugin from functioning as a responsive form. Try the following, disable all your other plugins and then carry out a test? If that does not work can you test one of WordPress default themes like Twenty Fifteen or Sixteen?

Can you also share your URL with the contact form?

Thank you

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: https://bit.ly/2irbHjF

Any other advice you can give will be gratefully appreciated.

Looking forward to your reply.

Hi, if you added some custom CSS then perhaps that is probably causing this issue. One factor to always keep in mind when adding CSS to a form is always use percentage and try not to use pixel “PX” for example.

CSS style for form DIV on the contact form is set to width:800px;

For the above you mentioned the following CSS tweak and it did not work for you.

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

Try to change the above as follow.

Add this to the same field width:99%; and max-width:800px;.

Let me know if this helps you.

Regards

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.

Hi, yes you could try and add the above mentioned custom rules. However you will need to apply extra rules so that when viewing in a mobile device it causes the changes you suggested. Your best option for this is to google it and see if anyone can help you. One site I always advice people to check is https://stackoverflow.com/.

Let me know how you go.

Regards

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, 10 months ago by taz1.

Hi, if you go to Style tab you will see the following option. Select the method of delivering the form style..

This allows you to set up your own style if that is what you need. Which in my opinion will allow you to further customize your form as per your request above.

Let me know if that helps you further.

Regards

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, what do you mean by version 3.05? Are you referring to the contact form version?

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, that version is very old. You should really update to the latest version. Please check the following troubleshooting steps.

Let me know how you go.

Regards

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.

In your case you might have to recreate the old form into the new plugin version. I am not sure if there is an easy way to do this unfortunately because of the old version you are running.

Remember that your version is not secure. So you should update as soon as possible.

Regards