how to resize a form using forms 2.0

[Adam_Wignall]

Hello

Can anyone help me on this. I want to make a mobile friendly version of a webpage where its a single column that expands to fit the width of the screen. Is there  way to set the width of the form to be 100% of the screen or its container (for example a table of DIV). I need the lable and answer boxes to expand with the screen.

Without this forms appear very small on mordern smartphones with large resolutions (for example 1080p).

thanks for any help

Adam.

[Alok_Ramsisaria]

Hi Adam,

Forms 2.0 are already responsive. You need to make responsive landing page, and then implement Form 2.0 on it. 

Hope this helps!

[Adam_Wignall]

Thanks Alok.

I will look into this and try and see what I can do with it.

[Adam_Wignall]

I have another question.

If I want the same form to appear on 2 different pages but the fields be different lengths on each one... how can I do this?

regards

Adam

[Adam_Wignall]

Never mind I worked it out in the end. I just override the CSS for the forms using an HTML box on the page and !important tags

[Anonymous]

Hi Adam,

I'm trying to do the same thing with a 2.0 form on an unbounce page. Looks great on a browser, but the last field and button to download are cut off when viewing on a mobile device. Can you explain more about the CSS and !important tags you used?

The form is supposed to look like:

field1  ________
field2  ________
field3  ________
field4  ________
{download}

On a mobile, the field names are not in line with the boxes, like this:

field1  
________
field2  
________
field3  
________

(no space for field 4 or {download} button)

Thanks!

-Lauren

[Adam_Wignall]

You can force apply CSS using 3 methods.

1) Create a token and place it at the bottom of your page template. Then you can input the CSS into the token and it should be appled instead of the marketo default as its read last.

2) You can go to the form and there is an option to insert custom CSS. (edit form > Form settings > click cog > custom CSS)

3) Place a HTML snippet on the page and then insert the CSS into it.

The problem you are having might have something to do with the width of the form not displaing properly. 

If you use the custom CSS option insert this:

.mktoForm fieldset {

    width: 600px !important;

}

or try inserting a HTML snippert  and in it put the following:
<style>

.mktoForm fieldset {

    width: 600px !important;

}
</style>

Simply change the width to the correct amount needed e.g. 500px or 350px

The !important means it will override any other CSS on the page trying to do the same thing. I have had issues where pages being displayed on an overlay wouldnt display forms properly and this code help with the issue. However you can use this technique to change pretty much anything about the form as long as you can find out the class name of each element.

For example sometimes I might want to move where the tick box is. You can do this by right clicking the tick box in a google chrome window (on an approved version of the page not in the edit screen) and then click inspect element. You should then be able to find its class / id name which will have a unique number. Once you know that you can change it however you like using CSS.

In the above case that is a standard class name though which is much easier to find as its a common class name used throughout the form.