I’m having trouble getting my contact forms to interact with breakpoints when building responsive sites. How do I accomplish this? I feel like I must be missing something obvious.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
How are you laying out your form? Did you draw a table on the page? IF so, you can change the width of that table (I think) at each breakpoint. What you cannot do is make your form layout behave the way that, say, a Bootstrap form will, where the labels go from this:
name [ ]
to this (on mobile)
name
[ ]
For that, you’re going to need to do some more hand-coding in your styles (and maybe in the Page / HTML Markup dialog. Not sure how you could approximate that in the visual layout, or even in a table layout (as recommended to make the Freeway forms more accessible to the visually disabled).
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I used the table layout, but the width settings don’t follow the breakpoints. If I adjust the width in one breakpoint it changes on each of the others. The positioning of the table follows the breakpoints, just not the cell and table sizes.
I’ve tried playing with flexible width settings, but it just makes the table look sloppy in the same way across each breakpoint, especially in terms of the html fields.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ill throw my hat in the ring here too. I am having a hard time of it with responsive forms with all the breakpoints
I have tried it a few times , and never easily
there has to be an easier way
thx
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
What I do is quite simple to be honest, I insert a child DIV ‘form-items’ and within this DIV I insert the text-fields etc. I apply a 100% width to the form-items to expand them to the whole width of the ‘form-items’ DIV. Because of the applied percentages the fields themselves are responsive and they’ll react to the parental ‘form-items’ div.
<div id='content'>
<div id='form-items'> /!-- give this a full width, use padding, whatever --/
<input id="form-name" type= ... > /!-- Give this a width of 100% --/
</div>
</div>
Example of one of my current projects …
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On a simple form not bother with a table at all for the form so it can flow better on small screens and place the field on the next line using a line return
Name
/!-- Give this a width of 100% —/
email
/!-- Give this a width of 100% —/
David Owen { Freeway Friendly Web hosting and Domains }
http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk
On 27 Feb 2015, at 15:55, waltd email@hidden wrote:
How are you laying out your form? Did you draw a table on the page?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
thx guys, but I do not design the code way… I build wrappers and set percentages and style as Ive learned in 7, so this is gibberish to me, sorry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It’s not gibberish, nor is David suggesting you hand-code the form, if you take a second and look at his example you’ll see he’s simply telling you that you need to give your input fields (name, email whatever you’re using) a width of 100%. Insert a field then add a soft return, add another field and add a soft return and so on. That’s it. No need to go all code-a-phobic.
Todd
https://xiiro.com
thx guys, but I do not design the code way… I build wrappers and set percentages and style as Ive learned in 7, so this is gibberish to me, sorry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
ha! Thax Todd. forgive me I did not, it was gibberish, just to me…
I will do my best
thx
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options