How can my customers print a copy of the contact form they submitted through a Wix website?

Who is our customer and what problem did they want to solve?

Many of our clients have requested a way for their users to store a copy (for their own records) of their submissions via their contact form.

What solution did we provide?

Using the onWixFormSubmitted method for Wix Forms, we were able to capture the fields that were submitted and then display them back on the page (where the "Thank you for submitting" message would normally be) for the customer to view and print.

Check out the code we used below:

$w.onReady(function () {
  $w("#multiStepForm1").onWixFormSubmitted(({ fields }) => {
    // console.log(fields);
    let submissionMessage = `Thank you for submitting! Submitted data is displayed below.<br/> Please print for your records<br/><br/>`;
    const fieldTemplates = buildSubmissionMessage(fields);
    $w("#text24").html = submissionMessage + fieldTemplates;
  });
});

function buildSubmissionMessage(fields) {
  const FIELD_TEMPLATE = `{{fieldName}}: {{fieldValue}}<br/>`;
  const fieldTemplates = fields.reduce((acc, { id, fieldValue, fieldName }) => {
    // console.log(`${fieldName}: value type ${typeof fieldValue}`);

    if (fieldName === "Multi-line Address") {
      const fieldTemplate = `ADDRESS: ${fieldValue.streetAddress}<br/>
			CITY: ${fieldValue.city}<br/>
			STATE: ${fieldValue.region}<br/>
			ZIPCODE: ${fieldValue.zipCode}<br/>`;
      // console.log(fieldTemplate);
      acc.push(fieldTemplate);
    }

    if (id.includes("datePicker")) {
      const fieldTemplate = `${fieldName}: ${fieldValue.toLocaleDateString()}<br/>`;
      // console.log(fieldTemplate);
      acc.push(fieldTemplate);
    }

    if (id.includes("timePicker")) {
      const fieldTemplate = `${fieldName}: ${tConvert(fieldValue)}<br/>`;
      acc.push(fieldTemplate);
      return acc;
    }

    if (id.includes("checkboxGroup") && typeof fieldValue[0] !== "undefined") {
      const fieldTemplate = `${fieldName}: ${fieldValue[0]}<br/>`;
      // console.log(fieldTemplate);
      acc.push(fieldTemplate);
    }

    if (typeof fieldValue === "string") {
      const fieldTemplate = FIELD_TEMPLATE.replace(
        "{{fieldName}}",
        fieldName
      ).replace("{{fieldValue}}", fieldValue);
      // console.log(fieldTemplate);
      acc.push(fieldTemplate);
    }

    return acc;
  }, []);

  return fieldTemplates.join("");
}

function tConvert(time) {
  // Check correct time format and split into components
  time = time.replace(".000", "");
  time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [
    time,
  ];

  if (time.length > 1) {
    // If time format correct
    time = time.slice(1); // Remove full string match value
    time[3] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM
    time[0] = +time[0] % 12 || 12; // Adjust hours
  }

  return time.join(""); // return adjusted time or original string
}

Have questions about this? Contact us at 225-250-1888 or email robert@roberthebertmedia.com.

About our company

RHM specializes in helping businesses of all sizes and across all industries achieve their digital and web marketing needs. Whether it's designing a new website, building an app, performing custom development, or running Google Ads, our goal is to showcase how you are the best at what you do and help people connect with you. Contact us at 225-250-1888 to get started!