Engagement bar

Report · Mar 27, 2017

Hi, does anyone know how to create a customer engagement bar in Dreamweaver bootstrap? I have searched online and been unable to find anything helpful.

Thank you.

Carolyn

Report · Mar 27, 2017

I am curious, what is a customer engagement bar?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 27, 2017

Sorry, it's actually called a user engagement bar and it provides all the means of engagement you offer in one box, making iy easier for customers to connect with your business.

My business is already on social media and I am trying to get more engagement on my website.

Carolyn

Report · Mar 27, 2017

This is the code I found in an article, however, it does not work.

CONNECT WITH WEBCORPCO

</h2>

<a class="ct-newsletter-inline__facebook" target="_blank" href="/"><i class="fa fa-facebook"></i><span>facebook</span></a> <a class="ct-newsletter-inline__twitter" target="_blank" href="/"><i class="fa fa-twitter"></i><span>twitter</span></a>

<label for="newsletter">Get Updates from WEBCORPCO in your inbox</label>

</div>

</form>

</div>

</section>

Thanks again.

Carolyn

Report · Mar 28, 2017

carolyn@10541 wrote
This is the code I found in an article, however, it does not work.

It's not going to work unless you add the font awesome library link, which is needed to show the Facebook/Twitter logos:

Plus you will need to add the url of your own Facebook and Twiter pages:

That's the easy part.

If you want to compile a list of email adresses from a user input form on your page then you need a way of processing the information from the form once the SEND button is clicked, using a server-side method like php.

Have you processed a form before? If so then you would use the same procedure:

You would use a server side language like php to get the information from the form:

<?php

// dont process the form until the submit button is clicked

