2 Replies - 489 Views - Last Post: 13 June 2016 - 03:20 AM

#1 icetana  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-June 16

Need help with contact form and navigation scroll link on onepage site

Posted 12 June 2016 - 09:30 AM

Hello there,

I am new here and I've been redesigning one responsive one page template for personal use. I have some basic knowledge of html and CSS but really basic. I was proud of myself to have managed to redesign all but got stuck on 2 things. First, I can't get my 'submit' button to work in contact form. There is a documentation that came with my template but it doesn't explain much, at least not to me :( I think I need to add my email in php form, which I did, but it's still not working. Second problem was that I needed more space on the page (one page) so I copy pasted already existing DIV container (really messy work ) and added some text and one more section in navigation on top of the page titled 'microblading', now the navigation scroll link doesn't work correctly- when I click on 'microblading' it takes me to prices. I am really hoping that someone could help me here, I am out of my wits and can't publish the website util these 2 problems are solved :( I am sure that for most of you here these are not big problems but for me they are a disaster. I am attaching my index page and PHP form (hopefully the right one as I have loads of documents with this website) please let me know if you need anything else. Thanks in advance

Attached File(s)

  • Attached File  form.zip (49.37K)
    Number of downloads: 37


Is This A Good Question/Topic? 0
  • +

Replies To: Need help with contact form and navigation scroll link on onepage site

#2 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Need help with contact form and navigation scroll link on onepage site

Posted 12 June 2016 - 12:45 PM

Post relevant code directly here in the thread, between code tags, not just as a zip file which most people won't download.

If a scroll link isn't working then check your browser's console for errors.
Was This Post Helpful? 0
  • +
  • -

#3 icetana  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-June 16

Re: Need help with contact form and navigation scroll link on onepage site

Posted 13 June 2016 - 03:20 AM

Hey Andrew, thank you very much for prompt reply. I didn't post the code cause there is a lot of it and I wasn't sure which part to post but I will do it now. The problem was that I tried to add more content on my one page, but I didn't do it correctly. All the scroll navigation links are working fine, but considering I added one more 'block' of text to my page now the navigation got a bit confused so when I click in navigation on 'prices' the page scrolls down and brings me to text about Microblading instead of Prices. I hope I have explained this correctly. I was reading online that I need to assign ID to this section and then link it to navigation and I tried it but I guess I need a bit more knowledge than I possess :( So to summarise, the thing that needs fixing is this: when I click on 'prices' in navigation, the page should automaticly scroll down to the section about prices. That I all. I'm posting the code, not whole but the relevant part. If you need anything else please let me know and thank you so much!!! Btw page is not online yet and <li ><a href="#microblading">Microblading</a></li> was added by me, it wasn't in the template.

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head lang="en">
<meta charset="UTF-8">
<meta name="description" content="You - Creative HTML Template">
<meta name="author" content="CreateIT">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>You - Creative HTML Template</title>


<link rel="icon" href="./assets/images/content/tailor/favicon.ico">

<link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
<link rel="stylesheet" type="text/css" href="./assets/css/makeup.css">



<!--[if lt IE 9]>
<script src="./assets/bootstrap/js/html5shiv.min.js"></script>
<script src="./assets/bootstrap/js/respond.min.js"></script>
<![endif]-->

<script src="./assets/js/modernizr.custom.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/makeup.css">

<body class="cssAnimate onepager"><div class="ct-preloader"><div class="ct-preloader-content"></div></div>
<div class="main">
<div class="ct-topbar ct-topbar--default">
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-6">
<div class="text-wrapper">
<i class="fa fa-phone"></i>
+49 176 555 348 18</div>
<div class="text-wrapper">
<a href="#"><i class="fa fa-envelope"></i></a><a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<div class="col-sm-6 col-lg-6">
<div class="ct-socials text-right">
<a href="https://www.facebook.com/browswelove" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a>

<a href="https://www.instagram.com/browswelove" data-toggle="tooltip" data-placement="bottom" title="Instagram"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ct-navbarMobile">
<div class="navbar-header">
<a class="navbar-brand" href="indexmulti.html">
<img class="ct-logo-navbar--transparent" src="./assets/images/content/makeup/logo.png" alt="">
<img class="ct-logo-navbar--solid" src="./assets/images/content/makeup/logo-solid.png" alt="">
</a>
</div>
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="ct-menuMobile">
<ul class="ct-menuMobile-navbar">
<li ><a href="#header">Start</a></li>
<li ><a href="#about">About</a></li>
<li ><a href="#services">Services</a></li>
<li ><a href="#microblading">Microblading</a></li>
<li ><a href="#prices">Prices</a></li>
<li ><a href="#clients">Clients</a></li>
<li ><a href="#works">Works</a></li>
<li class="dropdown "><a href="#contact">Contact</a>
<ul class="dropdown-menu">
<li>
<span>Samstag, Montag und Dienstag </span>
<p>11:00AM - 19:30PM</p>

</li>
</ul>
</li>
</ul>
</div>
<div id="ct-js-wrapper" class="ct-pageWrapper">
<nav class="navbar ct-navbar--transparent ct-navbar--stickyToTop ct-navbar--withTopbar" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="indexmulti.html">

<img class="ct-logo-navbar--solid" src="./assets/images/content/makeup/logo-solid.png" alt="">
<img class="ct-logo-navbar--transparent" src="./assets/images/content/makeup/logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="onepage"><a href="#header">Start</a></li>
<li class="onepage"><a href="#about">About</a></li>
<li class="onepage"><a href="#services">Services</a></li>
<li class="onepage"><a href="microblading.html">Microblading</a></li>
<li class="onepage"><a href="#prices">Prices</a></li>
<li class="onepage"><a href="#clients">Clients</a></li>
<li class="onepage"><a href="#works">Works</a></li>
<li class="dropdown onepage"><a href="#contact">Contact</a>
<ul class="dropdown-menu ">
<li>
<span>Samstag, Montag und Dienstag</span>
<p>11:00AM - 19:30PM</p>

</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<header class="ct-mediaSection ct-section scroll" id="header" data-stellar-background-ratio="0.3" data-height="100%" data-type="parallax" data-bg-image="./assets/images/content/makeup/makeup-home-main-bg.jpg" data-bg-image-mobile="./assets/images/content/makeup/makeup-home-main-bg.jpg">
<div class="ct-mediaSection-inner">
<div class="container">
<div class="row">
<div class="ct-header-text col-md-12 text-center ct-js-animationDynamic">
<h1 class="ct-js-animation--item ct-motive-text" data-when="span" data-from="0" data-to="0.5" data-opacity="0" data-translatey="-100">Ana Maricic</h1>
<h2 class="text-uppercase ct-u-text--white ct-u-hdr2 ct-js-animation--item" data-when="span" data-from="0" data-to="0.5" data-opacity="0" data-translatey="-100">Professional MICROBLADING ARTIST</h2>
<div class="ct-divider ct-divider--type5 ct-js-animation--item" data-when="span" data-from="0" data-to="0.5" data-opacity="0" data-translatey="100">
<div class="ct-line ct-line--left"></div>
<img src="./assets/images/divider-shape-type5.png" alt="">
<div class="ct-line ct-line--right"></div>
</div>
<a href="#prices" class="btn btn-default ct-js-btnScroll btn--noradius ct-js-animation--item" style="" data-when="span" data-from="0" data-to="0.5" data-opacity="0" data-translatey="100">See what I can offer you</a>
</div>
</div>
</div>
</div>
</header>
<section class="ct-mediaSection ct-u-paddingBoth80 scroll" id="about">
<div class="ct-header-arrow--circleDecoration ct-animation--rotate">
<a class="ct-js-btnScroll" href="#about">
<div class="ct-arrow--outer"></div>
<div class="ct-arrow--inner">
<div class="ct-arrow--icon">
<div class="ct-arrow"></div>
</div>
</div>
</a>
</div>
<div class="container">
<header class="ct-pageSectionHeader text-center">
<h2 class="ct-js-animation--item ct-motive-text" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="-50">ABOUT</h2>
<h3 class="ct-js-animation--item ct-u-hdr3" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="50">the artist</h3>
</header>
<div class="row ct-u-image--full-width">
<div class="col-sm-4 col-md-4 col-sm-push-4 col-md-push-4 ct-u-paddingBottom40">
<img src="./assets/images/content/makeup/makeup-home-portrait.jpg" alt="">
</div>
<div class="col-sm-4 col-md-4 col-sm-pull-4 col-md-pull-4 ct-u-paddingBottom40">
<p>some text. </p>
</div>
<div class="col-sm-4 col-md-4 ct-u-paddingBottom40">
<p>some text</p>
</div>
</div>
</div>
</section>
<section class="ct-mediaSection ct-decoration--type5 ct-u-paddingBoth80 ct-glyph--text scroll" id="services" data-stellar-background-ratio="0.3" data-height="524" data-type="parallax" data-bg-image="./assets/images/content/makeup/makeup-home-services-bg.jpg" data-bg-image-mobile="./assets/images/content/makeup/makeup-home-services-bg.jpg">
<div class="ct-mediaSection-inner">
<div class="container">
<header class="ct-pageSectionHeader text-center ct-js-animationDynamic">
<h2 class="ct-js-animation--item ct-motive-text" data-when="enter" data-from="1" data-to="0" data-opacity="0" data-translatey="-50">RANGE OF MY</h2>
<h3 class="ct-u-text--white ct-u-text--white ct-js-animation--item ct-u-hdr3" data-when="enter" data-from="1" data-to="0" data-opacity="0" data-translatey="50">services</h3>
</header>
<div class="row ct-u-text--white">
<div class="col-sm-3 col-md-3 ct-u-paddingBottom20">
<div class="ct-iconBox">
<div class="ct-iconBox--description">
<h3 class="text-uppercase">&nbsp;</h3>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 col-md-3 ct-u-paddingBottom20">
<div class="ct-iconBox">
<div class="ct-iconElement ct-background-squareImage"> <img src="./assets/images/content/makeup/makeup-home-services-image-2.jpg" alt=""> </div>
<div class="ct-iconBox--description">
<h3 class="text-uppercase">MICROBLADING</h3>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 col-md-3 ct-u-paddingBottom20">
<div class="ct-iconBox">
<div class="ct-iconElement ct-background-squareImage"> <img src="./assets/images/content/makeup/makeup-home-services-image-3.jpg" alt=""> </div>
<div class="ct-iconBox--description">
<h3 class="text-uppercase">EYELASH EXTENSIONS</h3>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ct-mediaSection ct-u-paddingBoth80 ct-decoration--type5-rotate scroll" id="prices">
<div class="container">
<header class="ct-pageSectionHeader text-center" >
<h3 class="ct-js-animation--item ct-u-hdr3" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="50">What is Microblading?</h3>
<p>&nbsp;</p>
<h2 align="center"> Microblading (or eyebrow embroidery) is relatively new technique of semi-permanent drawing of eyebrows with hyper-realistic results. </h2>
<p>&nbsp;</p>
<div class="row ct-u-text--white"></div>
<div class="row ct-u-image--full-width">
<div class="col-sm-4 col-md-4 col-sm-push-4 col-md-push-4 ct-u-paddingBottom40">
<p><img src="assets/images/content/makeup/microblading-image-1.jpg" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</div>
<div class="col-sm-4 col-md-4 col-sm-pull-4 col-md-pull-4 ct-u-paddingBottom40">
<p>The shape of eyebrows is calculated only according to the morphology of the face and the golden mean. The color is determined only according to the natural color of the eyebrows and the hair. The difference to ordinary permanent make-up is that Microblading is not done by a machine. The pigments are manually placed into the skin using a very fine blade to deposit pigments into the epidermis. Because we’re impacting color closer to the surface, the strokes appear crisp and very fine. There is no “spilling” under the skin. The pigments used in this method have been formulated to match your original eyebrow color, and if the eyebrows are still present, blend perfectly into them. The results are a natural, flawless, fuller-looking brow. Initially, the brows appear darker but fade significantly over a two week period. </p>
</div>
<div class="col-sm-4 col-md-4 ct-u-paddingBottom40">
<p>In most cases it is necessary to have a correction done, as it is very difficult to predict how well the skin will retain the pigment. Hair strokes are visible 1-2 years depending on clients skin and aftercare. Correction should be done after 4 weeks from the initial treatment in order to fill any strokes that might have faded and the color was not fully absorbed. This method of eyebrow shaping is ideal for anyone wanting to enhance the look of their eyebrows. The results are natural looking, hair-like strokes, regardless of the amount of hair present. People suffering from alopecia, trigonometrical or any other condition that causes hair loss benefit greatly from Microblading, as well as people who simply aren't happy with their eyebrows.</p>
</div>
</div>
<h2 class="ct-js-animation--item ct-motive-text" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="-50">MICROBLADING</h2>
<h3 class="ct-js-animation--item ct-u-hdr3" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="50">FAQ </h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h6>All clients have lots of questions about the procedure. Here are some of the most frequently asked questions and answers.</h6>
<p>&nbsp;</p>
<h4>How long does it take to do?</h4>
<p>Investing an hour or two of your time can make you beautiful for years to come. The procedure is split into 2 appointments, which are 4 weeks apart to allow for the healing process to complete. The initial procedure will take around 120 minutes, your second appointment will last approximately 60 minutes.</p>
<h4>Does it hurt?</h4>
<p>Some clients find the procedure a little uncomfortable and other clients report no discomfort at all. The first round of color application is usually done without anesthetic as it wouldn't have much effect while the skin is 'closed'. But I always try to be as gentle as possible and a local anesthetic is introduced immediately after the first part of the procedure is done. This is topped up regularly during the treatment to keep you comfortable.</p>
<p>&nbsp;</p>
<h4>How do you chose the shape?</h4>
<p>Not every eyebrow shape will fit to every face. I work by using PhiBrows technique which means the shape of eyebrows is calculated only according to the morphology of the face and the golden mean, the number φ (1,618). The width of eyebrows is chosen by you</p>
<p>&nbsp;</p>
<h4>How long does the pigment last?</h4>
<p>In theory the pigment can last 1-2 years but color touch-up is recommended at least once per year. Pigment durability depends on the skin type and aftercare. Oily skin does not absorb the pigment as good as normal and dry skin. Hormones, sun exposure, various abrasive face treatments etc. will all shorten the durability of pigment.</p>
<p>&nbsp;</p>
<h4>How long is the redness or swelling present after the treatment?</h4>
<p> The swelling is very rare and usually disappears after just one hour. The slight redness can be seen up to max. 2 hours after the treatment. </p>
<p>&nbsp;</p>
<h4>How will my brows look immediately after the procedure?</h4>
<p> It is important to understand that for the first 7 days after the procedure your eyebrows will look around 30% darker and wider. After the initial healing period is over, the shape and color will look even more natural </p>
<p>&nbsp;</p>
<h4>I already have an old PMU, can I still try Microblading ?</h4>
<p>Usually the old permanent makeup can be covered well with microblading, but it is important that the old PMU is not black or dark blue, because these colors can not overlap.</p>
<p>&nbsp;</p>
<h4>Can I have my eyebrows pigmented if I'm pregnant?</h4>
<p>No, you cannot have this treatment done if you are pregnant or breastfeeding. </p>
<p>&nbsp;</p>
<h4>Is there anything I need to do before the treatment?</h4>
<p>Two days prior to treatment you should remove the dead skin layers with gentle pilling so your skin is smooth and refreshed and thus optimally prepared for Microblading. Also, 4-5 hours before the treatment please don't drink any coffee because Coffeen increases the bloodstream.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="ct-js-animation--item ct-motive-text" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="-50">CHECK OUT</h2>
<h3 class="ct-js-animation--item ct-u-hdr3" data-when="enter" data-from="0" data-to="1" data-opacity="0" data-translatey="50">prices</h3>
</header>
<div class="row">
<div class="col-md-12">
<table>
<caption class="text-left ct-u-paddingBottom20">
MICROBLADING
</caption>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>Consultation</td>
<td class="text-center">FREE</td>
<td class="text-left"><p>Initial Consultation is usually done on the same day as the procedure, but if you just wish to come and meet me in person to discuss any possible concerns -you are more than welcome.<br>
By appointment only</p></td>
</tr>
<tr>
<td>Microblading procedure</td>
<td class="text-center">200€</td>
<td class="text-left">The treatment takes about 2 hours and includes:
<ol>
<li>Comprehensive and personalized advice</li>
<li>Precise measuring and sketching</li>
<li>Choice of color tone </li>
<li>Numbness and pigmentation</li>
</ol></td>
</tr>
<tr>
<td>Correction</td>
<td class="text-center">FREE</td>
<td class="text-left">Correction should be done when the skin has healed (4 weeks from the initial treatment) in order to fill any strokes that might have faded and the color was not fully absorbed. </td>
</tr>
<tr>
<td>Color touch up</td>
<td class="text-center">135€</td>
<td class="text-left">Color touch up is normaly done when the color starts to fade but the original lines are still visible. </td>
</tr>
</table>
</div>
<div class="col-md-6">
<table>
<caption class="text-left ct-u-paddingBottom20">
EYELASH EXTENSIONS CLASSIC 1:1
</caption>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>This is the application in which a natural eyelash artificial eyelash is applied. This look is suitable for people who expect a natural look, a little wealth and little more at length. Customers with many own natural eyelashes are very well suited for the classic 1: 1 technology.</td>
<td nowrap class="text-right"> <p class="text-center">100€</p></td>
</tr>
<tr>
<td>Refill after 3 weeks</td>
<td class="text-center">25€</td>
</tr>
<tr>
<td>Refill after 4 weeks </td>
<td class="text-center">35€</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table width="30%">
</table>
<div align="center"><strong class="ct-text--change">MODELS WANTED! </strong>
</div>
<p class="text-center">offer 50€ instead of 100€ (full price) </p>
<p class="text-center">Valid until 01.08.2016</p>
<table width="30%">
<caption class="text-left ct-u-paddingBottom20">&nbsp;
</caption>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>&nbsp;</td>
<td class="text-right">&nbsp;</td>
</tr>
</table>
<table>
<caption class="text-left ct-u-paddingBottom20">&nbsp;</caption>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>&nbsp;</td>
<td class="text-right">&nbsp;</td>
</tr>
</table>
</div>
</div>
</div>
</section>
<section class="ct-mediaSection ct-decoration--type5 ct-u-paddingBoth80 scroll" id="clients" data-stellar-background-ratio="0.3" data-height="575" data-type="parallax" data-bg-image="./assets/images/content/makeup/makeup-home-clients-bg.jpg" data-bg-image-mobile="./assets/images/content/makeup/makeup-home-clients-bg.jpg">
<div class="ct-mediaSection-inner">
<div class="container">
<div class="row">
<div class="col-md-12">
<header class="ct-pageSectionHeader text-center ct-js-animationDynamic">
<h2 class="ct-js-animation--item ct-motive-text" data-when="enter" data-from="1" data-to="0" data-opacity="0" data-translatey="-50">CLIENTS</h2>
<h3 class="ct-u-text--white ct-js-animation--item ct-u-hdr3" data-when="enter" data-from="1" data-to="0" data-opacity="0" data-translatey="50">testimonials</h3>
</header>
<div class="ct-divider ct-divider--type5 text-center">
<div class="ct-line ct-line--left"></div>
<img src="./assets/images/divider-shape-type5.png" alt="">
<div class="ct-line ct-line--right"></div>
</div>
</div>
</div>
</div>
<div class="flexslider ct-js-flexslider ct-flexslider--arrowType2" data-controlnav="false" data-directionnav="true" data-animationloop="true">
<ul class="slides ct-u-text--white">
<li>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Ich bin absolut begeistert von dieser Technik! Die Augenbrauen sind jetzt wunderschön geformt und sehen vor allem total natürlich aus. Ich habe auch schon permanent make up ausprobiert, aber das Ergebnis war bei weitem nicht so gut.
Sie hat sich super viel Zeit genommen, damit alles perfekt passt. Kann ich nur weiterempfehlen!
Vielen Dank.</p>
<div class="ct-text-signature text-center">
<span class="text-uppercase">
Stephanie Eisenberger </span>
<p>Regular customer</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Sensationelle Arbeit, meine Freunde und Kollegen konnten es gar nicht fassen dass meine Augenbrauen nicht "echt" sind... Auf jeden Fall an alle zu empfehlen die nicht zufrieden sind mit Ihren Augenbrauen, die Form ist perfekt und es sieht unglaublich natürlich aus!! Vielen Dank!!
</p>
<div class="ct-text-signature text-center">
<span class="text-uppercase">

Steffi Bauer </span>
<p>Regular customer</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Meine Augenbrauen sind nach diesem Microblading viel attraktiver, vor allem sieht es so natürlich aus. Der Preis ist super günstig bei der TOP Qualität der Arbeit was Sie anbietet, im Gegensatz zu anderen Anbietern in der Gegend. Ich werde mir jedes Jahr meine Augenbrauen verbessern lassen. Sehr talentiert.
</p>
<div class="ct-text-signature text-center">
<span class="text-uppercase">
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1