Creating and Customizing a Popup Form with Date Field Input

04:03 mins
S

SendWorks

Updated on Feb 17, 2025

How to Add a Pop-Up Option to Capture Date Field Data

In this guide, we will walk through the steps to add a pop-up option to capture field data of type date.

Step 1: Create a Custom Field

  1. Navigate to the custom field section and click on Create Custom Field.
  2. In the modal, enter the custom field name in the name input box.
  3. Select the property type drop-down and choose Date from the options.
  4. Click on the Create button to finalize the custom field creation.

Step 2: Create a Pop-Up Form

  1. In the navigation bar, click on Forms to proceed to the form section.
  2. Click the Create Form button to start a new form.
  3. Select Pop-Up Form as the form type.
  4. Click the Next Basic button to continue.
  5. Enter the pop-up form name in the provided text field.
  6. Click the Next Design button at the bottom right.
  7. Select a template by clicking the Select Template button.
  8. Click the Next Content button at the bottom right.

Step 3: Modify Form Fields

  1. In the content section, click on Add Fields to modify the form fields.
  2. In the form editor, add a new field of type text input and give it a name.
  3. Map the text input value category to the earlier created custom field Date of Birth.
  4. Select Save and Continue on the right side of the screen.

Step 4: Configure Behavior and Success Settings

  1. In the targeting section, click Next Behavior at the bottom right.
  2. Click Next Behavior again to continue.
  3. In the behavior settings, click Next Success at the bottom right.
  4. In the success settings, click Create Pop-Up Form at the bottom right.

Step 5: Finalize and Test the Pop-Up

  1. In the content section, click Next Pop-Up Form.
  2. In the confirmation pop-up, click Submit to proceed.
  3. To test the pop-up, click on the Embed Instructions link.
  4. In the navigation bar, click on Hosted Pop-Up under the embed instructions tab.
  5. Copy the highlighted URL link provided in the hosted pop-up section.
  6. Enter the email and date of birth in the pop-up and review the information.
  7. Click the Get Code button in the pop-up.

Step 6: Verify Submission Data

  1. After successful pop-up submission, cross-verify the submission data.
  2. Select the Submission tab in the navigation bar of the pop-up.
  3. Review the submitted pop-up data along with the landing page from which conversion happened.
  4. Ensure that the date of birth data has been mapped correctly.

This is how you can leverage date custom fields in your pop-ups and forms.