How Do I Make Form Selections Appear...

User 3063451 Photo


Registered User
13 posts

It's my first post ever here. I am new to the forum. I looked around a little to see if there was already an answer but, there is a lot to look at here and I didn't see what I was looking for. Forgive me for asking if this has already been answered and please show me where the answer is or tell me how to fix the problem.

So, I made a test form similar to the one that I want to use and both come up the same way. I am going to use my test form because it's one of the ones built into the Coffeecup Form Builder Predefined Option Selector which a few of the teams have changed their named since this was made.

I had named my webpage nflpicks.php. After I make the selection and click submit, this is what it come out like in the attached image on my nflpicks.php?action=confirmation. It also gets sent in an e-mail that same way too.

Your name: David
Email: NOYB
Check options: Arizona Cardinals, Atlanta Falcons, Baltimore Ravens, Buffalo Bills, Oakland Raiders, Philadelphia Eagles, Pittsburgh Steelers, San Diego Chargers, San Francisco 49ers, Seattle Seahawks, St. Louis Rams, Tampa Bay Buccaneers
Submitted On: 2023-09-14 13:45:21
IP Address: NOYB
Thank you!

Your form was successfully submitted. We received the information shown above.


I would like the submitted results to be sent Verticially and without the commas if somebody could help me with that please.

Also where is the [_form_results_] defined? What page is that connected to?

I do see on the form.cfg.php page that is easier to look at in my cpanel editor than in my Notpad ++, at the bottom of that page is where I feel that I need to be looking at.

I feel it's something in this part of the code (with the inline) near line 93 on the form.cfg.php:
"inline" : "<center>\n<style type=\"text/css\">\n#docContainer table {margin-top: 30px; margin-bottom: 30px; width:80% !important;}\n#docContainer td {font-size: 12px !important; line-height: 30px; color: #666666 !important; margin: 0px; border-bottom: 1px solid #e9e9e9;}\n#docContainer td:first-child {font-size: 13px !important; font-weight:bold; color: #333 !important; vertical-align:text-top; min-width:50%; padding-right:5px;}\n</style>\n[_form_results_]\n<h2>Thank you!</h2><br/>\n<p>Your form was successfully submitted. We received the information shown above.</p>\n</center>",
"type" : "inline"
},


So, I would like my result to come out verically and with the commas removed. If someone can help me please, I would really appreciate it!

Note: I attached a photo of my Form Builder set up showing what I selected and where I predifined Option Selector.
Attachments:
User 187934 Photo


Senior Advisor
20,245 posts

Hi David,
In the Form Builder select Setting, then select the Confirm Page tab.
Now you can edit the Confirmation message and use the individual input names [firstname], [lastname], etc. instead of the [_form_results_].
You should be able to use the same or similar code for the emails.
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 3063451 Photo


Registered User
13 posts

Eric Rohloff wrote:
Hi David,
In the Form Builder select Setting, then select the Confirm Page tab.
Now you can edit the Confirmation message and use the individual input names [firstname], [lastname], etc. instead of the [_form_results_].
You should be able to use the same or similar code for the emails.


Thank you Eric Rohloff! I appreciate you answering me and offering your help!

I am sorry it took so long to reply back here. I've been tracing things down and trying to see what was going on before I replied back. I've gotten to know the CoffeeCup Web Form Builder better but, I still have a lot to learn.

I had seen your answer that was similar to someone asking for help to remove the IP from showing here. https://www.coffeecup.com/forums/web-form-builder/remove-ip-address-on-form-submit-confirmation/?post_id=299501 I am not sure that is going to fix my problem. The results that it's giving me is what I want to keep but, I would like the teams that I picked in vertical order.

I changed the [form_results] to [checkbox3] just to see if anything would change. In the Coffecup Web Form Builder in the settings>confirm page...at the bottom where it says insert data from...I see we can put our cursor where we want it and select a label from the dropdown and it will put the group name with the brackets wherever our cursor is at. I've attached a photo showing where the insert data is for people that don't know.

From what I discovered is that the codes are writing the text (teams) with commas behind them in a single table cell from left to right. To me, I think they should be in separate table cells.

This was the result that I got from the way you see it set up in the attached photo:

Arizona Cardinals, Atlanta Falcons, Baltimore Ravens, Oakland Raiders, San Diego Chargers, St. Louis Rams, Washington Redskins2023-09-19 16:08:06
Thank you!

Your form was successfully submitted. We received the information shown above.

Four of those teams have changed their names...just saying it because the option list is outdated.

This is part of the source code that I got from view source code in my e-mail.
Sent In The E-mail. You can see that it created one full table cell with commas separating the teams that I selected.
<td>Detroit Lions, Green Bay Packers, Houston Texans, New Orleans Saints, New York Giants, New York Jets, St. Louis Rams</td>


