Verzenden contactformulier werkt niet

Status
Niet open voor verdere reacties.

1Marcel1966

Gebruiker
Lid geworden
20 aug 2018
Berichten
15
Hoi, Ik ben nieuw in de wereld van programmeren en html en css lukt nu redelijk, maar javascript is voor mij totaal nieuw.
Nu heb ik een contactformulier met validatie in mijn webpagina gemaakt, met javascript.
Als ik de velden invul en op verzenden klik, dan scrollt mijn pagna omhoog naar home. Als ik vervolgens naar mijn contactformulier scroll, dan zijn alle velden nog ingevuld en de validaties staan ook nog boven de verzendbutton.
Middels formspree.io probeer ik het contactformulier naar mijzelf te verzenden, helaas dus zonder het gewenste resultaat.
Ik hoop dat iemand mij kan helpen, want dinsdag moet ik de website presenteren en het zou mooi zijn als het contactformulier dan ook werkt.
Dit is niet verplicht, maar het zou wel mooi zijn.

Onderstaand heb ik de html code van het contactformulier en daaronder het script.

Ik heb de volgende scripts onderaan mijn webpagina staan:
- js/jquery.min.js, js/bootstrap/bootstrap.min.js, js/responsive-tabs/jquery.responsiveTabs.min.js, js/owl-carousel/owl.carousel.min.js, js/easing/130%20jquery.easing.js, js/custom.js. Alles in deze volgorde, dus als laatste mijn custom.js

<HTML-CODE contactformulier>:
<!-- CONTACT RECHTS -->
<div id="contact-rechts">
<form action="https://formspree.io/<hier stond mijn e-mailadres>" method="POST">
<h4>Stuur ons een bericht</h4>
<p>Neem contact met ons op als u meer informatie wilt</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="naam" class="form-control" id="naam" placeholder="naam">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" class="form-control" id="email" placeholder="Emailadres">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="telefoonnummer" class="form-control" id="telefoonnumer" placeholder="Telefoonnummer">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="onderwerp" class="form-control" id="onderwerp" placeholder="Onderwerp">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" name="bericht" id="bericht" placeholder="Bericht"></textarea>
</div>
<div class="status"></div>
<div class="verzend-btn">
<a class="btn btn-general btn-green" href="#" title="verzenden" type="submit" role="button">Verzenden</a>
</div>
</form>
</div>


<JAVASCRIPT CODE>:
/***************************
- CONTACTFORMULIER -
****************************/

$(document).ready(function () {
$('.verzend-btn').click(function (event) {
console.log('Clicked button');

var naam = $('#naam').val();
var email = $('#email').val();
var onderwerp = $('#onderwerp').val();
var bericht = $('#bericht').val();
var statusElm = $('.status');
statusElm.empty();

if (naam.length >= 3) {
statusElm.append('<div>Naam is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Naam is niet geldig</div>');
}

if (email.length > 5 && email.includes('@') && email.includes('.')) {
statusElm.append('<div>Email is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Email is niet geldig</div>');
}

if (onderwerp.length >= 5) {
statusElm.append('<div>Onderwerp is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Onderwerp is niet geldig</div>');
}

if (bericht.length >= 10) {
statusElm.append('<div>Bericht is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Bericht is niet geldig</div>');
}
});
});

Ik hoop dat iemand mij hiermee kan helpen

Alvast bedankt

Marcel
 
Kan je de code tussen code-tags zetten? Dan is het beter leesbaarder.
 
codetags toevoegen

Beste PHP4U,
Ik heb voor zover ik weet codetags gebruikt, maar als ik het bestand opsla, dan wordt alles recht onder elkaar geplaatst.
Ik heb voor de zekerheid een printscreen van de html en en javascript bijgevoegd, zodat het wellicht wat duidelijker is door de inspringing.
Bij Javascript weet ik nog niet hoe inspringen exact werkt. Wanneer we en wanneer niet.

Met vriendelijke groet,
Marcel Veltkamphtml.pngjavascript.png
 
