Vanilla Form custom php

Crizz · 2019-01-27 00:12:38

Hi Backlighters,

I want to Vanilla Form v.2.1.0. as contact form on my website and need to do some custom php work.
So far, I managed to upload and set all values for the custom php, but I need to insert a javascript file and a css file into the head section of my html document.
The php path is set correctly as I see an OK then checking it inside the webbrowser.

This needs to be:
<head>

<link rel="stylesheet" href="path/to/css/vanilla-form.min.css">
<script src="path/to/css/vanilla-form.min.js"></script>
</head>

Now, I cannot find any .html document where I need to implant this for BL2.

The manual states the following as I have issues with step 2. Does this have to do with BL2 or not?

Installation - quick start

Step 1
Update PHP File and specify recipients e-mail address by filling emailRecipients and emailSender options. These email addresses will receive all form inquires/messages.

/**
* Recipient's e-mail. To this e-mail email will be sent.
* E.g. Single recipient
* 'emailRecipients' => 'john@domain.com',
*
* E.g. Multiple recipients
* 'emailRecipients' => 'john@domain.com, andy@domain.com',
*/
'emailRecipients' => 'your-email@domain.com',

/**
* If is not empty it sets a header From in e-mail message (sets sender e-mail).
* Note: some hosting servers can block sending e-mails with custom From field in header.
* If so, leave this field as empty.
* E.g. Single recipient
* 'emailSender' => 'john@domain.com',
*/
'emailSender' => 'your-email@domain.com'
After that upload this file on to your web page server. Remember to save URL for this file (it will be used in next step). To double check whether URL is valid open it in your web browser. You should see the word OK on your screen. This means that URL to PHP file is correct and PHP configuration has been done properly.

Step 2
Import Vanilla Form JavaScript file and CSS file into head section of your html document. Double check the path to these files is set correctly.

Tip: Importing minified files will increase speed of loading your web page, due the size of this files is lower.
<head>

<link rel="stylesheet" href="path/to/css/vanilla-form.min.css">
<script src="path/to/css/vanilla-form.min.js"></script>
</head>
Insert HTML Form markup into your website. Make sure that the action attribute in form tag has correct path to PHP file and the method attribute is set to post.

<form action="standard-contact-form.php" method="post" class="vanilla-form" novalidate="novalidate">

<div class="column-50">
<input type="text" name="name" placeholder="Your name" required="required">
<input type="email" name="email" placeholder="Your e-mail" required="required">
</div><div class="column-50">
<input type="tel" name="tel" placeholder="Phone">
<label class="custom-select">
<select name="department">
<option disabled selected>Select department</option>
<option>Sales</option>
<option>Marketing</option>
<option>Customer Support</option>
<option>Other</option>
</select><span></span>
</label>
</div>
<div class="column-100">
<textarea name="message" placeholder="Type your message here..."></textarea>
<label>
<input type="checkbox" name="terms" value="true" required="required"><span></span>
<span class="wrapped-label">I agree to the <a href="#">Terms & Conditions</a>.</span>
</label>
</div>
<div class="column-100 center">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
<footer class="notification-box"></footer>
</form>

Step 3
Finally we need to initialize Vanilla Form. Initialization needs to be done after the form markup is loaded. To do this, you need to set an event listener for DOMContentLoaded event. You can paste following code snippet into your JS file.

document.addEventListener("DOMContentLoaded", function () {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla-form"));
});
Check live example
You prefer jQuery? No problem! Those who use jQuery should initialize form on document ready.

$(document).ready(function() {
var myForm;
myForm = new VanillaForm($("form.vanilla-form"));
});
Check live example
That's all! Looking for more? Check the advanced customization options.

If you like this product and want to encourage me to provide constant improvements please rate it on Envato. Sky's the limit!

Last edited by Crizz (2019-01-27 00:26:05)

rod barbee · 2019-01-27 00:36:55

Use phplugins to add the script and css link to the head section

Crizz · 2019-01-28 04:28:12

You have an example Rod? I do not see any head section in the PHPlugins..

Daniel Leu · 2019-01-28 04:59:41

From phplugins-pangolin-sample.php:

 *    head
 *      - return value ignored
 *      - called immediately before </head>
 *      - encompasses nothing; use to insert content into the <head>

Maybe something like this:

function head() { 
   echo '<link rel="stylesheet" type="text/css" media="all" href="/path/to/css/vanilla-form.min.css">';
   echo '<script src="/path/to/css/vanilla-form.min.js"></script>';
}

Crizz · 2019-01-30 03:51:00

Thanks Daniel, but I cannot get it to work and show under my contact page.

I have added it like this now..

<?php
/*
* TTG Core Elements "PHPlugins" User Hooks v1.2 - initialization mainline
*
* developed by john bishop images (http://johnbishopimages.com)
* for Matthew Campagna of The Turning Gate (http://theturninggate.net)
*
*/

function user_load($style, $path) {
$g_tsvrl = explode(' ', $style); // Extract gallery type
define ('G_STYLE', strtoupper($g_tsvrl[1])); // and set global for later
$g_path = str_ireplace('\\','/',$path); // change \ to /
$chunks = explode('/',$g_path); // and put into array
define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
//define ( 'TTG_SITE', ''); // set new site root for navigation, resources, etc.
}

if (defined('BACKLIGHT_HOOK')) {
require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}

class PHPlugins extends APHPlugins
{
function head() {
echo '<link rel="stylesheet" type="text/css" media="all" href="backlight/vanilla-form/css/vanilla-form.min.css">';
echo '<script src="backlight/vanilla-form/js/vanilla-form.min.js"></script>';
}

Last edited by Crizz (2019-01-30 03:52:27)

Daniel Leu · 2019-01-30 04:47:20

The path is not correct. It is /backlight/vanilla-form/css/vanilla-form.min.css, starting with a slash.

Crizz · 2019-01-30 19:32:31

I changed the path and it seems it still ain't working. Let me see if I can give a detailed description, perhaps someone sees the mistake here.

First the manual for the use of Vanilla form.

Introduction

Thank you for using Vanilla Form. This manual shows you how easy it is to integrate Vanilla Form with your website. Vanilla Form uses JavaScript instructions to send filled data to PHP file, which works on server's end. PHP file parses data and calls PHP native function mail(). Thanks to JavaScript Asynchronous Requests your website doesn't need to reload, which improves your User Experience. Vanilla Form doesn't use annoying captcha, but it has built-in anti bot protection.

Form is an independent software which makes it fast, lightweight and scalable. You don't need to use 3rd party libraries like jQuery. But if you want to, you can easily integrate it with any library you want.

Installation - quick start

Step 1
Update PHP File and specify recipients e-mail address by filling emailRecipients and emailSender options. These email addresses will receive all form inquires/messages.

/**
* Recipient's e-mail. To this e-mail email will be sent.
* E.g. Single recipient
* 'emailRecipients' => 'john@domain.com',
*
* E.g. Multiple recipients
* 'emailRecipients' => 'john@domain.com, andy@domain.com',
*/
'emailRecipients' => 'your-email@domain.com',

/**
* If is not empty it sets a header From in e-mail message (sets sender e-mail).
* Note: some hosting servers can block sending e-mails with custom From field in header.
* If so, leave this field as empty.
* E.g. Single recipient
* 'emailSender' => 'john@domain.com',
*/
'emailSender' => 'your-email@domain.com'
After that upload this file on to your web page server. Remember to save URL for this file (it will be used in next step). To double check whether URL is valid open it in your web browser. You should see the word OK on your screen. This means that URL to PHP file is correct and PHP configuration has been done properly.

Step 2
Import Vanilla Form JavaScript file and CSS file into head section of your html document. Double check the path to these files is set correctly.

Tip: Importing minified files will increase speed of loading your web page, due the size of this files is lower.
<head>

<link rel="stylesheet" href="path/to/css/vanilla-form.min.css">
<script src="path/to/css/vanilla-form.min.js"></script>
</head>
Insert HTML Form markup into your website. Make sure that the action attribute in form tag has correct path to PHP file and the method attribute is set to post.

<form action="standard-contact-form.php" method="post" class="vanilla-form" novalidate="novalidate">

<div class="column-50">
<input type="text" name="name" placeholder="Your name" required="required">
<input type="email" name="email" placeholder="Your e-mail" required="required">
</div><div class="column-50">
<input type="tel" name="tel" placeholder="Phone">
<label class="custom-select">
<select name="department">
<option disabled selected>Select department</option>
<option>Sales</option>
<option>Marketing</option>
<option>Customer Support</option>
<option>Other</option>
</select><span></span>
</label>
</div>
<div class="column-100">
<textarea name="message" placeholder="Type your message here..."></textarea>
<label>
<input type="checkbox" name="terms" value="true" required="required"><span></span>
<span class="wrapped-label">I agree to the <a href="#">Terms & Conditions</a>.</span>
</label>
</div>
<div class="column-100 center">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
<footer class="notification-box"></footer>
</form>

Step 3
Finally we need to initialize Vanilla Form. Initialization needs to be done after the form markup is loaded. To do this, you need to set an event listener for DOMContentLoaded event. You can paste following code snippet into your JS file.

document.addEventListener("DOMContentLoaded", function () {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla-form"));
});
Check live example
You prefer jQuery? No problem! Those who use jQuery should initialize form on document ready.

$(document).ready(function() {
var myForm;
myForm = new VanillaForm($("form.vanilla-form"));
});
Check live example

Step 1 is done, when checking the file in the browser the location is correct as OK is shown.
Step 2, I have added the following to my-phplugins.php file

<?php
/*
* TTG Core Elements "PHPlugins" User Hooks v1.2 - initialization mainline
*
* developed by john bishop images (http://johnbishopimages.com)
* for Matthew Campagna of The Turning Gate (http://theturninggate.net)
*
*/
function user_load($style, $path) {
$g_tsvrl = explode(' ', $style); // Extract gallery type
define ('G_STYLE', strtoupper($g_tsvrl[1])); // and set global for later
$g_path = str_ireplace('\\','/',$path); // change \ to /
$chunks = explode('/',$g_path); // and put into array
define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
//define ( 'TTG_SITE', ''); // set new site root for navigation, resources, etc.
}
if (defined('BACKLIGHT_HOOK')) {
require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}
class PHPlugins extends APHPlugins
{
function head() {
echo '<link rel="stylesheet" type="text/css" media="all" href="/backlight/vanilla-form/css/vanilla-form.min.css">';
echo '<script src="/backlight/vanilla-form/js/vanilla-form.min.js"></script>';
}

In the template of my contact page, I have enabled PHPlugins and selected the my=phplugins.php file.

The HTML form markup code has been checked an has the correct path.

Step 3: Where do I inset the code into a JS file?

If some one is able to help me out, I can provide login details for my site / FTP.

rod barbee · 2019-01-30 22:21:10

Christian,
Are you trying this in a test folder installation of Backlight. I ask because if so, starting the path to the css and script with a slash (/) won’t work, you’ll need the full url.

Also, can you confirm you've uploaded the css file to /backlight/custom/css and that you've uploaded the vanilla-form/ folder (containing a js folder which contains the vanilla-form.min.js file to the backlight/ folder?

As an aside, that vanilla/ folder containing the other stuff would be better off in your backlight/custom/ folder, not directly in the backlight/ folder.
You should place any custom code, images etc. in that /backlight/custom/ folder. It just makes more sense and it's protected from any Backlight updates.
If you move it there, be sure to change the path to it.

For that code in step three, I would add it via phplugins using the script hook.

scripts
* - return value ignored
* - called immediately before </body>
* - encompasses nothing; use to insert content at the very bottom of the page

Use the jQuery version since Backlight is using jQuery already.

You can just add another function in your existing phplugins file:

function scripts()  {
      echo'
          <script>$(document).ready(function() {
    var myForm;
    myForm = new VanillaForm($("form.vanilla-form"));
});</script>
';

Daniel Leu · 2019-01-31 01:40:53

I'm looking at http://www.aimhigh.aero/contact/. The path to the css and javascript file are now correct, and I second Rod's recommendation to move the vanilla folder inside /backlight/custom.

But when I look at the source code of that contact page, I don't see the Vanilla Form markup. You can add this in the page copy section of your contact page. But maybe you are testing this on another page. In this case, a link would be helpful.

rod barbee · 2019-01-31 01:48:11

Once you add that markup to the copy area of the contact page, you may still end up with problems as it has its own footer. Backlight pages already have a footer. So if there's a conflict, you may need to remove the footer markup from the vanilla form code.

Crizz · 2019-02-02 22:45:32

Are you trying this in a test folder installation of Backlight. I ask because if so, starting the path to the css and script with a slash (/) won’t work, you’ll need the full url.

No.

Also, can you confirm you've uploaded the css file to /backlight/custom/css and that you've uploaded the vanilla-form/ folder (containing a js folder which contains the vanilla-form.min.js file to the backlight/ folder?

No, the css file is inside the vanilla-form/css/ folder
Yes, it was uploaded to the backlight folder, now I have moved the entire vanilla-form folder to the /custom folder like you suggested to do so.

If you move it there, be sure to change the path to it.

Done.

I have added the following script as mentioned to my-phplugings.php file

function scripts() {
echo'
<script>$(document).ready(function() {
var myForm;
myForm = new VanillaForm($("form.vanilla-form"));
});</script>
';

This script gives an error on my contact page saying the following:
Unexpected error: syntax error, unexpected '?>', expecting function (T_FUNCTION) in my-phplugins.php on line 538

rod barbee · 2019-02-02 23:06:22

Look at that line in your phplugins file. Is that the end of the file? Is there a ?> in the wrong spot?

Crizz · 2019-02-02 23:24:20

This is line 538: } ?>

rod barbee · 2019-02-03 00:20:14

Is there anything after that?

Daniel Leu · 2019-02-03 02:53:19

Crizz wrote:

function scripts() {
echo'
<script>$(document).ready(function() {
var myForm;
myForm = new VanillaForm($("form.vanilla-form"));
});</script>
';
This script gives an error on my contact page saying the following:
Unexpected error: syntax error, unexpected '?>', expecting function (T_FUNCTION) in my-phplugins.php on line 538

The function is not closed. There is a missing curly closing bracket '}'.

Crizz · 2019-02-04 04:02:48

Is there anything after that?

No

When I add } to the end it says: Unexpected error: syntax error, unexpected end of file in my-phplugins.php on line 537
When I add '}' to the end is says: Unexpected error: syntax error, unexpected end of file, expecting function (T_FUNCTION) in my-phplugins.php on line 537

This is making me nuts...

Daniel Leu · 2019-02-04 04:16:52

Crizz wrote:

Is there anything after that?
No
When I add } to the end it says: Unexpected error: syntax error, unexpected end of file in my-phplugins.php on line 537
When I add '}' to the end is says: Unexpected error: syntax error, unexpected end of file, expecting function (T_FUNCTION) in my-phplugins.php on line 537
This is making me nuts...

If you don't mind, you can email the script and I'll have a look at it.

Crizz · 2019-02-06 16:58:35

Thanks Daniel,

I have send you an email.

Crizz · 2019-02-10 00:27:27

Did you got my mail Daniel?

Daniel Leu · 2019-02-10 03:08:29

Crizz wrote:

Did you got my mail Daniel?

No, I haven't received anything. The spam folder is empty too.

Crizz · 2019-02-15 17:40:09

I send you an email by clicking on the Email link in your profile...
Could you DM me your email address please? Thank you.

rod barbee · 2019-02-15 23:01:16

Use the email link that’s at the left, under his name in all his posts

Crizz · 2019-02-16 00:51:47

I did.. I used that link.. twice now..

rod barbee · 2019-02-16 00:55:45

have you tried the contact form on his web page?

Daniel Leu · 2019-02-16 02:04:07

Crizz wrote:

I send you an email by clicking on the Email link in your profile...
Could you DM me your email address please? Thank you.

I received the email today and replied to it.

Community @ The Turning Gate

#1 2019-01-27 00:12:38

Vanilla Form custom php

#2 2019-01-27 00:36:55

Re: Vanilla Form custom php

#3 2019-01-28 04:28:12

Re: Vanilla Form custom php

#4 2019-01-28 04:59:41

Re: Vanilla Form custom php

#5 2019-01-30 03:51:00

Re: Vanilla Form custom php

#6 2019-01-30 04:47:20

Re: Vanilla Form custom php

#7 2019-01-30 19:32:31

Re: Vanilla Form custom php

#8 2019-01-30 22:21:10

Re: Vanilla Form custom php

#9 2019-01-31 01:40:53

Re: Vanilla Form custom php

#10 2019-01-31 01:48:11

Re: Vanilla Form custom php

#11 2019-02-02 22:45:32

Re: Vanilla Form custom php

#12 2019-02-02 23:06:22

Re: Vanilla Form custom php

#13 2019-02-02 23:24:20

Re: Vanilla Form custom php

#14 2019-02-03 00:20:14

Re: Vanilla Form custom php

#15 2019-02-03 02:53:19

Re: Vanilla Form custom php

#16 2019-02-04 04:02:48

Re: Vanilla Form custom php

#17 2019-02-04 04:16:52

Re: Vanilla Form custom php

#18 2019-02-06 16:58:35

Re: Vanilla Form custom php

#19 2019-02-10 00:27:27

Re: Vanilla Form custom php

#20 2019-02-10 03:08:29

Re: Vanilla Form custom php

#21 2019-02-15 17:40:09

Re: Vanilla Form custom php

#22 2019-02-15 23:01:16

Re: Vanilla Form custom php

#23 2019-02-16 00:51:47

Re: Vanilla Form custom php

#24 2019-02-16 00:55:45

Re: Vanilla Form custom php

#25 2019-02-16 02:04:07

Re: Vanilla Form custom php

Board footer