Web Form Builder (HTML version) Tips...

Mar 24th, 2012 at 04:09 PM
User 1744013 Photo

Hazy
Registered User
89 posts

Finally figured out how to get rid of the spacing at the top of the form when you put the form on a web page:
Go to your form folder/theme/default/css/default.css and open it.
Find the section:

/* 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;
}

Change margin: 40px auto; to something like margin: 2px auto; and the form will nestle itself 2px from whatever element it's under.
You can also change a lot more of the form's styling here as well. Just sayin'.
James Rook
Mar 24th, 2012 at 04:21 PM
User 1744013 Photo

Hazy
Registered User
89 posts

Quick edit for simple changes.
Ever create a form and load it into a formatted page and then find a speeling mistake after it's all done? Don't want to re-do it all in WFB? Open the folder that contains the files that WFB creates and open the your form.html file in your editor. Not the page you loaded the code into. You should see a plain vanilla version of your form. You can then correct the mistake and the form will be correct on your displayed page.
James Rook
Mar 24th, 2012 at 08:30 PM
User 1744013 Photo

Hazy
Registered User
89 posts

A lttle example of using regular expressions for anti-spam.
http://www.rookenterprizes.com/rook-enterprizes/sandbox/regular_expression_test_form.html
I need to learn a lot more about these but I think they'll be very useful.
James Rook
May 1st, 2012 at 10:01 AM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Repeating Similar Form Elements to Keep Styles

It's not the perfect solution, and I'm hoping a global way of updating all particular settings such as all H1 tags and all H3 tags etc. and any other way of similarities will be added, but this will save at least a little bit of time.

You have an element, lets say a check box element or radio button element all set to go. Color of texts and size of texts is all set. Paddings are all set. Now you need 5 more of them... but who wants to sit and redo all the settings over and over and over every time you add a similar (exact type) of element? Not Me! Soooo what can you do about it? It's easy!

1. Click on the element you want to copy.

2. Use Ctrl + C on your keyboard to copy the element.

3. Use Ctrl + V on your keyboard to paste.

That's it! now move the element where you want it and edit the text to reflect the new area and all your text colors and sizes and all paddings are already set!

I know it's not a whole lot of time savings for short little forms, but it's a big time saver for huge forms that have a lot of duplicate types of elements.

Hope that helps :)
Jo

http://elementsinwebdesign.com
Sep 20th, 2012 at 09:40 AM
User 2455815 Photo

Damon Sauer
Registered User
1 post

I had a need to upload a file and then process it. Here was my solution

In the "Redirect to Custom HTML" box I put the html code that redirects the file name to another php file
--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Your Page Title</title>
<meta http-equiv="REFRESH" content="0;url=http://<myserver/path>/processfile.php?file=[file]"></HEAD>
<BODY>
Optional page text here.
</BODY>
</HTML>
--------------------------------------------------

This works okay until you get a file name of something like: "Document + Notes (1/15/2012).txt"

To fix this I changed the following line in ./fbapp/inc/utilities.inc.php

From:
// try the org name first, only if it exists add the random string
$uploadname = $basename;

To:
// try the org name first, only if it exists add the random string
$uploadname = urlencode($basename);

Understanding that this also changes the file name on the server, but for my purposes, this is okay.

Hope this helps someone!
Sep 26th, 2012 at 10:18 AM
User 514644 Photo

PJUK
Registered User
2 posts

How to insert a Coffee Cup Form V.2 into Joomla 2.5
Version 2 Web Form Builder is a great improvement, but when I wanted to put a form in a Joomla 2.5 site the fun started ! Where does the HTML code go and where do the two upload files go ?
I asked support but they had no answer so we had to suss it out ourselves. I'm sure there are other ways to do this but this is what we did.
In a nutshell the CC folder and .php file are uploaded to the website root folder in with all the Joomla folders and files, the HTML is put in a Joomla module and is then edited to point to the two CC files.
So first download and install into Joomla mod_j16html.zip from Dart Creations.
Create an Article and call it say 'ccform'
Now upload the two CC form files to the website root folder
Open Module_j16html ,it appeared as 'Joomla 1.6 HTML Module' in my Module manager.
Select an EMPTY position for it, I used 'Banner 3'
Assign the module to the menu item/s where you want it to appear

Paste the CC form HTML into the module and then edit it to point to the files in the root folder
by putting http://www.mydomainname.com/ in front of the name of the form.
If your form was called 'mytestfom1' it would look like this -

<script type="text/javascript">document.write(unescape("%3Ciframe src=\"http://www.mydomainname.com/mytestform1/ mytestform1.html\" width=\"600\" height=\"951\"allowtransparency=\"true\" scrolling=\"no\" frameborder=\"0\"%3E&lt;a href=\" http://www.mydomainname.com/mytestform1.php\" title=\"mytestform1\"&gt;Check out my CoffeeCup Form&lt;/a&gt;%3C/iframe%3E"));</script>
<noscript>
<iframe width="600" height="951" style="border:none; background:transparent; overflow:hidden;"
src=" http://www.mydomainname.com/mytestform1/mytestform1.html">
&lt;a href=" http://www.mydomainname.com/mytestform1php" title="mytestform1"&gt;Check out my CoffeeCup
Form&lt;/a&gt;
</iframe>
</noscript>

Four lines needed editing I've put these in italics


Easy isn't it ? Hope it is of use.

Malcolm and Peter : Cornwall UK
Apr 24th, 2013 at 08:46 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,241 posts
Online Now

Reg Expression Tester for the Form Builder
http://www.regextester.com/
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
May 2nd, 2013 at 02:18 PM
User 2336860 Photo

ChefScott
Registered User
252 posts

Custom Google Fonts.
Here is a fun one for WFB. Change the font for your forms from one of 652 font families using Google Fonts.

Open up the validation_data.js file and change the font name to one of the other Google Font names.

var data_cssplugins = '["http://fonts.googleapis.com/css?family=Schoolbell"]';

The default.css file needs to be changed as well.
Under #docContainer
Change font-family: 'FontNameHere'

:D

May 16th, 2013 at 09:44 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,241 posts
Online Now

******Capture the url of your forms and submit it.******
1. Make your form and place a text field in it for the url and Label it Referrer and name it referrer.
2.Preview your form in the form builder then right click and view source code.
3. Scroll down the source code until you find the Referrer label. Look above this and you should see something like this.
<div class="fb-item fb-100-item-column" id="item2" style="opacity: 1;"> Make a note of the id name id="item2" Yours might be different.
4. Now go back to the form builder and place a HTML element at the top and paste the code below into it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var referrer = document.referrer;
$("#item2").hide();
$("input[name='referrer']").val(referrer);
})</script>

Now adjust the #item2 to the name of your id that you noted earlier.
Publish and test.
Enjoy!
Thanks JQuery.:cool:

If the above doesn't work try this plain js option.
<script type="text/javascript">
window.onload = function(){
document.getElementsByName("referrer")[0].value = window.location.href;
}
</script>

Adjust the referrer to the name of your input
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
Sep 10th, 2013 at 08:20 AM
User 458848 Photo

sharkyvk
Registered User
39 posts

-*-*-*-*-*- regular expressions for the dutch market-*-*-*-*-*-*-*-*
Here I had some extra help with regular expressions. Actually for the dutch but maybe for others to with minor adjustments.

http://www.molenaar-technologies.nl/reg … mment-1175

I found it very usefull


ps. The plaatsnamen doesnot use the writing 's Gravenhage or 's Hertogenbosch it excepts den Haag or den Bosch.

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.