Skip to main content
Version: 8.6

Web Form - Design

When embedded in an application, the Web Form Design widget enables end users to create, preview, and modify web forms. The Qrvey platform provides three types of web forms: survey, form, and quiz.

Remember: A Webform must be paused in order for any changes or edits to be made. If a Webform is not paused, the embedded widget will be visible, but not accept click events.

Embeddable Script

<!-- Tag -->
<qrvey-design-widgets settings="config"></qrvey-design-widgets>

<!-- Config -->
<script>
var config = {
api_key: "<API_KEY>",
app_id: "<APP_ID>",
domain: "https://<your_qrvey_domain>",
user_id: "<USER_ID>",
qrvey_id: "<QRVEY_ID>",
app_type: "<APP_TYPE>"
};
</script>

<!-- Launcher -->
<script src="https://<WIDGETS_URL>/widgets-launcher/app.js"></script>

Configuration Object

PropertyValueRequired
api_keyString. Your organization’s API key to access the Qrvey platform.Required, if qv_token is not provided.
qv_tokenString. A secure token used to authenticate and authorize embedded widgets.Required, if api_key is not provided.
app_idString. ID of the Qrvey application that contains the asset you want to embed.Required
domainString. The base URL of your Qrvey instance.Required
user_idString. The ID of the Qrvey Composer user who owns the application that is being embedded. Alternatively, you can specify the user ID in a Qrvey session cookie.Required, if the user_id is not included in a session cookie.
qrvey_idString. The ID of the webform that will be edited in the widget.Required
app_typeString. The type of webform the widget will instantiate. Options: FORM / QUIZ / SURVEY.Required
style_optionsObject. Sets CSS colors and styles for the web form. For details, please see The Style Options Object below.Optional

Style Options

PropertyValueRequired
main_colorString, Sets a hex color for the main elements of the webform.Optional
secondary_colorString, Sets a hex color for secondary elements of the webform.Optional
tab_barString, Sets a hex color for the tab bar of the webform.Optional
field_iconString, Sets a hex color for field icons in the webform.Optional
errorString, Sets a hex color for error messages in the webform.Optional
notificationString, Sets a hex color for notifications in the webform.Optional
successfulString, Sets a hex color for successful messages in the webform.Optional
warningString, Sets a hex color for warning messages in the webform.Optional