if(isset($_POST['submit'])) {

// check the email is a valid email

$email_address = filter_input(INPUT_POST, 'newsletter', FILTER_VALIDATE_EMAIL);

// if email address is not valid assign an error message to a php variable

if(!$email_address) {

$email_error = "Please supply a valid email";

}

else {

// if email address is vaild assign a sucessfully sent message to a php variable

$email_sent = "Your email address has been sent successfully";

// process the form and send the information

$email_from = 'youremail@domain.com'; // update the email address to that of your own

$email_subject = "New Subscriber from Website";

$email_body = "Please sign me up to your latest news.\n";

$email_body .= "Email Address: $email_address\n";

$to = "youremail@domain.com"; // update the email address to that of your own

$headers = "From: $email_from \r\n";

$headers .= "Reply-To: $email_address \r\n";

mail($to,$email_subject,$email_body,$headers);

}

?>

If you use the php script above (use your own email address in place of youremail@domain.com) and add name="submit" to your button tag as shown below:

Output the error message to the page. Copy and paste the below php block of code to somewhere on the page you want to show the error or success message:

<?php

if(isset($email_error)) {

echo "<p style='color: red;'>$email_error</p>";

}

else {

echo "<p>$email_sent</p>";

}

?>

Of course all of this requires that the page be named with a .php extension.

All the php code goes on the same page as the 'engagement bar' code as you call it. The main block of php at the top of the page before any other code, the error/success php code you can include anywhere in the page you feel is appropriate. When the SEND button is clicked if you leave the form action="" field blank the page goes back to itself and processes the form.

You dont need the enctype="multipart/form-data" part of the form tag either unless you are intending to send an attachment so keep it as simple as possible. For the opening <form> tag just use:

Report · Mar 28, 2017

When I add the font awesome link it changes to color of my nav bar. I don't want that to happen.

Thanks.

Sent from my iPhone

Report · Mar 28, 2017

I have not processed a form. When I tried it in the past I couldn't get the form to work.

Sent from my iPhone

Report · Mar 28, 2017

Ask your hosting provider if they support contact form-to-email scripts and if they have any you can use. Some hosts have scripts set-up on their servers; others do not. If your hosting provider does not have ready-made scripts , you'll need to find or write your own form processing scripts in a server-side language supported by your hosting plan (PHP, ASP.net, Perl, etc...).

Failing all that, you could use outside services to handle your contact forms and social media engagement bar. No coding skills required. See links below.

Online Form Builder with Cloud Storage Database | Wufoo

AddThis - Get more likes, shares and follows with smart website tools

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 28, 2017

Thank you to everyone who responded.

Carolyn

Report · Mar 28, 2017

carolyn@10541 wrote
Thank you to everyone who responded.

Did you give up or did you get something working?

Report · Mar 28, 2017

I didn't give up and no it's not working. I am going to take Nancy O's

suggestion and speak with my provider about the scripts. If anyone has

other suggestions, I am still open to them.

Carolyn

Report · Mar 28, 2017

carolyn@10541 wrote
I didn't give up and no it's not working. I am going to take Nancy O's
suggestion and speak with my provider about the scripts. If anyone has
other suggestions, I am still open to them.
Carolyn

Does your hosting support php and if so does it support the php mail function? You must find that out initially. If it does the script I supplied given that you integrate it correctly will work, it's been tried and tested.

Report · Mar 28, 2017

Okay, now I am completely frustrated. I am really hoping someone can help me. Yes it's about the user engagement bar.

Here is the HTML I am using:

<section class="ct-newsletter-section hidden-print"> <div class="container"> <h2 class="ct-section-header"> CONNECT WITH WEBCORPCO </h2> <div class="ct-newsletter-inline"> <a class="ct-newsletter-inline__facebook" target="_blank" href="/"><i class="fa fa-facebook"></i><span>facebook</span></a> <a class="ct-newsletter-inline__twitter" target="_blank" href="/"><i class="fa fa-twitter"></i><span>twitter</span></a> <div class="ct-newsletter-inline__form"> <form class="ct-newsletter" action="/" enctype="multipart/form-data" method="post" name="contentForm"> <label for="newsletter">Get Updates from WEBCORPCO in your inbox</label> <div class="form-inline"> <input id="newsletter" name="newsletter" placeholder="Enter Your Email Address" type="text"> <button class="btn btn-dark" type="submit">SEND</button> </div> </form> </div> </div> </div> </section>

This is the "connect bar" CSS:

.ct-newsletter-section .container {

width: 100%;

max-width: 1360px;

}

.ct-section-header {

font-family: 'Raleway', sans-serif;

font-weight: 900;

color: #101f1d;

font-size: 35px;

text-transform: uppercase;

text-align: center;

padding-top: 45px;

letter-spacing: 1.25px;

margin-bottom: 5px;

}

@media (max-height: 766px)

.ct-newsletter-section .ct-section-header {

padding-top: 60px;

}

@media only screen and (min-width: 1399px)

.ct-newsletter-section .ct-section-header {

padding-top: 135px;

letter-spacing: 1.4px;

margin-left: -12px;

}

.ct-section-header {

padding-top: 35px;

}

.ct-newsletter-inline {

display: table;

width: 100%;

color: white;

margin: 69px 0 138px;

text-align: center;

}

@media (max-height: 766px)

.ct-newsletter-inline {

margin: 40px auto 70px;

width: 90%;

}

.ct-newsletter-inline__facebook {

background-color: #3b5997;

}

@media only screen and (min-width: 1024px)

.ct-newsletter-inline > * {

display: table-cell;

vertical-align: middle;

height: 213px;

}

.ct-newsletter-inline__facebook, .ct-newsletter-inline__twitter {

width: 16%;

}

a, a:hover, a:focus, a:active {

text-decoration: none;

color: inherit;

}

a {

-webkit-transition: all 250ms cubic-bezier(0.55, 0, 0.1, 1);

transition: all 250ms cubic-bezier(0.55, 0, 0.1, 1);

}

.ct-newsletter-inline__facebook i, .ct-newsletter-inline__twitter i {

font-size: 109px;

padding-top: 25px;

}

.ct-newsletter-inline__facebook span, .ct-newsletter-inline__twitter span {

font-family: 'Raleway', sans-serif;

font-size: 13px;

text-transform: uppercase;

font-weight: 600;

letter-spacing: 4px;

display: block;

padding-top: 15px;

}

.ct-newsletter-inline__twitter {

background-color: #2fc2ee;

}

@media only screen and (min-width: 1024px)

.ct-newsletter-inline > * {

display: table-cell;

vertical-align: middle;

height: 213px;

}

.ct-newsletter-inline__facebook, .ct-newsletter-inline__twitter {

width: 16%;

}

.ct-newsletter-inline__facebook i, .ct-newsletter-inline__twitter i {

font-size: 109px;

padding-top: 25px;

}

@media only screen and (min-width: 1024px)

.ct-newsletter-inline__twitter span {

padding-top: 8px;

}

.ct-newsletter-inline__facebook span, .ct-newsletter-inline__twitter span {

font-family: 'Raleway', sans-serif;

font-size: 13px;

text-transform: uppercase;

font-weight: 600;

letter-spacing: 4px;

display: block;

padding-top: 15px;

}

.ct-newsletter-inline__form {

background-color: #ea2527;

padding: 24px;

}

@media only screen and (min-width: 1024px)

.ct-newsletter-inline > * {

display: table-cell;

vertical-align: middle;

height: 213px;

}

.ct-newsletter-inline__form {

width: 68%;

}

.ct-newsletter-inline__form .ct-newsletter {

text-align: left;

width: 100%;

max-width: 668px;

margin: 0px auto;

}

.ct-newsletter-inline__form label {

font-family: 'Raleway', sans-serif;

font-size: 22px;

font-weight: 500;

text-transform: uppercase;

padding: 17px 0 14px 6px;

letter-spacing: 0.3px;

}

@media only screen and (min-width: 1399px)

.ct-newsletter-inline__form .form-inline {

position: relative;

}

.ct-newsletter-inline__form .form-inline {

display: table;

width: 100%;

height: 65px;

}

.ct-newsletter-inline__form .form-inline input {

width: 50%;

width: calc(100% - 137px);

padding: 0 40px;

font-size: 16px;

letter-spacing: 0.3px;

color: #111f1d;

text-transform: uppercase;

}

.ct-newsletter-inline__form .form-inline input, .ct-newsletter-inline__form .form-inline .btn {

display: table-cell;

vertical-align: middle;

height: 65px;

border: none;

margin: 0;

}

.ct-newsletter-inline__form .form-inline .btn {

width: 137px;

font-family: 'Oswald', sans-serif;

font-size: 25px;

padding-left: 0;

padding-right: 3px;

text-align: center;

}

.ct-newsletter-inline__form .form-inline input, .ct-newsletter-inline__form .form-inline .btn {

display: table-cell;

vertical-align: middle;

height: 65px;

border: none;

margin: 0;

}

.btn.btn-dark {

background: #111f1d;

color: white;

}

.btn {

font-size: 15px;

padding: 22px 46px 18px;

line-height: 1;

text-transform: uppercase;

border: none;

border-radius: 0;

position: relative;

letter-spacing: 0.3px;

}

@media (max-width: 1398px) and (min-width: 1024px)

.ct-newsletter-inline > * {

height: 180px;

}

.ct-newsletter-inline__facebook {

background-color: #3b5997;

}

@media only screen and (min-width: 1024px)

.ct-newsletter-inline > * {

display: table-cell;

vertical-align: middle;

height: 213px;

}

.ct-newsletter-inline__facebook, .ct-newsletter-inline__twitter {

width: 16%;

}

a, a:hover, a:focus, a:active {

text-decoration: none;

color: inherit;

}

.ct-newsletter-inline__facebook i, .ct-newsletter-inline__twitter i {

font-size: 109px;

padding-top: 25px;

}

.ct-newsletter-inline__facebook span, .ct-newsletter-inline__twitter span {

font-family: 'Raleway', sans-serif;

font-size: 13px;

text-transform: uppercase;

font-weight: 600;

letter-spacing: 4px;

display: block;

padding-top: 15px;

}

.ct-newsletter-inline > * {

display: table-cell;

vertical-align: middle;

height: 213px;

}

This is what I am supposed to add at the end of my web page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel="stylesheet" href="connect-bar.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

This is the message I receive when it is all said and done. Please know that I don't know php.

Method Not Allowed

The HTTP verb used to access this page is not allowed.

Web Server at cjdesignandconsulting.com

In addition, what I am adding to the end of the web page changes the color of my nav bar.

I would appreciate any and all thoughts.

Thank you.

Carolyn

Report · Mar 28, 2017

Carolyn, you are not giving us the complete picture. You are saying that the addition of lines at the end of the web page changes the colour of the nav bar, but we do not see a nav bar.

May I suggest that you first of all upload the following file, named phpinfo.php to your remote server so that we can see that the server recognises php-code. This is necessary if you want to send an email from your page.

contents of phpinfo.php:

<?php
// Show all information, defaults to INFO_ALL
phpinfo();
?>

.

Also, to avoid further confusion, please upload the page to a temporary location by calling it junk.html or similar. Give us the URL so that we can see what you are doing in situ.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 29, 2017

I'll keep trying. Copy all of the code below. Insert it into a new Dreamweaver document. Save it as test_subscribe.php - upload it to your remote server. Browse out to the file using your browser. If you get a blank page then your server is most likely not set up for processing php pages. If you see something then hit the 'SEND' button and see what happens. (Dont forget you NEED to change 'youremail@domain.com' in the 2 instance in the php block of code below to your own email address. If your server is all set up to process php and can use the php mail function it will work.

<?php

if(isset($_POST['submit'])) {

$email_address = filter_input(INPUT_POST, 'email_address', FILTER_VALIDATE_EMAIL);

if(!$email_address) {

$email_error = "Please supply a valid email address";

}

else {

$email_sent = "Your email address has been sent successfully";

$email_from = 'youremail@domain.com';// update the email address to that of your own

$email_subject = "New Subcriber from Website";

$email_body = "Please sign me up to your latest news.\n";

$email_body .= "Email Address: $email_address\n";

$to = "youremail@domain.com";// update the email address to that of your own

$headers = "From: $email_from \r\n";

$headers .= "Reply-To: $email_address \r\n";

mail($to,$email_subject,$email_body,$headers);

}

?>

<!DOCTYPE html>

<html>

<head>

<title>Engage Customer</title>

<style>

.subscribe-container {

font-family: 'Raleway', sans-serif;

width: 85%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.subscribe-container {

width: 100%;

}

.subscribe-container h2 {

font-size: 35px;

margin: 0;

padding: 30px 0;

font-weight: 700;

text-transform: uppercase;

text-align: center;

}

.subscribe {

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

@media screen and (max-width: 768px) {

.subscribe {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

.facebook {

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

text-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 16%;

background-color: #3B5997;

}

@media screen and (max-width: 768px) {

.facebook {

width: 50%;

padding: 30px;

}

.subscribe a {

font-weight: 500;

text-decoration: none;

color: #fff;

text-transform: uppercase;

letter-spacing: 3px;

}

.subscribe a {

width: 100%;

display: block;

text-align: center;

}

.subscribe a i {

font-size: 25px;

}

.twitter {

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

text-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 16%;

background-color: #2FC2EE;

}

@media screen and (max-width: 768px) {

.twitter {

width: 50%;

padding: 30px;

}

.subscribe-form {

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

width: 68%;

padding: 35px 0;

background-color: #EA2527;

}

@media screen and (max-width: 768px) {

.subscribe-form {

width: 100%;

}

.subscribe-form form {

width: 80%;

margin: 0 auto;

}

.subscribe-form label {

font-size: 22px;

font-weight: 400;

text-transform: uppercase;

color: #fff;

}

.subscribe-form input {

font-size: 16px;

width: 100%;

padding: 15px;

text-transform: uppercase;

}

.subscribe-form p {

font-size: 16px;

color: #fff;

font-weight: 600;

}

.subscribe-form button {

background: #111f1d;

color: white;

font-size: 20px;

padding: 15px 25px;

margin: 15px 0 0 0;

text-transform: uppercase;

border: none;

letter-spacing: 1px;

}

</style>

</head>

<body>

<div>

<h2>CONNECT WITH WEBCORPCO</h2>

<div class="facebook"><a target="_blank" href="/"><i class="fa fa-facebook"></i><br>facebook</a></div>

<div class="twitter"><a target="_blank" href="/"><i class="fa fa-twitter"></i><br>twitter</a></div>

<label for="emai_address">Get Updates from WEBCORPCO in your inbox</label>

</form>

<?php

if(isset($email_error)) {

echo "<p>$email_error</p>";

}

else {

echo "<p>$email_sent</p>";

}

?>

</div>

</div>

</section>

</div>

</body>

</html>

Report · Mar 29, 2017

Thank you Osgood. Trying this now.

Report · Mar 29, 2017

Osgood,

This is what I get when opening the .php file in my browser:

if(isset($_POST['submit'])) {

$email_address = filter_input(INPUT_POST, 'email_address', FILTER_VALIDATE_EMAIL);

if(!$email_address) {

$email_error = "Please supply a valid email address";

}

else {

$email_sent = "Your email address has been sent successfully";

$email_from = 'carolyn@cjdesignandconsulting.com';// update the email address to that of your own

$email_subject = "New Subcriber from Website";

$email_body = "Please sign me up to your latest news.\n";

$email_body .= "Email Address: $email_address\n";

$to = "carolyn@cjdesignandconsulting.com";// update the email address to that of your own

$headers = "From: $email_from \r\n";

$headers .= "Reply-To: $email_address \r\n";

mail($to,$email_subject,$email_body,$headers);

}

}

?>

.subscribe-container {

font-family: 'Raleway', sans-serif;

width: 85%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.subscribe-container {

width: 100%;

}

.subscribe-container h2 {

font-size: 35px;

margin: 0;

padding: 30px 0;

font-weight: 700;

text-transform: uppercase;

text-align: center;

}

.subscribe

@media screen and (max-width: 768px) {

.subscribe {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

.facebook

@media screen and (max-width: 768px) {

.facebook {

width: 50%;

padding: 30px;

}

.subscribe a {

font-weight: 500;

text-decoration: none;

color: #fff;

text-transform: uppercase;

letter-spacing: 3px;

}

.subscribe a

.subscribe a i {

font-size: 25px;

}

.twitter

@media screen and (max-width: 768px) {

.twitter {

width: 50%;

padding: 30px;

}

.subscribe-form

@media screen and (max-width: 768px) {

.subscribe-form {

width: 100%;

}

.subscribe-form form

.subscribe-form label {

font-size: 22px;

font-weight: 400;

text-transform: uppercase;

color: #fff;

}

.subscribe-form input {

font-size: 16px;

width: 100%;

padding: 15px;

text-transform: uppercase;

}

.subscribe-form p {

font-size: 16px;

color: #fff;

font-weight: 600;

}

.subscribe-form button

CONNECT WITH WEBCORPCO

<a target="_blank" href="/"><i class="fa fa-facebook"></i><br>facebook</a>

<a target="_blank" href="/"><i class="fa fa-twitter"></i><br>twitter</a>

Report · Mar 29, 2017

It doesn't appear as though your server supports php.

What do you get if you just take the simple line of php code below and paste it into a new Dreamweaver document, save it as php_test.php - upload it to your remote server and browse out to it?

<?php echo "Hello World"; ?>

You should just get:

Hello World

on a white background.

Report · Mar 29, 2017

Nope, your on a server that supports asp.net - Microsoft-IIS/8.5 so unless your host can enable php to run on it for you php is not going to be much good to you.

No-one around here writes asp coding

Just looked up your domain name to find out the server details:

Web Server Information - BrowserSpy.dk

Report · Mar 29, 2017

Thank you to everyone. Appreciate your time & expertise.

Have a great day.

Carolyn

Report · Mar 29, 2017

A good place to start for .net questions is -

https://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=csharpgeneral

Google for more forums, and whilst .net may not be as popular as php, there is an active community out there.

Report · Mar 29, 2017

pziecina wrote
A good place to start for .net questions is -
https://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=csharpgeneral
Google for more forums, and whilst .net may not be as popular as php, there is an active community out there.

I can't remember the last time I saw a question in this forum about asp/asp.net but thats maybe because DW dropped support for it? I don't know much about it, its not something I want or need to know much about. I have enough to contend with.

Report · Mar 29, 2017

osgood_ wrote
No-one around here writes asp coding

Not true C# for .net

Report · Mar 29, 2017

Just to let you know, I spoke with the ISP and they do support php. They did a test and said the problem is with the code.

Report · Mar 29, 2017

carolyn@10541 wrote
Just to let you know, I spoke with the ISP and they do support php. They did a test and said the problem is with the code.

That may be but Windows IIS servers don't typically support the PHP mail() function. And since the code requires a mail () function to send mail from server, it can't work with your hosting plan. Chances are you need a form processing script that supports SMTP Mail sending which is quite different from what you have now.

Your choice. Either change web hosting or use scripts that can work on your server.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator