Having trouble with the contact form sending emails

My contact form box seems to be having trouble directing the mail to my email. When I hit the send message button, it just refreshes the page in a continuous loop.

<div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s">
    <h1>Inquiries/feedback</h1>
    <div class="contact-form">
        <form id="contact-form" method="post" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355e544c5e54504640755258545c591b">[email protected]</a>">
            <input name="name" type="text" class="form-control" placeholder="Your Name" required>
            <input name="email" type="email" class="form-control" placeholder="Your Email" required>
            <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea>
            <div class="contact-submit">
                <input type="submit" class="form-control submit" value="Send a message">
            </div>
        </form>
    </div>
</div>
htmlcss

Answer №1

<div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s">
    <h1>Questions/comments</h1>
    <div class="contact-form">
        <form id="contact-form" method="post" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="513a30283a3034222411363c30383d7f323e3c">[email protected]</a>"  enctype="text/plain">
            <input name="name" type="text" class="form-control" placeholder="Your Name" required>
            <input name="email" type="email" class="form-control" placeholder="Your Email" required>
            <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea>
            <div class="contact-submit">
                <input type="submit" class="form-control submit" value="Send a message">
            </div>
        </form>
    </div>
</div>

Don't forget to include the following line in your form tag for it to work properly:

enctype="text/plain"

If you encounter any issues after adding this, it could be related to an OS problem. Check out this link for help with Microsoft file association to mailto: Microsoft file association to mailto

*I have tested your code and it works fine from my end.

Answer №2

For this to be successful, the individual completing the form must have a functional email client configured on their device. To guarantee its effectiveness in all situations, it is essential to have a server script and specify the action attribute of the form to that particular script.

Alternatively, you could opt for a third-party platform such as Typeform

Answer №3

      <?php
       if(isset($_POST['submit'])) {
            $name=$_POST['name'];
            $email=$_POST['email'];
            $message=$_POST['message'];
            $body="Name:".$name."\n"."Email:".$email."\n"."Message: \n".$message;
            
             if(mail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2d2e2f0c2b212d2520622f2321">[email protected]</a>","Query through Website",$body,"From:".$email)) {
                echo "<p align='center' style='color:green'>Your message has reached destination.Rest Easy (^_^)..!!  We will contact you Shortly</p>";
            } else {
                echo "<p align='center' style='color:red'>Damn server!Apologies, but something went wrong.Please try again (T_T)</p>";
            }
         }
    ?>

    <div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s">
        <h1>Questions/comments</h1>
        <div class="contact-form">
            <form  method="post" name="myform" onsubmit = "return validate()">
            <input name="name" type="text" class="form-control" placeholder="Your Name" required>
            <input name="email" type="email" class="form-control" placeholder="Your Email" required>
            <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea>
            <div class="contact-submit">
                <input name="submit"  value="Send Message" type="submit" class="form-control submit" value="Send a message">
            </div>
        </form>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

My website includes a <div> section that features both an image and a <figcaption>. However, when I attempt to apply padding to the <figcaption>, it does not seem to take effect

I've been trying to troubleshoot this code, but the padding just won't cooperate and I can't seem to figure out why. .img-caption { visibility:hidden; width:22%; height:435px; background-color:#f9f4e3; ...

css

Extracting information from a database (HTML, JavaScript)

I am currently working on a table that receives data from the server using ajax: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +d ...

javascriptjqueryhtmlajaxjson

Ensure that the next iteration of .each() does not begin until all nested functions have finished executing

Is there a way to ensure that my .each() function waits for all nested functions to complete before moving on? Here is the code I am working with: HTML: <div> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> & ...

jqueryhtml

Updating a class within an AngularJS directive: A step-by-step guide

Is there a way to change the class (inside directive) upon clicking the directive element? The current code I have updates scope.myattr in the console but not reflected in the template or view: <test order="A">Test</test> .directive("test", ...

javascripthtmlangularjsangularjs-directive

Vue-powered custom mute/unmute button malfunctions inexplicably when deployed, despite functioning flawlessly during development phase

I'm currently struggling to understand why the mute/unmute button is not functioning as expected. The issue seems to arise when the code is deployed on Netlify, as it works fine on localhost. Essentially, the button mutes and unmutes the video, but th ...

htmlvue.jsnuxt.js

Steps to reposition an element with absolute positioning to the upper left corner of the screen

I am currently in the process of creating a hamburger menu without using JavaScript, which should drop down from the top to the bottom when clicked. The burger menu is situated at the top right corner of the screen, but every time I try to drop down the na ...

htmlcsscss-positionabsolutehamburger-menu

Issues persist with the textarea failing to update the longtext data field

I'm having trouble updating a longtext data cell in my database when I save and post to the same page using a simple form with a textarea. Despite not receiving any PHP errors, the database just doesn't seem to update and I can't figure out ...

phphtmlsql

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

javascripthtmlcsshtml-table

Step-by-step guide on inserting an image directly into an HTML file without utilizing LinkedResource or CDO

Let's say we have a scenario: My objective is to put together an HTML file with an embedded image, similar to the structure below: <html> <head> </head> <body> <img src="?" /> </body> </html> The quest ...

c#html

Using jQuery to handle multiple buttons with the same ID

Is there a way to address the issue of multiple buttons sharing the same id? Currently, when clicking on any button, it only updates the record with id=1. How can this problem be resolved? div id="ShowPrace"> <?php try { $stmt = $pdo->prepare(" ...

javascriptphpjqueryhtmlajax

Using ESP8266 as a client and setting up an AJAX web server

My goal is to use ESP8266 as a client that will be controlled by a server running on my computer. I want the server to send commands to the ESP8266 using AJAX, and for the ESP8266 to respond to these commands and also be able to send data back to the ser ...

htmlajaxesp8266arduino-esp8266

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

javascriptcssangulartypescriptangular-animations

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

Creating a responsive design for embedding YouTube videos in web pages

I am facing an issue with embedding YouTube videos on my webpage. I have tried to make the videos responsive by using the code provided below, which works well on mobile and tablets. However, on desktops and laptops, the videos appear very large. As a work ...

htmlcsstwitter-bootstrapiframebootstrap-5

If the image is not found, add a count instead of showing a new one each time

I have implemented a function to retrieve the two-letter country code: $ipaddress = $_SERVER['REMOTE_ADDR']; function ip_details($ip) { $json = file_get_contents("http://ipinfo.io/{$ip}"); $details = json_decode($json); return $detai ...

phphtmljsonfunctionlogging

A web page with a full-width header, content constrained to a set width, logo elements displayed with flexbox, and a footer that

I've been facing challenges in making this website responsive on both desktop and mobile devices. Initially, the header background image wasn't displaying as intended, followed by issues with the flexbox logo elements in the header and the sticky ...

htmlcssresponsive-designsticky-footer

What is the best way to remove unnecessary space in a div when the content is smaller than the height, while still using overflow:auto?

HTML CODE <p>overflow:auto</p> <div class="auto">This code snippet will add a vertical scroll bar to the content within the div if it exceeds the height of the div. The background color is set to green, width and height are both 100px, ...

csshtmlheightoverflow

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using ...

javascriptjquerycssstoppropagation