Switch up the formspree subject via ajax

I have integrated formspree into my Angular application successfully, but I am facing an issue with changing the subject of the email.

Here is the HTML code snippet:

<form id="bookingForm" action="https://formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e990869c9ba98c84888085c78a8684">[email protected]</a>"
  method="POST">
  <input type="text" name="{{client.name}}">
  <input type="{{client.email}}" name="_replyto">
  <input type="hidden" name="_subject" value="Request from {{client.name}}">
  <!-- some other info -->
  <input type="submit" value="Send">
</form>

And here is the JavaScript code snippet:

$bookingForm = $('#bookingForm');
 $bookingForm.submit(function(e) {
 e.preventDefault();
 $.ajax({
   url: '//formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff6e0fafdcfeae2eee6e3a1ece0e2">[email protected]</a>',
   method: 'POST',
   data: {
    client: $scope.client.name,
    email: $scope.client.email,
    phone: $scope.client.phone,
    // some other info 
  },
  dataType: 'json',
 });
});

The _replyto functionality is working fine, but I am unable to get the _subject to work as expected.

Answer №1

Remember to add '_subject' in your post request and delete the name attribute from the subject input field:

$bookingForm = $('#bookingForm');
    $bookingForm.submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: '//formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de4f2e8efddf8f0fcf4f1b3fef2f0">[email protected]</a>',
        method: 'POST',
        data: {
            client: $scope.client.name,
            email: $scope.client.email,
            phone: $scope.client.phone,
            _subject: "Text goes here"
    },
    dataType: 'json',
 });
});

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

Error in jQuery: Unexpected token ILLEGAL during Asp.Net page loading

I am encountering an issue with using jQuery where even simple functions are causing an error message Uncaught SyntaxError: Unexpected token ILLEGAL to appear on page load. Unfortunately, I do not possess enough knowledge about jQuery to troubleshoot such ...

SignOut operation in Express.js Firebase instantly responds with a status of 200 to the client-side Fetch POST request

I'm currently facing an issue with my POST request setup using the Fetch API in my client-side JavaScript. The request is being sent to my server-side JavaScript code which utilizes Express Js and Firebase Auth. The problem arises when the auth().sign ...

Efficiently refine your search using the combination of checkboxes and dropdown menus simultaneously

I am currently in the process of creating a highly sortable and filterable image gallery that utilizes numerous tags. The inspiration for this project stems from a similar question on Stack Overflow regarding dropdown menus and checkboxes. You can view the ...

Ways to transmit the appropriate model

Using AJAX, I am sending a model to the server via a POST request. I have defined a model and a controller method for processing it. public class TestDto: BaseDto { [Required] public ProductGalleryDto GalleryProduct { get; set; } public int ...

Infinite scrolling with a dynamic background

Hi there, I am working on my website and trying to create a smooth transition between sections similar to the one demonstrated here:. The challenge I'm facing is that the backgrounds of my sections cannot be fixed; they need to have background-attachm ...

Refreshing HTML Form upon Submit using JavaScript

I've been searching through various discussions without any luck, but I'm encountering an issue with a form that successfully submits data to a Google Sheet, yet the input fields retain their content after submission. Here is the code: <form ...

I am looking to transform CSV data into XLSX file format, upload it to AWS, and obtain the corresponding URL

I am currently in the process of converting a JSON file to CSV. My next step is to convert this CSV file to XLSX data and upload it to AWS to retrieve the link. Convert CSV to XLSX const xlsxFilePath = 'path/to/transaction_data.xlsx'; await csvto ...

Variable in Javascript file causing return value to be 'undefined'

I have encountered an issue with my JavaScript file. It is extracting data from a SharePoint list and displaying it on an HTML page, but one of the fields appears as 'undefined' even though I defined it initially. The problematic variable is &ap ...

Issue with Heroku deployment: unable to locate JavaScript file

I encountered an issue while deploying my node.js app. Everything seemed to be working fine but it couldn't locate the JavaScript files. The error message displayed was: proove.herokuapp.com/:16 GET 404 (Not Found) Here is the server.js code snip ...

Vue.js: Utilizing async/await in Vue.js results in an observer being returned

Currently, I'm attempting to retrieve data from an API and store it in an array. The issue arises when I try to log the response data from the API - the data is displayed just fine. I assign the value of a variable to the data obtained from awaiting t ...

Robmongo - combine unique values based on different columns

As a newcomer to robmongo, I've been tasked with writing queries for a collection that includes keys like "userId" and "deviceModel." My goal is to create a query that shows the number of users for each device model. Here is the query I have so far: ...

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Seeking the optimal solution for creating PDF templates using Angular and .NET 6? Specifically looking to design templates that heavily feature tables. In my exploration of efficient PDF template creation with Angular and .NET 6, I ventured into using pdf ...

Obtaining an array through an AJAX request in JavaScript

I'm struggling with my ajax call setup: request = new XMLHttpRequest(); request.open("GET","/showChamps?textInput=" + searchChamp.value,true); request.send(null); request.onreadystatechange = function () { if (request.status == 200 && reques ...

An error occurred when attempting to set state within a nested fetch

Having difficulty solving an issue with react.js. loadFromServer(pageSize) { fetch('http://localhost:8080/api/employees') .then(response => { return fetch('http://localhost:8080/api/profile/employees', ...

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...

JavaScript and HTML - specify the location in the html document where the JavaScript script will be displayed

I'm a beginner when it comes to JavaScript. I am trying to make sure that my HTML page remains unchanged while JavaScript text is displayed in a specific location without refreshing the entire page. To trigger a JavaScript function via a button on a ...

Module or its corresponding type declarations not found in the specified location.ts(2307)

After creating my own npm package at https://www.npmjs.com/package/leon-theme?activeTab=code, I proceeded to set up a basic create-react-app project at https://github.com/leongaban/test-project. In the src/index.tsx file of my react app, I attempted to im ...

Angular: Finding the total number of Objects containing a particular value

In my JSON database, I have a collection of objects where each one is assigned a specific value: either a, b, or c. [ { "id": 1, "category": "a" }, { "id": 2, "category": "b" }, { "id": 3, "category": "c" }, { "id ...

Using AngularJS to categorize dates from JSON data into monthly groups and present them in visual charts

Trying to display JSON data in a chart using Chart.js and AngularJS based on months, but facing an issue with the date format being '2017-06-12T12:00:00.000Z'. Specifically, I am unsure how to group the data by month names (June, July, August, et ...

`Is there a recommended approach for conducting a Multi-Factor Authentication test with Cypress?`

I am currently testing an application that sends out a one-time password (OTP) if the user has multi-factor authentication (MFA) enabled. I need to create an end-to-end (E2E) test for this specific functionality. Does anyone know of a tool that can help me ...