Form Designer Tips and Tricks

User 187934 Photo


Senior Advisor
20,244 posts

Share your tricks or tips for Form Designer with others!

This thread is for tricks and tips only - please no problem questions. Have a problem or question or want to chit chat about this program then Start a new thread please.

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,244 posts

Use Form Builder scripts with Form Designer on manually exported forms

Here's how to make a form built in Form Designer work with the scripts of Form Builder.
1. Make sure all your inputs, select, and etc... in the Form Designer match the names and settings used in Form Builder.

2. Make sure all selects, radio buttons, checkboxes and etc..... have the same values used in Form Builder.

3. Copy the form action from your Form Builders formname.html near the top. Mine was ../form-designer-crossover.php. Paste this into the Action in Form Designer on the Form Container.

4. Select Post on the Method for your form in Form Designer Form Container.

5.If your form uses a file upload than select Multipart Form Data otherwise select Form Url Encoded on Form Container

6. Export your Forms from both apps.

7. Copy all the files exported from Form Designer into the same directory that contains your myformname.html form Form Builder. This will be the directories css, js, fonts, socialicons and finally the index.html

8. Now on the myformname.php you need to alter one line of code.
Look for this like $myPage->Show();
Change it to this and adjust the myformname to your actual form name.
if(isset( $_GET['action'])){
$myPage->Show();
}else{
header("Location: myformname/");
die();
}


You can see it in action here.
http://ericrohloff.com/coffeecup/ccforu … crossover/

This is working but it's not tied to any validation or conditionals from the Form Builder. It will work with your confirmation in the Form Builder.
****The above is direct form linking. I'm not using an iframe.****


**** Using Iframe *****
Adjust your Form Builder iframe script to this. Adjust the height to fit and add scrolling="no"
<iframe height="1566" style="border:none; background:transparent; overflow:hidden; width:100%;"
id="fb_iframe" src="myformname/index.html" scrolling="no" >
</iframe>

Working here.
http://ericrohloff.com/coffeecup/ccforum/form-designer/form-designer-crossover/iframe.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,244 posts

Coffeecup put up instruction for hooking the Form Designer to the back end scripts of the Form Builder
https://www.coffeecup.com/help/articles … -designer/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,244 posts

Scroll to first form error at submit
Abide is Foundations form validation plugin. It doesn't have a way to scroll to the form errors so I wrote a function that will. You can tweak the -100 offset to your preference
<script>
$(document).ready(function(){
$('form').submit(function( event ) {
var error = $("form .form-error:visible").length;
if(error>0){
$('html,body').animate({
scrollTop: $('form').find('*').filter('.form-error:visible:first').offset().top - 100
}, 500);
} else{return true;}
});
});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,244 posts

Submitting overlay with scroll to errors
https://ericrohloff.com/coffeecup/ccforum/form-designer/submitting-overlay-fd/
I made a component for easy adding to your form.
Foundation does have a progress bar for uploads and I'll check into that later.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.