Skip to main content
Forms are created and configured in your Marzipan dashboard under Forms. The <marzipan-form> component fetches the form definition by slug and dynamically renders the fields you’ve configured. Supported field types: text, email, phone, textarea, select, checkbox, radio, date, and hidden.

​
Code

<marzipan-form slug="contact-us"></marzipan-form>

​
Props

Props should be passed as attributes to the component element.
​
slug
required
The slug of the form as defined in your Marzipan dashboard.
​
button-text
The text to display on the submit button.Defaults to Submit
​
success-message
The message to display when the form is submitted successfully. If not set, the success message configured in your Marzipan dashboard will be used.Defaults to Thank you for your submission!

​
Styling

The form component exposes the following CSS parts for styling:
  • --form - The form element
  • --input - All input, textarea, and select elements
  • --form-submit-button - The submit button (also targetable via --primary-action-button)
  • --form-success - The success message container
  • --form-error - The error message shown if the form fails to load
The previous <marzipan-contactform> component is deprecated. Use <marzipan-form> with a form created in your dashboard instead.