Integrate date picker and contact form

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Integrate date picker and contact form

Post by Fredl »

I have been working on this for days, for some reason I cannot get this reservation page to work the way I need it to. I pushed it up to the server and got it to work, it sent the mail with the values from the form, but I needed to correct some errors in the form processing (Renaming editboxes etc to identify the values) once I got everything named and arranged correctly I get an error every time I hit submit. I don't know what is causing the error, it just loads the error page I linked to the error result. Now when I try to edit the original version of the form that was working to a degree on the server none of the elements are clickable in WB14, I can view and edit properties in object manager, but I can't drag them around or do anything in the main editing window. It's like the form is below something or locked, I've tried moving it "up" but no change, I've clicked unlock all. This is driving me crazy. How can I identify the cause of the error after I hit submit? Why can't I click any form elements in the main window? Any tips would be appreciated. The site is a replacement for a site that exists already, the DNS hasn't been switched to the new server yet, in order to see it one has to edit their hosts file, so it's impractical to share with you guys. Here is a google drive link to 2 versions, the one ending with b is the latest that doesn't send the mail and always errors out.
https://drive.google.com/open?id=14MQfL ... 0b0BGArX_U_
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Integrate date picker and contact form

Post by Pablo »

I have found the following issues:
- a form object cannot be used inside a layout grid. A form is a fixed/absolute container. Instead you can use the layout grid as a form.
- I do not recommend to use exclamation marks in file names, some web servers or browsers may not support this.
- the value in the 'From' email address is not valid (Robin "Red" Barlebo). This should be a valid email.

Also, I noticed that you have enabled PHP mailer. Did you upload/publish all files? Are you sure the settings are correct for your web account?
Did you also try standard mail?
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

Thanks Pablo,
I'm not having much luck using the grid as the form. I checked the "form" checkbox for the grid and set the mailer details ok, but If I set the form elements to full width=false I still cannot place them in the same column in line with one another, where the label is correctly positioned next to its edit box and it snaps into position like in an actual form, they fly all over the place. If I place the labels in an adjacent column and use top and bottom margins to position the labels any change in breakpoints causes a mess. What type of grid should I be using, and what properties as far as fluid/fixed etc? Sorry to be such a pain, but I need to have a reliable method of using a contact form/date picker/auto responder for the next several projects. I set up a very simple one at portadirectconnect.com that works fine as a simple contact form (Which happens to work fine in that grid for some reason) but it doesn't have date picker or an auto responder set up. For the Mailer, I use the built in .php mailer because the mailto method is discouraged by WB14. When I check the box for "include form data in message on the auto responder am I correct that I need to put the editbox values in brackets in the text, such as "Dear [Name] thank you for your reservation on [date]" Thanks again for your help, I really want to learn WB14 and become more proficient, as I prefer a desktop solution to the many competing web based ones offered by hosting companies.

I edited an earlier version of the reservation page today that did work to send mail, even though it was set up as a form on a grid, but it was sending both the reservation details and the autoresponder reply to the same address, for some reason. It is here:
https://drive.google.com/drive/folders/ ... sp=sharing
Please explain how to get that result, only without violating the form/grid rules etc,thanks.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Integrate date picker and contact form

Post by Pablo »

In the templates there are several example of forms using layout grids.
http://www.wysiwygwebbuilder.com/templates8.html

Also, in the Blocks section there are a few examples.
http://www.wysiwygwebbuilder.com/blocks.html

In your project, the form is behind the layout gird so that is why you cannot access it.
The floating layout overlaps the fixed layout.

If you really want to mix fixed and floating layout then you can use a (floating ) layer, instead of the form.

The name of the email input field is 'Email' while the Auto Responder is configured as 'email'.
See the info about this in the FAQ:
viewtopic.php?f=10&t=32967
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

In the templates that I have found with contact forms the layer is not set to form, would that actually work to send mail? Many of the templates are just a single page, and the "contact" page is not included in the template so that I can't use it as a starting point for my page. Can you suggest a specific responsive template that will serve as a starting point, something with an image and a paragraph above the form, or help me put together a working page that looks right in my breakpoints. I know it should be easy, but I'm not smart enough to figure it out yet after a week and a half of pages with content that is a mess in different breakpoints. I'd also like to use a drop down date picker, Ideally I'd like to use the form.html in the "Contact" folder at the Google drive link below with the reservations page laid out just like the one in the .wbs that is there also. I'll gladly pay you for your time, You have my email address from my purchase of your program, send me a reasonable paypal request and I'll pay it. I need to finish this website ASAP, and all that is left is the reservations page. I can copy the files needed by that form to the server if necessary, I did try to import that page into WB14, but I couldn't figure out how to make it behave correctly, the editboxes would be off the page in some viewpoints etc.

https://drive.google.com/drive/folders/ ... sp=sharing

Thanks in advance for any help.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Integrate date picker and contact form

Post by Pablo »

In the templates that I have found with contact forms the layer is not set to form, would that actually work to send mail?
The templates are just layout examples, if you enable the form then they will works are standard forms.

The reason hwy I was referring to the templates is to give you an idea how you could crate a form with layout grids.
You can just copy the form or turn it into a block and reuse it in your own projects
or help me put together a working page that looks right in my breakpoints.
I'm sorry, I cannot create your pages for you, you will have to do that yourself. But I think the templates are a good starting point.

If you use layout grids (like in most recent templates ) then in most cases you do not need to add breakpoints.
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

"I'm sorry, I cannot create your pages for you, you will have to do that yourself." I understand. Sorry I'm still needing help after your replies, I do appreciate you trying to help me. I really do try to follow your suggestions each time, but always run into some issue that renders my page unuseable. Can you explain how I can import the form.html in the "contact" folder on google drive into WB14 and have it contained to where it doesn't scramble the top of the page, navigation bar and the bottom of the page as in my example reservation page? I'd really like to integrate that form, as it looks far better than any of my attempts so far. The issues I've had were the editboxes not fitting inside the layout, the form doesn't push the bottom of the page down and sits on top of the bottom of the page, and that my navigation gets scrambled somehow. Anybody else reading this who might help, I'd appreciate any guidance as well, thanks!
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Integrate date picker and contact form

Post by Pablo »

If you are using the built-in form script, the page extension must be set to PHP. And it must be published to a web server. PHP forms do not work locally.
See the FAQ:
viewtopic.php?f=10&t=32967
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

In case anybody has been following this thread while putting together a similar page, and running into issues concerning form integration and the layout here is an update.
I was able to make it work by adding a table to the page below the grid, one row one column. In the "Cell HTML" box I put
<div style="width: 100%; height:100%; overflow-x: auto; white-space: nowrap;"> in the "Before tag*" section
and
<iframe
src="/contact/form.html"
style="min-width:260px;width:100%;height:1100px;border:none;"
frameborder="none"
allowTransparency="true" >
</iframe>

In the "Inside cell*" section.

The result is a contacts page that is responsive, into which I was able to add the jquery form I designed in an online form builder that included the date picker and icons I liked, and which made it easy to set up an auto-response email that included some of the form data etc. I copied the files associated with the form to a folder on the root of the server named "contact" and also placed the file "contact.html" in root, which was generated by the builder.

I'm sure there are other ways to achieve an acceptable result, but after much noodling this was the solution that worked for me. Thanks Pablo, for your tips and patience.
User avatar
BaconFries
 
 
Posts: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Integrate date picker and contact form

Post by BaconFries »

Thanks for letting us know you found a solution that seems to work for you. You should note that "allowTransparency="true" " will return errors in W3C validation as it is only specific to IE and was never recognised standard use, it is also no longer present in HTML5 and you will find other browsers do not support it so you may have issues.
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

Thanks Baconfries, I'll remove that bit, the online tool for designing the jquery form included that in the sample iframe integration code. The url for that project is texasredgolfcarts.com. Despite setting 3 breakpoints when the page renders on smartphones I still end up with a little bit of horizontal overflow, necessitating some side to side scrolling that makes the reservation page a little hard to work, could that bit of code be causing that issue? Also I noticed that sometimes the nav buttons misbehave, related as well? I'll be removing that code later today and will be able to test it, but I'm curious if you have any tips for making sure the page loads to 100% of the user defined screen size. Thanks again!
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Integrate date picker and contact form

Post by Pablo »

could that bit of code be causing that issue?
This usually means that you have used fixed object in a flexible layout.
For example: Image1 and Image9 have a fixed size. To make images flexible, enable the 'full width' option.
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

Thanks for the quick reply Pablo,
I have set every image to "full width=true" yet still have to scroll horizontally. Any clues as to why that is happening? I set only one breakpoint at 480 since I remember you saying that with the layout grid many breakpoints are unnecessary. My low end Samsung has a 720 x 1280 267 ppi display, FYI.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Integrate date picker and contact form

Post by Pablo »

NavigationBar1 also has a fixed size. However, this menu uses an array of images so it cannot be made flexible.
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

I've made some changes which have worked for every page but the reservations. The nav bar buttons only take up about 300 px, I don't see how that could force the page to load wider than that, what would you suggest I do? What type of navigation would be flexible? I also noticed something odd, even in landscape my reservation page is wider than the screen. Weird. I tried not using a table on the current version, but that didn't do it, so that wasn't it. I'll keep trying.***It's working now***
I added a layout grid with 3 columns, the middle widest, added my table in there, with the size set to "Automatic based on content"
and the cell HTML as follows:
before tag*
<div style="width: 100%; height:100%; overflow-x: auto; white-space: nowrap;">
inside cell*
<div style="width: 100%; height:100%; overflow-x: auto; white-space: nowrap;"><td style="text-align:center;vertical-align:middle;"><iframe
src="/contact/form.html"
style="min-width:260px;width:100%;height:1100px;border:none;"
frameborder="none"
allowTransparency="true" >
</iframe><span style="color:#000000;font-family:Arial;font-size:13px;line-height:16px;"> </span></td>

Now it works right, with no scrolling horizontally, which was making the date picker hard to use.
Thanks again for your quick replies! The start of fixing it was your tip about full width images! The rest I was able to deduce.
Last edited by Fredl on Thu Mar 07, 2019 8:11 pm, edited 3 times in total.
User avatar
BaconFries
 
 
Posts: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Integrate date picker and contact form

Post by BaconFries »

See the following list from Pablo reply to another member and link at bottom
Pablo wrote: Mon Mar 04, 2019 9:07 pm The following menus have a hamburger menu:
- responsive menu
- overlay menu
- mega menu
- themeable menu
- bootstrap navigation menu
- bootstrap mega menu
- fullscreen menu
- fullscreen overlay menu
- filter menu
- expandable panel menu
- multilevel panel menu
- responsive drop down Menu
- responsive overlay menu
- slideout menu
- circle menu
- fan menu
- gooey menu

See also:
http://wysiwygwebbuilder.com/navigation.html
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Integrate date picker and contact form

Post by Fredl »

Thanks BF, I edited my last post to indicate that I got it working, but I'll definitely keep that list in mind.
Post Reply