Contact Form Module

The Contact Form module in PAP allows you to add a fully customisable form to your app. It is designed for collecting information, feedback, or requests directly from users. With adjustable submission settings, success messages, and styling options for the Submit button, this module helps create clear and functional communication points in your app.

Written By Yasaman Shad

Last updated 5 months ago

Accessing the Button Module

  1. Open an app in PAP.

  2. Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.

  3. In the left-side New Items pane, locate the Contact Form module.

  4. Drag it onto your app canvas. Once placed, click it to open the Contact Form Properties Pane.

Accessing the Button Module

  1. Open an app in PAP.

  2. Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.

  3. In the left-side New Items pane, locate the Button module.

  4. Drag it onto your app canvas. Once placed, click it to open the Button Properties Pane.

Contact Form Properties and Settings

The properties pane provides full control over how the form works and looks.

1. Submission

Define how submissions are received:

  • Recipient Email: The email address where submissions will be sent.

  • Prefix Subject: A short prefix added to the subject line for easier inbox management.

To configure Submission:

  • Open the Contact Form Properties Pane

  • Go to the Submission section

  • Fill in the recipient email and subject prefix fields

2. Success Message

Control the confirmation message shown after a form is submitted:

  • Header: A short, clear title for the confirmation (e.g., Thank You!).

  • Message: Supporting details, instructions, or follow-up notes.

To set a Success Message:

  • Open the Contact Form Properties Pane

  • Go to the Success Message section

  • Add a header and message

3. Submit Button Colour

Define the background fill for the Submit button:

  • None: Transparent background

  • Solid: Choose or customise a solid fill colour

  • Gradient: Apply a gradient background

  • Image: Upload an image to use as the button background

To apply:

  • Open the Contact Form Properties Pane

  • Go to the Submit Button Colour section

  • Select the desired option

4. Submit Button Border

Style the border around the Submit button:

  • Type: None, Solid, or Dashed

  • Size: Adjust the thickness of the border

  • Colour: Pick a custom border colour

  • Corner Radius: Define how rounded or sharp the corners appear

Design Notes

  • The module uses Auto sizing by default, but custom sizes can be set.

  • Every element, from spacing to background, submission settings, and button styles, can be edited in the left properties pane.

Use Cases

  • Collect customer feedback or inquiries directly within your app

  • Customise the Submit button to align with app branding