If you look at that above you can see it's one line written with no table cells separating them. I want it to be more like this without the commas and in separate table cells like I have in the code below.

That was for the e-mail. It comes out similar in the confim page.

I think the code should be more like this without the commas.

<td>Detroit Lions</td>
<td>Green Bay Packers</td>
<td>Houston Texans</td>
<td>New Orleans Saints</td>
<td>New York Giants</td>
<td>New York Jets</td>
<td>St. Louis Rams</td>


I don't think anymore that changing the display from:
display:inline-block;

to:

display:block;

...is going to help any with the way the selections are written in one line of text with commas like that. A following code would have to be added to that to covert all of those selections into table form and removing the commas.

I wonder what file it is that writes up the initial form results or what file it is where the form_result info get's retrieved from.

The initial form code starts here (my filename is nflpicks):

<style>#docContainer .fb_cond_applied{ display:none; }</style><noscript><style>#docContainer .fb_cond_applied{ display:inline-block; }</style></noscript><form class="fb-toplabel fb-100-item-column selected-object" id="docContainer"
action="../nflpicks.php" enctype="multipart/form-data" method="POST" novalidate="novalidate"
data-form="manual_iframe">


My nflpicks.php file connects to the /fbapp/php/config.inc.php file which connects to the form.cfg.php file and other places.

It looks like the tables for the forms might be created here in this form:
messagepostmerger.cls

private function _FindLabelByFieldName ( $name ) {

$label = Config::GetInstance()->GetConfig( 'rules', $name, 'label' );
return $label ? $label : $name;
}


private function _FormatFormContents ( $useHtmlEntities = true ) {

$form_contents = '<table style="width: 100%;"><tbody style="vertical-align: text-top;line-height: 30px;">';

// use the rules to list output in the right order
foreach( Config::GetInstance()->GetFieldNames() as $name )
{
// first check if the post value exist
if( isset( $this->post[ $name ] ) && !empty( $this->post[ $name ] ) ) {

$form_contents .= 'messagepostmerger.cls<td style="font-weight: bold; width:30%;">' . $this->_FindLabelByFieldName( $name )
. ':</td><td>'. $this->_FormatFieldValue( $name, $this->post[ $name ], $useHtmlEntities ) . '</td></tr>';

}
// check the file uploads only if the post[] doesn't exist,
// this avoids listing the same file twice which may happen when
// saving for sqlite and csv adds these fields to post, but
// for mysql with files stored in a table this doesn't happened
elseif( isset( $this->uploads[ $name ] ) ) {

$form_contents .= '<tr><td style="font-weight: bold; width:30%;">' . $this->_FindLabelByFieldName( $name )
. ':</td><td>'. $this->uploads[ $name ][ 'orgname' ] . '</td></tr>';
}
}


I am little tired from tracing stuff down. I hope I am not wasting anybody's time including my own. I did write up a ticket with coffeecup by accident. I thought I was asking for help in the forum when I wrote them. The service person asked me for my saved .fb file and I sent it to them. I heard back from them a couple of times asking me for my .fb file and they asked me some questions and I answered and I never heard back from them again. I don't know if they are still looking into it but, I don't think they are.

This is pretty important for me to get working with the checkbox selections working where it comes out in vertical form for my music request list. The DJ program that I use allows us to drag and drop a .txt file with artist - title (remix) of a list that we create into a Virtual Folder or a playlist with info in it and it will find the songs for us and place the songs that it matches up to in that .txt file list.

I am going to take a break here. I am tired of looking at all of this but, I am impressed with all of the coding that I see in the form builder and especially that part of code in the utilities.inc that helps prevent injections from disguised files. A group that I was working with couldn't figure how to prevent that five years ago in a script that I was helping out with.

If someone can help figure out my issue, I would really appreciate it. I need the checkbox form to list the selections vertically. I assume we have to come up with a code that creates a tables cell for each checkbox selection and use a str_replace to remove the commas.
User 187934 Photo


Senior Advisor
20,245 posts

How about putting each team in its own checkbox so that it has it's own name?
I think that would be faster than hacking the form code.
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 3063451 Photo


Registered User
13 posts

Eric Rohloff wrote:
How about putting each team in its own checkbox so that it has it's own name?
I think that would be faster than hacking the form code.


Hi Eric Rohloff,

Thanks for replying back to me so quickly!

How do you mean? There's 32 teams. Do you mean make 32 inidivual checkboxes?

This is a basic checkbox that I added to the form that's on the html page that I added from the elements section and I added a 4th selection to it. I was testing both the NFL team list out and this one. This 4 checkbox selection comes out the same way after I submit it. I am using this one because it's easier to work with 4 than 32 checkbox selections.

<div class="fb-checkbox">
<label id="item4_0_label"><input name="checkbox4[]" id="item4_0_checkbox" type="checkbox" data-hint="" value="Check 1" /><span class="fb-fieldlabel" id="item4_0_span">Check 1</span></label>
<label id="item4_1_label"><input name="checkbox4[]" id="item4_1_checkbox" type="checkbox" value="Check 2" /><span class="fb-fieldlabel" id="item4_1_span">Check 2</span></label>
<label id="item4_2_label"><input name="checkbox4[]" id="item4_2_checkbox" type="checkbox" value="Check 3" /><span class="fb-fieldlabel" id="item4_2_span">Check 3</span></label>
<label id="item4_3_label"><input name="checkbox4[]" id="item4_3_checkbox" type="checkbox" value="Check 4" /><span class="fb-fieldlabel" id="item4_3_span">Check 4</span></label>
</div>


I made 4 individual checkboxes but, I am pretty sure that I don't know what you mean. I am adding it in the photo. This would not work out if I asked a client to pick out 10 songs out 40 or 200 songs in a list when I make it:
Require 10 options to be checked.

Check the attachment and tell me if that's what you mean please if you would like.
Attachments:
User 187934 Photo


Senior Advisor
20,245 posts

Yes, each in its own like you did. Then you return the values of each input. This was only a suggestion to make things faster. If you want to set a min number that needs to be checked with this method, I can probably write a custom script to help with that. I didn't see the min as a requirement in any of the other posts. Is there any other things you may want to restrict the users on? I may be able to find the lines of code to hack to proper return.
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 3063451 Photo


Registered User
13 posts

Eric Rohloff wrote:
Yes, each in its own like you did. Then you return the values of each input. This was only a suggestion to make things faster. If you want to set a min number that needs to be checked with this method, I can probably write a custom script to help with that. I didn't see the min as a requirement in any of the other posts. Is there any other things you may want to restrict the users on? I may be able to find the lines of code to hack to proper return.


Thank you Eric! I appreciate you offering to help me with this. I've been poking around the code for a while now and I am learning more and more about the Coffecup Web Form Builder Program every day.

For the record, I am not touching the code in the main program. I am only messing around with changing the code either through the Coffecup Web Form Builder using the settings>Confirm Page>Redirect to Custom HTML page (which I found the code results when we view the confirm page was cleaner) or I am editing the code on my exported files that I manually upload to my server. I find "using the confirm email and the notifications" is not as friendly to edit the code as it is to edit the Confirm Page thru the Coffecup Web Form Program. I am guessing coffecup want us to see the preview after we get done the page to show what it looks like. I wish there was a reset or restore button like on the confirm page.

Before my fix the confirm results look like this without the <td></td> tags.

<td>Arizona Cardinals, Atlanta Falcons, Baltimore Ravens, Buffalo Bills, Carolina Panthers, Chicago Bears</td>

That is the outerHTML code that I copied from right clicking and inspecting the highlighted text. It's one row with teams selected with commas and spaces separating them.

For my fix for the Confirm page coding in the redirect to custom HTML page in the Confirm settings:
For the Confirm page I added "teams" ID to the <div> like this below:

<div id="teams">[_form_results_]</div>


Then I added this code right below that:

<script>
var list = document.getElementById("teams");
var items = list.innerHTML.split(",");
list.innerHTML = items.join("<br>");
</script>


The outerhtml code result in the html look like this on the confirm result page:
<td>Arizona Cardinals<br>
Atlanta Falcons<br>
Baltimore Ravens<br>
Buffalo Bills<br>
Carolina Panthers<br>
Chicago Bears</td>


That worked perfectly for the Confirm page. The teams I selected came out in a Vertical display.

For the e-mails, I wasted lots and lots of time trying to get the code to change. I found where the comma is being created created for the Confirm and the e-mails around line 199 in the /fbapp/php/messagepostmerger.cls.php file. Removing it the comma will also remove the commas in the e-mails. It doesn't effect the .csv file which we would want commas for.

This is the code for the e-mails that we can try to manipulate:

$value = implode(', ', $value);


We can removed the comma and leave no space between the single quotes like this code below:

$value = implode('', $value);


I wasted a lot of time with this line of code. Both of these solutions should have worked but, there is some security codes that aren't allowing either of the codes to work when they get e-mailed out.

This below should have worked:

$value = implode("\n", $value);


And this too below should have worked the same at the javascript with the <br> at the end of each selection.

$value = nl2br( $value );


I think something is filtering out my text when it gets e-mailed out but, I am not sure what. Maybe I am looking at it in the wrong place. For the record, I did try to edit the confirm e-mail message both with a script which it gave me trouble with and I tried adding some .css with a div id to the [_form_results_] in the e-mail and I failed to get it to work.

Maybe there is something you or somebody else can figure out. I did switch my use user.cfg file to use smtp e-mails too. There is just way too much coding to look at. I actually feel that the checkbox and list selection can be improved in the coffecup web form program by making our e-mails display the selected results in a vertical display...or give users like us the option to come out side by side with commas or in a vertical display.
User 3063451 Photo


Registered User
13 posts

Please note that I am doing this with exported Coffecup Web Form files. I wouldn't want to screw up the main code so, I leave the main code alone...for now.

There is a solution that worked for me that changed both my submit confirm page and my e-mail where I didn't use a javascript code. The solution I came up with does not mess with the .csv wring code at all also.

I started from a fresh new start by creating a new Form. This time I used a listbox and a checkbox.

In the /fbapp/php/messagepostmerger.cls.php file go to around line 197 and find this code:

if( is_array( $value ) )
{
$value = implode(', ', $value);
}


and don't touch the elseif line of code but, replace that code above with $selection or whatever name you want to use. Just make sure both of them match up. Here's the code to use to replace the code above this:

// If the value is an array, convert it to a table.
if( is_array( $value ) ) {
$output = '<table>';
foreach ($value as $selection) {
$output .= '<tr><td>' . $selection . '</td></tr>';
}


This works but, there is a space between each of the selections and part of the table is showing between the selections too. I am trying to pinpoint which and where the .css file code is to change to move the checkbox and list selections to the left. I will post the .css part when I figure that out. It didn't seem to matter that I the .css in the settings>confirmation e-mail and confirm page in the Coffecup Web Form Builder software.

Another note: The listbox that I put on my website was a little buggy when I had highlighted two options that I wanted to use, I went and clicked on my selections with the checkbox, it unselected my two highlighted selection in the listbox
User 3063451 Photo


Registered User
13 posts

Don't use that code I suggested in the above post. I was a little rusty with coding when I came in here asking for help. I didn't work with coding for a couple of years. Actually when I bought the Coffecup Package, I thought it looked daunting to use. I didn't use it for a year until I needed the form builder for my Class Reunion this past sumer. I wish I knew back then what I know now.

For using checkbox and list box selections which when looking at the form online at the list selection you can hold ctrl and left click on more than one list selection to get more than one pick. My thought on the list box selection is I can't see what to use it for. I think it's better to use the radio buttons.

Let me show you how to do it. I am using exported files from my Coffecup Web Form Builder and I am uploading the files to a folder on my server so, I am letting you know that I am not messing around with the main program.

Here's a working code to make the checkbox lists and list box selection show in a vertical display. Around line 197 on the

The default code before the elseif is:

if( is_array( $value ) )
{
$value = implode(' , ',$value);
}


If you don't want the comma then simply remove it like this below where the separator is.

if( is_array( $value ) )
{
$value = implode(' ',$value);
}


For my person code I worked a lot of hours at this. I tried to use a simple </br> that should have worked like the code below. It sent the e-mail to my cpanel e-mail perfectly which is pretty much plain text e-mails but, the message going to my Yahoo e-mail was coming out with my checkbox selection side by side. What I didn't catch on for a day or so was that my cpanel e-mail forwards my messages to the same Yahoo e-mail that I was using for the tests on my form and my forwarded message format was being changed so, the message was side by side. I don't know if it was the css in the Coffecup Web Form Builder that I was using or if it was just Yahoo. Yahoo and Gmail both ended up with my checkbox selections side by side after I used the code below. My Hotmail e-mail showed my checkbox selections in a vertical display. Here's the code that I thought should have worked. I didn't want to have to change the code too much so, I was trying this below. This will show up correctly in Hotmail but, not Yahoo or Gmail.

if( is_array( $value ) )
{
$value = implode('</br>' ,$value);
}


This code works in all formats and it doesn't seem to matter if you make your form checkbox selections with one two or three columns. I test this with my cpanel e-mail, yahoo, hotmail, and gmail. I was using $team for my NHL Teams. You can change that to want as long as it doesn't match up to any in the Coffecup Program. Change the default code that I mentioned above and before the elseif line to:

// If the value is an array, add div tags
if( is_array( $value ) ) {
foreach ($value as $team) {
$output .= '<div>' . $team . '</div>';
}
return $output;
}



The display should look similar to this with the checkbox selections to the right of the for example of the Favorite
Favorite NHL Teams: Anaheim Ducks
Boston Bruins
Buffalo Sabres
Calgary Flames
Carolina Hurricanes
Chicago Blackhawks
Colorado Avalanche
Columbus Blue Jackets

It didn't affect anything in the .csv file after I checked it. The .csv is supposed to come out with commas which it does. I didn't test this with an online database but, I will later when I do my music selection form for my DJ Clients.

If you need any help then ask here and I will try to help if I can!
User 187934 Photo


Senior Advisor
20,245 posts

Nice job David.:cool:
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.