Web Form Builder (HTML version) Tips...

User 10077 Photo


Senior Advisor
1,096 posts

WFB with MySQL -- Working with Database Fields
Here is some information about using WFB with a MySQL Database. If you have an existing form that saves to MySQL and...

... you add a field, it will add the field to the MySQL database.

... you remove a field, it leaves the field in the database.

... you remove a field from MySQL that exists on the form, the form will add it back.

... you add a field to both MySQL and WFB where the MySQL field name and the WFB field name are the same and the fieldname is added at the end of the MySQL table, the form writes data to the database properly.

... you add a field to MySQL but not to WFB, the form will write the data correctly to the fields it knows and ignore the ones you added only to MySQL.

...you use the html element and add a tag manually in the html, WFB will not add it to MySQL.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2500399 Photo


Registered User
2 posts

GEO location map
Forgive me if this has been done before; I looked around but couldn't find much on it.

I needed a way to have my Web Form present a Map to the user, with a draggable marker so that they could mark a location on the map, and have the lat/lng coordinates auto-populate a couple of text fields.

Since I couldn't find something close, I created and documented how to do it with 'Leaflet' maps and Web Form Builder. I used leaflet because they utilize several different map sources, including my personal favorite, Open Street Maps.

The "How To" is here: https://dl.dropboxusercontent.com/u/115 … wfbmap.pdf

Hope it helps someone solve a problem. For gathering user defined points of interest, it's pretty handy.

Cheers!

-- Smug
User 187934 Photo


Senior Advisor
20,239 posts

Undo conditionals tied to element without typing.
If you ever use conditionals and want to remove a rule from all of the elements that use it but not type anything you can easily remove it by deleting the element the condition is tied to by doing ctrl + x then do ctrl + v to put the element back into service. This will remove any conditions tied to that element but leave your element intact.
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,239 posts

**** Texting after form submit ****

Text yourself when a form is submitted
Add this to the formcontroller.cls.php at line 72.
It goes directly below these lines.
70 function ShowUserConfirmation ( )
71{

$post = $_SESSION['post'];
$post['name'];// form name field
$post['email'];// form email field
$post['telnumber'];// form telephone number
$phonenumber = '6165555555'; //Your phone number
$carrier = 'messaging.sprintpcs.com'; // Your carrier SMS
mail($phonenumber."@".$carrier, "", $name." filled out your form.\n Their phone number is ".$telnumber."\n Their eamil is ".$email, "From: Your form name <myname@mydomain.com>\r\n");



Text the person after they fill out your form
$post = $_SESSION['post'];
$phonenumber = $post['phonenumber']; //The telephone number form field
$carrier = $post['carrier']; //The carrier SMS text form field
mail($phonenumber."@".$carrier, "", "Thanks for filling out my form.\n Your phone number is ".$phonenumber."\n Your carrier is ".$carrier, "From: Your name <yourname@yourdomain.com>\r\n");


Here's an example.
http://ericrohloff.com/coffeecup/ccforu … xt_submit/
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 228273 Photo


Registered User
32 posts

Centering Form in Bootstrap

For those who may be having issues centering a form in a paragraph element in Bootstrap or in general, this is a solution for you.

Step 1.Once file has been exported - Go to web form folder - open theme folder - open default folder - open css folder - open default.css

step2. Scroll down and find section that contains following code...


/* Theme CSS */
/* This rule will applied to the form container */
#docContainer {
margin: 40px auto;
padding:0px 0px 0px 0px;
width: 600px;
font-family: Helvetica, Arial, Sans-serif;
font-size:13px;
color: #333;
background-color: rgb(246,246,246);
border: 1px solid rgb(193,193,193);
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}


step3. change from
margin: 40px auto;


change to
margin: auto!important;


step 4. save default.css file

step 5. upload form files
User 187934 Photo


Senior Advisor
20,239 posts

Responsive popup form
Paste this script below the script in the head of your page that the form builder provides.

<!-- End of the headers for CoffeeCup Web Form Builder -->
<script type="text/javascript">
// Make ColorBox responsive
jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.maxHeight = '95%';

// ColorBox resize function
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.load(true);
}
}, 100);
}

// Resize ColorBox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
</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 2147646 Photo


Registered User
233 posts

A Bootstrap style form :)
Attachments:

User 1948955 Photo


Registered User
20 posts

Payment testing

I just created a form using the "advanced" payment features (fieldmultiplication, etc) with PayPal. I did not want to pay the minimum price of $30, so I finally added one option for $0.01 to test the form. It worked and I am only out a penny.
User 187934 Photo


Senior Advisor
20,239 posts

Gary Morrison wrote:
Payment testing

I just created a form using the "advanced" payment features (fieldmultiplication, etc) with PayPal. I did not want to pay the minimum price of $30, so I finally added one option for $0.01 to test the form. It worked and I am only out a penny.

http://www.coffeecup.com/help/articles/ … l-sandbox/
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 2855537 Photo


Registered User
2 posts

I want my form displayed when a link(button created with XARA WEB DESIGNER) is clicked. I can't find a way to make it work. It works with a simple text as a link. Any suggestion in how to do it?
Thanks

This is the code that goes into the <body> :

<!-- Start of the body content for CoffeeCup Web Form Builder -->
<a class='fb_iframe' href="./ContactForm/ContactForm.html">Click here</a>
<!-- End of the body content for CoffeeCup Web Form Builder -->


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.