Skip to main content
carolyn@10541
carolyn@10541
Known Participant
March 28, 2017
Question

Engagement bar

  • March 28, 2017
  • 3 replies
  • 2516 views

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

This topic has been closed for replies.

3 replies

carolyn@10541
carolyn@10541Author
Known Participant
March 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.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 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
carolyn@10541
carolyn@10541Author
Known Participant
March 30, 2017

Thank you Nancy O. Do you have any recommendations on where to find a form processing script that supports SMTP mail sending?

Sent from my iPhone

carolyn@10541
carolyn@10541Author
Known Participant
March 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

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
March 29, 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!
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
March 28, 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!
carolyn@10541
carolyn@10541Author
Known Participant
March 28, 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

carolyn@10541
carolyn@10541Author
Known Participant
March 28, 2017

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

<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>

Thanks again.

Carolyn

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices