Problems with CSS and saving signature image in v5 per tutorial

I am new to v5 and like what I've seen so far. I have run into two issues. I have followed this tutorial.

First, I have added the CSS to put a border around the signature pad, but the border does not show. When I look at the source code of the page, I do not see that the signature pad even uses the .gbs3 canvas CSS tag.

Second, I am unable to save the signature image. The directory I am trying to use exists, and has 755 permissions. There are no errors in the web site log, no errors on the page. The debugger results show Chronoforms has identified the proper file name and directory, but the image is never saved.

Any/all help appreciated.

DATA ARRAY:

Array
(
    [option] => com_chronoforms5
    [chronoform] => YouthWorshipArtsConference2017
    [event] => submit
    [txtYouth1Name] => bill
    [numYouth1Age] => 3
    [txtYouth2Name] => 
    [numYouth2Age] => 
    [txtYouth3Name] => 
    [numYouth3Age] => 
    [txtYouth4Name] => 
    [numYouth4Age] => 
    [txtYouth5Name] => 
    [numYouth5Age] => 
    [txt_Address1] => xxx
    [txt_City] => xxx
    [txt_State] => xx
    [num_ZIP] => xxx
    [txtParentGuardian] => x
    [txt_Phone] => xxxxxxx
    [numMobilePhone] => 
    [txt_Email] => a@bc.com
    [txtEmergencyContactName] => xxx
    [numEmergencyContactPhone] => 
    [numEmergencyContactMobile] => 
    [txtSpecialNeedName1] => 
    [txtSpecialNeed1] => 
    [txtSpecialNeedName2] => 
    [txtSpecialNeed2] => 
    [input_submit_15] => Continue
    [txtAttendees1] => blah
    [txtAttendees2] => 
    [txtAttendees3] => 
    [txtAttendees4] => 
    [txtAttendees5] => 
    [signature] => 20170304-062826_signature.png
    [datepicker97] => 04-03-2017
    [button98] => Submit
    [sig_img] => <img src='http://mtolivebc.org/34a/images/signatures/YouthWorshipArtsConference2017/20170304-062826_signature.png' />
    [ip_address] => 45.37.208.103
)
Array
(
    [signature] => Array
        (
            [name] => 20170304-062826_signature.png
            [link] => http://mtolivebc.org/34a/images/signatures/YouthWorshipArtsConference2017/20170304-062826_signature.png
            [path] => /home5/mtoliveb/public_html/34a/images/signatures/YouthWorshipArtsConference2017/20170304-062826_signature.png
        )

)

ERRORS:

Array
(
)

DEBUG INFO:

Array
(
    [27] => Array
        (
            [Email] => Array
                (
                    [0] => An email with the details below was sent successfully:
                    [1] => To:xxx
                    [2] => Subject:blah
                    [3] => From name:site
                    [4] => From email:noreply@mtolivebc.org
                    [5] => CC:
                    [6] => BCC:
                    [7] => Reply name:
                    [8] => Reply email:
                    [9] => Attachments:
                    [10] => Array
                        (
                        )

                    [11] => Body:
<table>
<tr><td></td><td></td></tr>
<tr><td>Youth 1 Name</td><td>bill</td></tr>
<tr><td>Youth 1 Age</td><td>3</td></tr>
<tr><td>Youth 2 Name</td><td></td></tr>
<tr><td>Youth 2 Age</td><td></td></tr>
<tr><td>Youth 3 Name</td><td></td></tr>
<tr><td>Youth 3 Age</td><td></td></tr>
<tr><td>Youth 4 Name</td><td></td></tr>
<tr><td>Youth 4 Age</td><td></td></tr>
<tr><td>Youth 5 Name</td><td></td></tr>
<tr><td>Youth 5 Age</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>Address</td><td>xxx</td></tr>
<tr><td>City</td><td>xxx</td></tr>
<tr><td>State</td><td>xx</td></tr>
<tr><td>ZIP Code</td><td>xxx</td></tr>
<tr><td>Parent/Legal Guardian</td><td>xxx</td></tr>
<tr><td>Home Phone</td><td>9195622347</td></tr>
<tr><td>Mobile Phone</td><td></td></tr>
<tr><td>Email</td><td>a@bc.com</td></tr>
<tr><td></td><td></td></tr>
<tr><td>Name</td><td>Bill Teague</td></tr>
<tr><td>Phone</td><td></td></tr>
<tr><td>Mobile</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Allergy/Special Need</td><td></td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Allergy/Special Need</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>Attendee(s)</td><td>blah</td></tr>
<tr><td>Attendee(s)</td><td></td></tr>
<tr><td>Attendee(s)</td><td></td></tr>
<tr><td>Attendee(s)</td><td></td></tr>
<tr><td>Attendee(s)</td><td></td></tr>
<tr><td>Custom Code</td><td></td></tr>
<tr><td>Parent/Guardian Signature</td><td></td></tr>
<tr><td>Date</td><td>04-03-2017</td></tr>
</table><br /><br />IP: 45.37.208.103
                )

        )

)

Hi farscape,

Please post a link to the form so I can take a quick look.

Bob

http://mtolivebc.org/index.php/youth-worship-arts-conference

Thanks!

Bob - have you had a chance to take a look?

Thanks!

Hi farscape,

Sorry, I have now looked.

Normally ChronoForms v5 wraps the form in a div with class gbs3 - but that isn't showing for your form. You can add it to the <form> tag in the HTML render form action; or use .chronoform canvas instead

I can't tell much about the image from the front-end. The only thing that looks as if it may be odd is the /34a/ in the URL. You can try setting your site error reporting temporarily to Maximum to see if that shows any error messages, if not, then the next step is to add line of debug code to the custom code for creating the image to see exactly where the error is occurring.

Bob

Bob,

Adding gbs3 to the form tag worked.

The error showed that I had not set up the signature directory properly. I made the change, and it worked!

Thanks!

Bill