I found an answer to this which solved my problem entirely, and without any additional services. Using JavaScript. Sharing here in case it is useful for the next person with this problem. You can see it working here simple-js-form-test
In the Webflow designer, I have it setup in two embed elements. This is so that I can style the form in the designer, and only the script gets hidden behind the “this script” warning, really useful, worth splitting up the code.
First I’ve build the form, I didn’t need the native form element for this in the end, I just added all the classes for styling from other forms on my site.
In HTML embed one (1):
<!-- SendPulse Simple Subscription Form -->
<form id="sendpulse-form">
<label>Nombre</label>
<input type="text" name="name" class="w-input">
<label>Apellido</label>
<input type="text" name="surname" class="w-input">
<label>País</label>
<input type="text" required name="país" class="w-input">
<label>Email</label>
<input type="email" required name="email" class="w-input">
<input type="hidden" name="sender" value="hola@anchoamagazine.com">
<button type="submit" class="button w-button">Subscribe</button>
</form>
<!-- SendPulse Simple Subscription Form -->
<div id="response-container"></div>
In embed two, which sends and processes the form, I added bits to include the response from Sendpulse so I can display that as a success message – and then also added a Spanish translation, just swapping the response from Sendpulse into pre-written sentences in Spanish.
HTML embed two (2):
<script>
document.getElementById('sendpulse-form').addEventListener('submit', function (e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
// SendPulse form action URL
const apiUrl = 'https://login.sendpulse.com/forms/simple/u/eyJ1c2VyX2lkIjo3OTI2NjU3LCJhZGRyZXNzX2Jvb2tfaWQiOjUzOTM2MSwibGFuZyI6ImVuIn0=';
// Make the POST request to SendPulse
fetch(apiUrl, {
method: 'POST',
body: formData,
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text(); // You can change to response.json() if it returns JSON
})
.then((data) => {
// Replace phrases in the response with their translations
data = data.replace('Confirm subscription', 'Por favor confirma tu suscripción');
data = data.replace('An email with a link to confirm your subscription was sent to', 'Se envió un correo electrónico con un enlace para confirmar su suscripción a');
// Create a DOMParser to parse the HTML response
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(data, 'text/html');
// Remove unwanted elements from the parsed HTML
const unwantedElements = parsedHtml.querySelectorAll('#footer, head');
unwantedElements.forEach((element) => element.remove());
// Extract the content you want to display
const extractedContent = parsedHtml.body.innerHTML;
// Display the extracted content in the designated container
const responseContainer = document.getElementById('response-container');
responseContainer.innerHTML = extractedContent;
// You can add code here to handle a successful submission
})
.catch((error) => {
console.error('Error:', error);
// Handle errors here
});
});
</script>
First the event listener is preventing the default submission. It uses FormData to gather all the data entered in the form fields. It makes an HTTP POST request to SendPulse using the fetch() method. It handles the response from SendPulse in a series of callbacks. The response text is then modified by replacing specific phrases with their translated versions (in this case, English to Spanish). Unwanted elements are removed (e.g., the “Powered by SendPulse” link and content) are removed from the parsed HTML. The remaining content is extracted and displayed within a container.
