wm-form
This form uses Formspark as the backend.
<script type="module">
import 'https://cdn.skypack.dev/@webmarkets/wm-form';
</script>
Properties
-
formspark-form-id
- Fill this out with the form id given to you by Formspark -
redirect-url
- This is the url you would like to send the user once the form is submitted successfully. (Note: This is an absolute URL not relative ex. https://example.com/thank-you) -
full-witdh-button
- This will make the submit button display flex to take up the full width of the form -
fields
- If left blank the form will use its default fields. This is a way to manually enable specific fields for the form. Values can bename
,phone
,email
,referral
, and/ormessage
-
referral-options
- This is a array of options for the referral field. Default value isreferral-options='["Google Search", "Doctor Referral", "Family/Friend Referral","Social Media","Other"]'
and you can customize as needed. -
disclaimer
- This the text that will show above the submit button (defaulted to red, bold text) to let the user know something before submitting the form
Styles
-
--wm-theme-primary
- Background color for the submit button -
--wm-theme-on-primary
- Text color for the submit button -
--wm-form-submit-button-radius
- Border radius value for the submit button -
--wm-form-submit-button-border
- Form submit button border -
--wm-form-disclaimer-color
- Color of the disclaimer text -
--wm-form-disclaimer-font-weight
- Font weight for the disclaimer text
wm-form {
--wm-theme-primary: green;
--wm-form-submit-button-radius: 0.75rem;
}
Example
<wm-form formspark-form-id="XXXXXX" redirect-url="https://webmarketsonline.com" fields="name, email, phone, message" full-width-button></wm-form>