LevelsLark Python/Django

LevelsLark 1.03

# This is a fork from Levelsio's gist. 
# Check the original gist (PHP) https://gist.github.com/levelsio/6716e7261c73fd873ba2ce1f4a406012
# I just converted it so it can be used with Django.
# This is all Python3.6
# // <readme>
# /*
# 	This is a lite version of Olark's and Intercom's functionality (without the chat part).

# 	It lets you get feedback from users on your site to your email.
	
# 	And you won't have to rely on another company anymore!

# 	#killyourdependencies
# DJANGO and PYTHON developers will know what to do.
# Include thse dependencies 
from django.core.exceptions import ValidationError
from django.core.validators import validate_email
from django.core.mail import send_mail

# 	License: do whatever you want with this, I don't care <3333
# */
# // </readme>

# DJANGO settings.py

EMAIL_HOST = 'smtp.yourmailserver.com'
EMAIL_HOST_USER = '[email protected]'
EMAIL_HOST_PASSWORD = 'YourPassword'
EMAIL_PORT = '587'
DEFAULT_FROM_EMAIL = 'TechSupport <[email protected]>'


# HTML and CSS STUFF to make it look pretty

{#feedback buttons stuff#}
<div id="feedbackpopup" class="feedback-popup expanded">
    <p id="feedback-close" style="text-align: right"><i class="fa fa-times" aria-hidden="true"></i></p>
    <p>GIVE US SOME FEEDBACK</p>
    <span class="text">Need help? Have feedback? Found a bug? Techies are human, so be nice and we'll fix it.</span>
    <br>
    <input id="contactName" type="text" placeholder="Name" class="name">
    <input id="contactEmail" type="email" placeholder="Email" class="email">
    <textarea id="contactMessage" placeholder="Write your message" class="message"></textarea>
    <div><button id="sendMessage" class="feedbackmailBTN">POST {% csrf_token %}</button></div>
<div id="loader" class="loader" style="display: none !important;">Loading...</div>
</div>

{#      feedback button bottom right#}
      <div id="sendusfeedbackBTN" class="feedbackform">
          <button class="feedbackBTN"><i class="fa fa-envelope" aria-hidden="true"></i> SEND US FEEDBACK</button>
      </div>


	<style>

/*FEED BACK FORM*/

.feedbackform {
    position: fixed;
  top: 95%;
    left: 2%;
  bottom: 0%;
  width: 115px;
  /*height: 0px;*/
  text-align:right;
  z-index:9999;
    margin-top:-15px;
}

		@media (max-width:1024px) {
			.feedbackform {
				display:none;
			}
		}

.feedbackBTN {
    display: inline-block;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    border: none;
    color: #000000;
    text-align: center;
    font-size: 0.7rem;
    height: 3rem;
    padding: 1rem;
    width: 10rem;
    transition: all 0.5s;
    cursor: pointer;
    float: left;
}

.feedbackBTN:hover {
    background-color: rgba(25,245,237,0.55);
}


    .feedback-popup {
            display: none; /* Hidden by default */
        position: fixed;
        border: 2px solid #c6c2be;
        bottom: 0;
        left: 2em;
        margin: 0;
        width: 16em;
        text-align: left;
        padding: 0.5em;
        padding-left: 0.75em;
        padding-right: 0.75em;
        z-index: 998;
        border-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 0;
        background: #fff;
        cursor: pointer;
        color: #c6c2be;
    }

    .feedback-popup * {
        display: none !important;
        box-sizing: border-box;
    }

    .feedback-popup .action-expand-feedback-popup {
        background: #c6c2be;
        border-radius: 5px;
        padding: 0.5em;
        color: #fff;
        font-size: 10px;
        position: absolute;
        top: 0.85em;
        right: 0.85em;
        display: block !important;
    }

    .feedback-popup .title {
        display: block !important;
        color: #c6c2be;
        font-weight: bold;
    }

    .feedback-popup.expanded .title {
        color: #353535;
    }

    .feedback-popup .title:hover {
        text-decoration: underline;
    }

    .feedback-popup.expanded * {
        display: block !important;
    }

    .feedback-popup.expanded {
        cursor: normal;
        min-height: 18em;
    }

    .feedback-popup .text {
        margin-top: 15px;
        margin-bottom: 5px;
        font-size: 14px;
    }

    .feedback-popup input, .feedback-popup textarea {
        width: 100% !important;
        border: 1px solid #e4e4e4 !important;
        padding: 4px !important;
        margin-bottom: 5px !important;
        font-size: 14px !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        font-weight: normal !important;
        outline: none !important;
    }

    .feedback-popup textarea {
        min-height: 7em;
    }

    .feedback-popup .button {
        float: right;
        font-weight: bold;
        padding: 0.25em;
        padding-left: 0.75em !important;
        padding-right: 0.75em !important;
        border-radius: 5px !important;
        background: #ff4742;
        border: 2px solid #ff4742;
        color: #fff;
        margin-top: 5px;
        text-transform: none !important;
    }

    .feedback-popup .button:hover {
        color: #ff4742;
        background: none;
    }

    .feedback-popup .success-text {
        font-size: 14px;
        margin-top: 15px;
        display: none !important;
    }

    .feedback-popup.success * {
        display: none !important;
    }

    .feedback-popup.success .fa, .feedback-popup.success .title, .feedback-popup.success .success-text {
        display: block !important;
    }

    .feedback-popup:not(.expanded) .success-text {
        display: none !important;
    }

    @media (max-width: 1024px) {
        .feedback-popup {
            display:none;
        }
    }

.feedbackmailBTN {
display: inline-block;
    border-radius: 4px;
    background-color: rgb(82, 82, 82);
    border: none;
    color: #f9f9f9;
    text-align: center;
    font-size: 0.7rem;
    height: 2rem;
    /* padding: 0rem; */
    width: 5rem;
    transition: all 0.5s;
    cursor: pointer;
    float: left;
}

.feedbackmailBTN:hover {
    background-color: #123456;
}

/*end of feedback css*/
	</style>
	<script>



// FEEDBACK Form
$('#feedbackpopup').addClass('animated fadeInUp');
var feedback = document.getElementById('feedbackpopup');

// Get the button that opens the modal
var feedbackbtn = document.getElementById("sendusfeedbackBTN");

// When the user clicks the button, open the modal
feedbackbtn.onclick = function() {
    feedback.style.display = "block";
    $("#sendusfeedbackBTN").hide();
};

$("#feedback-close").click(function(){
    $("#feedbackpopup").hide();
    $("#sendusfeedbackBTN").show();
});



// send feedback email

function validateEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
 };

$("#sendMessage").click(function() {
    var name = $('#contactName').val();
    var memail = $('#contactEmail').val().toLowerCase();
    var message = $('#contactMessage').val();
    console.log(name, memail, message);
    $('#sendMessage').prop('disabled', true);
    if (validateEmail(memail) && name && message){
        $("#loader").show();
        ajaxCall('/contact',
            {'name': name, 'email': memail, 'message': message},
            function(data){
            var succ = data.ok;
            if(succ == 'ok'){
                $("#feedbackpopup").hide();
                alert("Thank You for contacting us. We will get back to you shortly.");
                $('#contactName, #contactEmail, #contactMessage').val('');
                $('#sendMessage').prop('disabled', false);
            }
            if(succ == 'no'){
                alert("Sorry, can't connect to the server right now, our Tech engineers are working on it");

            }
        }
        );
    }
    else{
        $('#sendMessage').prop('disabled', false);
        alert("Please make sure all fields are complete.");
    }
});
	</script>



DJANGO URL:

url(r'^contact', views.contact, name='contact')


Django views:

def contact(request):
    if request.method == 'POST':
        rpg = lambda x: request.POST.get(x)
        name = rpg('name')
        email = rpg('email')
        message = rpg('message')
        try:
            validate_email(email)
        except ValidationError as e:
            return JsonResponse({'ok': 'no'})
        mail_from = 'Contact Message From: ' + name + ' Contact Email: ' + email
        mail_message = 'Message: ' + message
        send_mail(mail_from, mail_message, '[email protected]',
                  ['[email protected]'])
        # the email you want feedback to be sent to

        return JsonResponse({'ok': 'ok'})
    print(JsonResponse)
    return HttpResponseRedirect('/', context_instance=RequestContext(request))