Submit a Contact Form 7 to generate an email

When a real user clicks on my Contact Form 7 submit button, the result is that an email is sent containing the data entered on the form.

The code below runs in k6 without any errors, but email messages are not sent by the Contact Form 7 plugin.
Can someone tell me how to fix the code below so that an email is sent for each VU.
Thanks!

import http from ‘k6/http’
import { sleep } from ‘k6’

export const options = {
vus: 2,
duration: ‘5s’,
}

export default function() {
// Request page containing a form and submit form setting/overriding some fields of the form
http.get(‘https://virtualrdn.com/abcd-contact/’).submitForm({
formSelector: “#wpcf7-f6761-p6762-o1”,
// ‘[action=“/post”]’,
fields: {
yourname: “Joe Blow”,
yourphone: “7325551234”,
youremail: “joe.blow@gmail.com”,
},
submitSelector: ‘submit’,
})
sleep(3)
}

Hi @GeorgeL !
It’s hard to tell what’s wrong with submitting the form. Try starting by looking at what you send and what the server returns. There is a debug example here.
k6 run --http-debug script.js

Hi PaulM,
I ran the debug option you suggested, but with my limited web developer skills I can’t spot the problem.
I tried to paste the debug output here, but I get a warning that new users can’t post more than 2 links.
If you want to contact me outside of this forum my email is george.lapallo@gmail.com

@GeorgeL If the problem is still relevant, you can send a test here from the console or send it to me in private messages

Hi PaulM,
I’m running k6 in Windows 10 command prompt, and redirecting to a file does not capture the debug output.
Is there a way to tell k6 to redirect all output to a file?

Also how do I send you a private message?
Thanks

@GeorgeL Let’s test this code and see if it returns something in debug mode?
k6 run --http-debug script.js

import http from 'k6/http';
import { sleep } from 'k6';
import { check } from 'k6';


export default function () {
  
  let res = http.get('ABCD-Contact - VirtualRDN');

  res = res.submitForm({
    formSelector: '#wpcf7-f6761-p6762-o1',
    fields: {
    yourname: "Joe Blow",
    yourphone: "7325551234",
    youremail: "joe.blow@gmail.com",
    },
    submitSelector: 'submit',
    });

   check(res, {
    'status is 200': (r) => r.status === 200,
  });
  sleep(3);
}

And try to change the field value formSelector: ‘form’
Can the formSelector field value change : #wpcf7-f6761-p6762-o1, on every new session or click?
Here are the guidelines for writing to a file

PaulM,
You asked if the formSelector field value change : #wpcf7-f6761-p6762-o1 , on every new session or click.
The answer is no. The form id stays the same.

The guidelines you sent for directing debug out to a file were cut off.

@GeorgeL Try this command, it should create the file. with response log:
k6 run --http-debug test.js 2>resp.txt

Or what do you mean ‘cut off’?

PaulM
When I run with formSelector: ‘form’,
I see POST …

When I run with formSelector: “#wpcf7-f6761-p6762-o1.wpcf7”,
I see GET …

In either case I don’t think the submit is working because I never receive an email message with the form data.

I would send you the debug files but as a new k6 forum user, I am being restricted from attaching links and files.

@GeorgeL Let’s try a few more options, if they do not work, I will contact you via mail.

  1. Change the send method post:
import http from 'k6/http';
import { sleep, check } from 'k6';

export default function () {
  
  let res = http.post('ABCD-Contact - VirtualRDN');

  res = res.submitForm({
    formSelector: '#wpcf7-f6761-p6762-o1',
    fields: {
    yourname: "Joe Blow",
    yourphone: "7325551234",
    youremail: "joe.blow@gmail.com",
    },
    submitSelector: 'submit',
    });

   check(res, {
    'status is 200': (r) => r.status === 200,
  });
  sleep(3);
}
  1. Append function:
import http from 'k6/http';
import { sleep, check } from 'k6';

export default function () {
  
  let url = ABCD-Contact - VirtualRDN; // or 'ABCD-Contact - VirtualRDN'
  const data = new FormData();
  data.append("formSelector", projectId);
  data.append("yourname", "DFJoe BlowXP");
  data.append("yourphone", "7325551234");
  data.append("youremail", "joe.blow@gmail.com");
  data.append("submitSelector", "submit"); //or 'submit'

  const res = http.post(url, data);

  console.log("res.body   ", res.body);

   check(res, {
    'status is 200': (r) => r.status === 200,
  });
  sleep(3);
}

Hi PaulM,
Let start with what I think is supposed to happen:

  1. Retrieve the contact form from my website. Is this an http GET?
  2. Fill-in the form fields: name, phone, and email address.
  3. Submit the form. Is submit an http POST?
  4. The Contact Form 7 WordPress plugin will construct an email message using the form fields: name, phone, and email address.
  5. Finally, the Contact Form 7 WordPress plugin will call the wp_mail function to send the email to my Gmail account.

Your option 1, I see: POST 200 OK, POST 200 OK, check (status is 200), but no email is sent.

Your option 2, I see: FormData is not defined

Oh, in the second option, you need to add import -import { FormData } from ‘https://jslib.k6.io/formdata/0.0.2/index.js’; :

import http from 'k6/http';
import { sleep, check } from 'k6';
import import { FormData } from 'https://jslib.k6.io/formdata/0.0.2/index.js';

export default function () {
  
  let url = ABCD-Contact - VirtualRDN; // or 'ABCD-Contact - VirtualRDN'
  const data = new FormData();
  data.append("formSelector", projectId);
  data.append("yourname", "DFJoe BlowXP");
  data.append("yourphone", "7325551234");
  data.append("youremail", "joe.blow@gmail.com");
  data.append("submitSelector", "submit"); //or 'submit'

  const res = http.post(url, data);

  console.log("res.body   ", res.body);

   check(res, {
    'status is 200': (r) => r.status === 200,
  });
  sleep(3);
}

But if you have a response code from the server 200, it means that the request has been processed.
Now you need to look:

  1. console.log(res.body) or k6 run --http-debug - there may be an error on the page(You can send here the entire text from the logs or I wrote you an email)
  2. Logs on the server while sending this message
  3. Once again check the correctness of the request when manually sending a letter.

PaulM
Option2 error: [0001] ReferenceError: projectId is not defined

@GeorgeL I believe @PaulM forgot to define the projectId variable before using it. Define const projectId = '#wpcf7-f6761-p6762-o1' right before the const data = new FormData() line, and you should be all good :bowing_man:

Lets close this topic.
The contact form uses Google Recaptcha to prevent spammers from auto-generating contact forms.

2 Likes