Ik doel op de code-tags van het forum hier. Als je die kan toevoegen is je script beter leesbaarder hier. (Knopje met # in de werkbalk boven het reactieveld).

Werkt het verder wel zonder de JavaScript?
 
Laatst bewerkt:
Aangepast maar helaas geen tijd om te testen.
Code:
HTML wijziging

<div class="verzend-btn">
   <a id="verzend-btn" class="btn btn-general btn-green" href="#" title="verzenden" type="submit" role="button">Verzenden</a>
</div>

JS wijziging

$(document).ready(function () {
   $('#verzend-btn').click(function (event) {
      event.preventDefault();
      console.log('Clicked button');
      var naam = $('#naam').val();
      var email = $('#email').val();
      var onderwerp = $('#onderwerp').val();
      var bericht = $('#bericht').val();
      var statusElm = $('.status');
      statusElm.empty();
      if (naam.length >= 3) {
         statusElm.append('<div>Naam is geldig</div>');
      } else {
         statusElm.append('<div>Naam is niet geldig</div>');
      }
      if ((email.length > 5) && email.includes('@') && email.includes('.')) {
         statusElm.append('<div>Email is geldig</div>');
      } else {
         statusElm.append('<div>Email is niet geldig</div>');
      }
      if (onderwerp.length >= 5) {
         statusElm.append('<div>Onderwerp is geldig</div>');
      } else {
         statusElm.append('<div>Onderwerp is niet geldig</div>');
      }
      if (bericht.length >= 10) {
         statusElm.append('<div>Bericht is geldig</div>');
      } else {
         statusElm.append('<div>Bericht is niet geldig</div>');
      }
   });
});
Je kan met Javascript/jQuery geen email versturen.
Ik begrijp dat je van een externe mailprovider gebruik maakt, klopt dit?
 
@PHP4U,
De website werkt verder naar behoren, behalve het contactformulier.
Ik zal de volgende keer denken aan de #. Dank je voor de tip

@Bron:
Mag ik vragen wat je hebt aangepast? Dit, voor mijn leerproces.
Ik zal het zo testen en kijken of het werkt

Je kunt met formspree een mail sturen naar een willekeurig e-mailadres door een link in je html te zetten met een e-mailadres.
Je mail wordt dan via formspree doorgestuurd.
Op deze manier kun je je contactformulier testen

Thanks
Marcel
 
contactformulier

@bron:

Ik heb de aanpassingen gedaan in de html en javascript, maar als ik op verzenden klik, gebeurt er helemaal niets
Ook is de vorm van mijn button verandert

Er gaat iets niet goed

Marcel
 
Heb je een voorbeeld die we kunnen uittesten?
 
files voor testing

Hoi PHP4U,

Ik heb geen actieve website waarin je het kunt testen.

Ik zal de code hier plaatsen middels copy-paste:

Als je kijkt in de html code bij <form action=.... dan moet je een email adres invullen waar het contactformulier naar verzonden moet worden .
Als de velden zijn ingevuld dan krijg je een validatie te zien, die zou vervolgens moeten verdwijnen, waarna een bericht van formspree op het scherm moet verschijnen dat het verzenden is gelukt, maar helaas niet bij :(
Als de velden niet juist zijn ingevuld komt de melding dat het veld niet geldig is.

Ik heb jquery.min.js hier niet aan toegevoegd, gezien de grootte van de file. Deze heb je wel nodig om de validatie te kunnen uitvoeren. Die moet je dan nog even toevoegen

Code:
HTML:
<!DOCTYPE html>
<html lang="nl">

<head>
    <!-- META TAGS -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- TITEL -->
    <title>Dit is een test</title>

    <!-- FAVICON -->
    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- GOOGLE-FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">

    <!-- RESPONSIVE TABS CSS -->
    <link rel="stylesheet" href="css/responsive-tabs/responsive-tabs.css">

    <!-- OWL-CAROUSEL CSS -->
    <link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css">

    <!-- CUSTOM CSS -->
    <link rel="stylesheet" href="css/styles.css">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="105">



    <div id="contact-rechts">
        <form action="https://formspree.io/je emailadres hier.com" method="POST">
            <h4>Stuur ons een bericht</h4>
            <p>Neem contact met ons op als u meer informatie wilt</p>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="naam" class="form-control" id="naam" placeholder="naam">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="email" name="email" class="form-control" id="email" placeholder="Emailadres">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="telefoonnummer" class="form-control" id="telefoonnumer" placeholder="Telefoonnummer">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="onderwerp" class="form-control" id="onderwerp" placeholder="Onderwerp">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <textarea class="form-control" name="bericht" id="bericht" placeholder="Bericht"></textarea>
            </div>
            <div class="status"></div>
            <div id="verzend-btn">
                <a class="btn btn-general btn-green" href="#" title="verzenden" role="button">Verzenden</a>
            </div>
        </form>
    </div>

    <!-- SCRIPTS -->

    <!-- JQUERY -->
    <script src="js/jquery.min.js"></script>

    <!-- BOOTSTRAP -->
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <!-- RESPONSIVE TABS JS -->
    <script src="js/responsive-tabs/jquery.responsiveTabs.min.js"></script>

    <!-- OWL-CAROUSEL JS -->
    <script src="js/owl-carousel/owl.carousel.min.js"></script>

    <!--EASING JS -->
    <script src="js/easing/130%20jquery.easing.js"></script>
    
    <!-- CUSTOM JS -->
    <script src="js/custom.js"></script>
</body>

</html>

JAVASCRIPT:
/***************************
        - CONTACTFORMULIER -
****************************/

$(document).ready(function () {
    $('#verzend-btn').click(function (event) {
        console.log('Clicked button');
        
        var naam = $('#naam').val();
        var email = $('#email').val();
        var onderwerp = $('#onderwerp').val();
        var bericht = $('#bericht').val();
        var statusElm = $('.status');
        statusElm.empty();

        if (naam.length >= 3) {
            statusElm.append('<div>Naam is geldig</div>');
        } else {
            event.preventDefault()
            statusElm.append('<div>Naam is niet geldig</div>');
        }

        if (email.length > 5 && email.includes('@') && email.includes('.')) {
            statusElm.append('<div>Email is geldig</div>');
        } else {
            event.preventDefault()
            statusElm.append('<div>Email is niet geldig</div>');
        }

        if (onderwerp.length >= 5) {
            statusElm.append('<div>Onderwerp is geldig</div>');
        } else {
            event.preventDefault()
            statusElm.append('<div>Onderwerp is niet geldig</div>');
        }

        if (bericht.length >= 10) {
            statusElm.append('<div>Bericht is geldig</div>');
        } else {
            event.preventDefault()
            statusElm.append('<div>Bericht is niet geldig</div>');
        }
    });
});

Ik hoop dat jullie mij kunnen helpen, want ik ben hier al twee dagen mee bezig, maar ik krijg het niet voor elkaar.
Alvast bedankt voor alle hulp

Mvrgr Marcel
 
Probeer anders eens op JSfiddle te plaatsen.
 
Dit zou moeten werken.
Code:
<div id="contact-rechts">
    <form action="https://formspree.io/naam@example.nl" method="post">
        <input type="hidden" name="_language" value="nl">
        <input type="text" name="_gotcha" style="display:none">
        <!-- <input type="hidden" name="_next" value="..."> -->
        <h4>Stuur ons een bericht</h4>
        <p>Neem contact met ons op als u meer informatie wilt</p>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" name="name" id="name" class="form-control" placeholder="naam">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input type="email" name="_replyto" id="replyto" class="form-control" placeholder="Emailadres">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" name="phone" id="phone" class="form-control" placeholder="Telefoonnummer">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" name="_subject" id="subject" class="form-control" placeholder="Onderwerp">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <textarea class="form-control" name="message" id="message" placeholder="Bericht"></textarea>
                </div>
            </div>
            <div class="col-md-12 status">
            </div>
            <div class="col-md-12">
                <div class="verzend-btn">
                    <button type="submit" name="submit" id="verzend-btn" class="btn btn-general btn-green" title="verzenden">Verzenden</button>
                </div>
            </div>
        </div>
    </form>
</div>

Code:
$(document).ready(function () {
    $('#verzend-btn').click(function (event) {
        // voorkom 'submit' aktie van button
        event.preventDefault();
        console.log('Button click');
        // form velden uitlezen
        var naam = $('#name').val();
        var email = $('#replyto').val();
        var onderwerp = $('#subject').val();
        var bericht = $('#message').val();
        // validatie
        var aktie = true;
        var statusElm = $('.status');
        statusElm.empty();
        if (naam.length >= 3) {
            statusElm.append('<div>Naam is geldig</div>');
        } else {
            statusElm.append('<div>Naam is niet geldig</div>');
            aktie = false;
        }
        if ((email.length >= 7) && email.includes('@') && email.includes('.')) {
            statusElm.append('<div>Email is geldig</div>');
        } else {
            statusElm.append('<div>Email is niet geldig</div>');
            aktie = false;
        }
        if (onderwerp.length >= 5) {
            statusElm.append('<div>Onderwerp is geldig</div>');
        } else {
            statusElm.append('<div>Onderwerp is niet geldig</div>');
            aktie = false;
        }
        if (bericht.length >= 10) {
            statusElm.append('<div>Bericht is geldig</div>');
        } else {
            statusElm.append('<div>Bericht is niet geldig</div>');
            aktie = false;
        }
        // validatie ok, dan versturen
        if (aktie == true) {
            console.log('Valid + submit');
            $("#contact-rechts form").submit();
        }
    });
});

input name="_language" - > de NL taal
input name="_gotcha" - > honingpotje voor mailbots
input name="_next" - > url van een eigen "bedank" pagina

In var 'aktie' wordt bijgehouden of alle velden valide zijn.
Als alles goed is ingevuld wordt aan het eind met .submit() het formulier verstuurd.

Laat maar weten als je specifieke uitleg wilt of een vraag hebt.

* Aanvulling: Als je in plaats van de <button> een <a> wilt gebnruiken dan wordt het
<a id="verzend-btn" class="btn btn-general btn-green" href="javascript:void(0)" title="verzenden" role="button">Verzenden</a>

Suc6. Have fun.
 
Laatst bewerkt:
Eén tip, verder ziet jouw html er goed uit..
Het laden van de pagina duurt lang omdat je zeer veel font-stijlen gaat laden waarvan het overgrote deel denk ik overbodig is. Meestal is het volgende voldoende (normaal 400, cursief 400i, vet 700). De fonts Open Sans en Raleway kan je tegelijk opvragen. Mocht je toch ergens andere letterdiktes gebruiken dan kan je die in deze regel als getal tussenvoegen.
Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700|Raleway:400,400i,700" rel="stylesheet">
 
formulier werkt niet

Hoi bron,
Dank je voor de aanpassing. Helaas werkt het nog niet

Het formulier wordt helaas niet verzonden.

Ik weet niet wat er fout gaat

Marcel
 
helaas het werkt nog niet

@bron,

Hoi bron, als ik jquery.min.js weg laat, dan krijg ik de volgende melding van formspree ( zie print screen )
Als ik jquery.min.js toevoeg, dan gebeurt er niets als ik op verzenden klik

Ik kan jquery.min.js niet weglaten want dan laad mijn site niet meer?
En hoe moet ik de melding van formspree oplossen?Screenshot.png

Mvrgr
 
Laatst bewerkt:
RE: de foutmelding
Vrij vertaald staat er dat je de pagina moet openen vanaf een webserver, en dat FormSpree niet werkt in html bestanden (ik vermoed een los html bestand op je pc). Ook zie ik dat je jouw emailadres niet hebt ingevuld bij <form>

RE: Als ik jquery.min.js toevoeg, dan gebeurt er niets als ik op verzenden klik.
Je kan jQuery zien als een uitbreiding van Javascript, ofwel een 'functionaliteit bibliotheek'. jQuery heb je nodig voor alle andere scripts die je gebruikt, bijv. voor bootstrap, responsiveTabs, owl.carousel en voor het contactformulier. Daarom is jQuery altijd het eerste <script> en dan pas komt de rest. Je hebt de volgorde van de scripts in berichtje 9 goed staan als ik er vanuit ga dat de code voor het contactformulier in custom.js staat.

Uitleg: Als je jQuery weglaat werkt de code niet die het formulier controleert. Het formulier wordt dan direct verstuurt zonder de invuldvelden te controleren.
 
Laatst bewerkt:
@bron

Ik heb serve als (server) packet toegevoegd en dan zou het in principe wel moeten werken, door mijn localhost:5000 in de adres toe te voegen, maar de melding blijft hetzelfde

Als ik de Jquery wel toevoeg, dan laadt de site niet meer en heb ik een blanco pagina wat niet de bedoeling kan zijn

Ik heb werkelijk geen idee waar het conflict zit
 
RE: localhost:5000
Heb je op je pc een webserver geinstalleerd die te benaderen is op localhost via poort 5000 ?
- ja, is de webserver opgestart? Heb je het bestand in het goede mapje gezet? Kan je wel een ander html bestand via localhost:5000 opvragen?
- nee, dan klopt het dat het niet werkt.

RE: Als ik de Jquery wel toevoeg, dan laadt de site niet meer
Laadt geen enkele pagina meer, of alleen de contact pagina?

RE: Ik heb werkelijk geen idee waar het conflict zit
Het kan liggen in versienummers. Sommige (nieuwe) scripts willen een jQuery met een hoog versie nr en andere (oudere) scripts willen een laag versie nr van jQuery. Omdat je de css en scripts uit submapjes laadt kan ik niet zien welke versienummers je gebruikt.
 
Laatst bewerkt:
De gehele jQuery heb ik omgegooid. In de bijlage heb ik jouw contact pagina uitgekleed tot de essentie om te kunnen testen. Werkt het hiermee?
 

Bijlagen

  • contact4.zip
    2,1 KB · Weergaven: 40
Formulier werkt niet

@bron:

Ik denk dat ik er uit ben, maar verbeter mij als ik het fout heb.

Bij formspree.io staat dat het voor een statische site werkt. Mijn site is dynamisch met slider effects, smoothscroll etc dus denk ik dat het daarom niet gaat werken
Mocht mijn denkwijze niet juist zijn, dan hoor ik het graag

Mvrgr
Marcel
 
Bij formspree.io staat dat het voor een statische site werkt. Mijn site is dynamisch met slider effects, smoothscroll etc dus denk ik dat het daarom niet gaat werken
Vroeger was het zo dat als er "iets" kon bewegen dan was de website al dynamisch. Tegenwoordig niet meer, er is meer nodig dan een animatie. Net even gegoogeld of ik een goede definitie kon vinden voor "statisch vs dynamisch" maar dat valt niet mee. Je vindt allerlei omschrijvingen, bekeken vanuit commercieel-, financieel of technisch oogpunt.

Ergens is er wel een kern te vinden en die zegt dat:
a) als de inhoud van pagina's via een website beheerststeem gewijzigd kan worden,
b) en/of als de inhoud afhankelijk kan zijn van keuzes van website bezoekers,
dan kan je spreken over een dynamische website.

Voorbeeld bij a) is een CMS met informatie pagina's. Voorbeeld bij b) is een forum (na inloggen meer mogelijkheden) of een Webshop (aanbiedingen afhankelijk van bezoeker).

Stel je hebt een carrousel (animatie) op je website. Op een statische manier laat deze telkens het volgende plaatje zien. Op een dynamische manier kan de bezoeker klikken om het volgende/vorige plaatje te zien. Er is dus een flink grijs gebied tussen statisch en dynamisch.

Pagina's die in html code zijn geschreven en opgeslagen als .html bestand zijn altijd statisch.

Bij jouw website zou formspree.io moeten werken omdat formspree.io geen aktie(s) hoeft te ondernemen om de pagina in zijn geheel te zien. De bijlage uit mijn vorige bericht werkt op mijn pc (op een lokale webserver). Ik heb getest tot de vraag van formspree.io of ik mijn emailadres wil bevestigen, daar ben ik gestopt. Of de email van het contactformulier werkelijk goed wordt verwerkt door formspree.io heb ik niet getest. Heb je in de spambox gekeken of daar de email in terecht is gekomen?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan