To configure a logo, use editors in the **Logo in the Survey Header** category.
These editors are mapped to the following survey JSON properties:
- [`title`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title)
- [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description)
- [`logo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logo)
- [`logoWidth`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoWidth)
- [`logoHeight`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoHeight)
- [`logoFit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoFit)
To position a title and description within a form header, use Theme Editor integrated in Survey Creator. Open the Themes tab, switch to the **Header** category in Property Grid, and use the **Logo alignment**, **Survey title alignment**, and **Survey description alignment** editors to align these elements as required. Ensure that the **View** switch is set to "Advanced".
### Add a Background Image to the Form Header
A form header can display a background image that gives your form a more professional look. To add a background image using Theme Editor, open the **Header** category in Property Grid, switch the **View** editor to "Advanced", and use the **Background image** editors.
The **Background image** editors are mapped to the following properties in the theme JSON schema (see the `theme.js` file):
- [`header`](https://surveyjs.io/form-library/documentation/api-reference/itheme#header).[`backgroundImage`](https://surveyjs.io/form-library/documentation/api-reference/iheader#backgroundImage)
- [`header`](https://surveyjs.io/form-library/documentation/api-reference/itheme#header).[`backgroundImageOpacity`](https://surveyjs.io/form-library/documentation/api-reference/iheader#backgroundImageOpacity)
- [`header`](https://surveyjs.io/form-library/documentation/api-reference/itheme#header).[`backgroundImageFit`](https://surveyjs.io/form-library/documentation/api-reference/iheader#backgroundImageFit)
### Specify the Header Content Width
The content area of a form header can have the same width as form contents or span the width of the form container, as in this demo. To specify the preferred mode, use the **Header** > **Content area width** editor, which is mapped to the [`header`](https://surveyjs.io/form-library/documentation/api-reference/itheme#header).[`inheritWidthFrom`](https://surveyjs.io/form-library/documentation/api-reference/iheader#inheritWidthFrom) property.
## Enable Image Capture
A patient registration form may include a patient's photo. To let users take the photo directly inside the form, add a File Upload question to the designer surface and set the question's **File source type** to "Camera" or "Local file or Camera".
[View Photo Capture Demo](https://surveyjs.io/form-library/examples/photo-capture/ (linkStyle))
## Add Conditional Logic and Branching
Conditional logic allows you to add and remove optional questions based on answers given to other questions. In this example, when you select "Other" in the Policyholder question, the form displays additional fields that solicit information about the insurance policyholder. To implement this logic, we set a **Make the question visible if** rule for each additional question. In the survey JSON schema, this rule is saved in the question's [`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model) property.
For more information on conditional logic and branching, refer to the following help topic: [Conditional Logic and Dynamic Texts](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic).
## Files
### `public/index.html`
```html
```
### `src/index.css`
```css
/* You can add your custom CSS here. */
```
### `src/index.js`
```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import { themeJson } from "./theme";
import "./index.css";
import { json } from "./json";
const survey = new Model(json);
survey.applyTheme(themeJson);
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
$("#surveyElement").Survey({ model: survey });
```
### `src/json.js`
```js
export const json = {
"title": "Patient Registration Form",
"description": "Your privacy is important to us. All information received through our forms and other communications is subject to our Patient Privacy Policy.",
"logo": "https://api.surveyjs.io/private/Surveys/files?name=09b0ee2a-d256-4376-b328-8be12d868f14",
"logoWidth": "auto",
"logoHeight": "96",
"completedHtml": "Dear {firstname-for-complete-page},\n
\nYour information has been successfully received, and we look forward to providing you with the highest level of care. \n
\nIf you have any questions or need to schedule an appointment, please don't hesitate to reach out to our office. Our team is here to assist you every step of the way.\n
\nWarm regards,\n
\nCentral Hospital.