Responsive Contact Form

Issues related to forms.
Post Reply
Azz25
 
 
Posts: 67
Joined: Sat Apr 24, 2010 2:13 pm

Responsive Contact Form

Post by Azz25 » Sun Sep 23, 2018 10:34 pm

Hi,

I am trying to do a responsive contact form, is this possible as I can't figure it out.

Thanks,

Aaron

GrahamW
 
 
Posts: 222
Joined: Sat Jul 08, 2017 5:02 am

Re: Responsive Contact Form

Post by GrahamW » Mon Sep 24, 2018 1:08 am

I use layout grids and my forms automatically become responsive.
If your using layers just create your breakpoints then resize the form fields to fit the new layer breakpoints

Graham

User avatar
Pablo
 
Posts: 14078
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Contact Form

Post by Pablo » Mon Sep 24, 2018 5:58 am

As mentioned by GrahamW, you can either use fixed positioned forms with breakpoints.
Or flexible forms with layout grids.

Related tutorial:
http://www.wysiwygwebbuilder.com/layout_modes.html

Azz25
 
 
Posts: 67
Joined: Sat Apr 24, 2010 2:13 pm

Re: Responsive Contact Form

Post by Azz25 » Mon Sep 24, 2018 7:52 am

Thanks both.

Aaron

petertj
 
 
Posts: 42
Joined: Thu Apr 12, 2012 11:18 am

Re: Responsive Contact Form

Post by petertj » Mon Sep 24, 2018 2:04 pm

After a marathon of input and trying to fathom out the alignment I have managed to get a form, contained by the FlegGrid object, to work.

https://www.learnus.co.uk/about/membership.php

The main issue is the use of controls which are just not ergonomically named. Such as 'align content' - does that mean left, right or up and down. There's another one called 'Justify content'.

The Flexgrid tool is potentially a very good one but the way in which is implemented here is very time consuming when the rest of the application is absolutely brilliant in its implementation. The explanation for making an excellent object into a nightmare is that the body organising standards in HTML lay down the rules.

Peter

User avatar
Pablo
 
Posts: 14078
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Contact Form

Post by Pablo » Mon Sep 24, 2018 2:32 pm

The main issue is the use of controls which are just not ergonomically named. Such as 'align content' - does that mean left, right or up and down. There's another one called 'Justify content'.
These are standard HTML names, I did not make these names up myself. This is what it is called in every HTML book and tutorial!
Giving them different names would only makes it more confusing for users who know the underlying techniques.

petertj
 
 
Posts: 42
Joined: Thu Apr 12, 2012 11:18 am

Responsive Contact Form

Post by petertj » Sat Oct 13, 2018 8:16 am

I don't find that to be correct Pablo.

On this page the actual attributes are named 'Start' and 'End' rather than 'Flex-start and Flex-End'. Please see: https://www.w3schools.com/css/css_grid_container.asp

In any case, we are not using the code that W3C are using because we are using an application that by and large gets away from the code. That is one of the major advantages of the whole WWB concept. So Align Items actually means Vertical Alignment and 'Justify Content' actually means 'Horizontal Alignment'.

There is nothing within the W3C pages about grid containers that indicate that these controls should not be labelled in such a manner as to avoid confusion.

I agree with those who say that Flex Grids or their equivalent are the future of layout of web pages. So please let them be as intuitive and efficient as possible to learn and use within WWB

Finally, On this page https://www.w3schools.com/css/tryit.asp ... ace-evenly I have been able to see the Align Content feature actually working but I'm blowed if I can reproduce that in WWB. None of the examples given use anything but the Flex Start attribute in relation to Align content except Centre in the examples and absolutely no difference is made when that is changed to Flex-Start.

For the avoidance iof misunderstanding (and throwing toys out of the pram) I am in awe as to the brilliance of WWB and am really only tripping up over the difficulty of use and attribute labeling of Flex Grids.

Peter

User avatar
Pablo
 
Posts: 14078
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Contact Form

Post by Pablo » Sat Oct 13, 2018 10:33 am

I'm sorry to disagree, but I think your assumption is not correct.

This information applies to the CSS grid, not the grid areas.
In WWB, each grid area is a flexbox container and therefor it uses the flexbox align properties, not css grid properties (which only applies to the container, not the cells).
https://www.w3schools.com/css/css3_flex ... fy-content
https://www.w3schools.com/css/css3_flex ... lign-items
https://www.w3schools.com/css/css3_flex ... gn-content
So Align Items actually means Vertical Alignment and 'Justify Content' actually means 'Horizontal Alignment'.
Again, this is not a correct interpretation.
It is only correct when the flex-direction is 'row' and page direction left-to-right
However, when the flex-direction is set to 'column' then "Align Items" means 'Horizontal Alignment' and 'Justify Content' means 'Vertical Alignment'!
Also the page direction affects the meaning of these values. For right-to-left pages, 'start' means 'right' and 'end means 'left' instead of start=left and end=right
That is one of the reasons why I have decided to keep the original names, otherwise it would it make things even more confusing.

Examples of all available flexbox alignment options are available here:
http://wysiwygwebbuilder.com/flexbox.html

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests