Also applies to v8
Define web forms layout
- Applies to:
- Campaign Classic v7
- Topics:
- Web Forms
Creating containers
Containers let you combine the fields of a page and configure their layout; to organize the elements in the page.
For each page of the form, containers are created via the Containers button of the toolbar.
Use a container to group elements of the page without adding a label to the final rendering. Elements are grouped into the container sub-tree. Standard containers let you manage the layout.
For example:
The position of labels is applied to elements placed below the container in the hierarchy. It can be overloaded for each element if necessary. Add or remove columns to change the layout. See Positioning the fields on the page.
In the above example, the rendering will be as follows:
Positioning the fields on the page
The layout of the Web form is defined page by page in each container and can be overloaded if needed.
Pages are broken down into columns: each page contains a certain number of columns. Each field of the page occupies n cells. Containers also occupy a certain number of columns and the fields they contain occupy a certain number of cells.
By default, pages are built on a single column and each element occupies one cell. This means that fields are displayed one under another, each one occupying a whole line, as shown below:
In the following example, the default configuration has been kept. The page occupies a single column which includes four containers.
Each container occupies one column and each element occupies one cell:
The rendering is as follows:
You can adapt the display parameters to obtain the following rendering:
In the above rendering example, each input field, title and image occupies one cell in the columns of the containers.
You can modify the formatting in each container. In our example, you can spread the content of container 4 over two columns and distribute the elements.
The title and the list occupy one cell each (and therefore an entire line of the container) and the checkbox extends over two cells. The number of cells attributed to the input field is defined in the General tab or the Advanced tab, according to the type of field:
Defining the position of labels
You can define the alignment of fields and labels in the form.
By default, the display parameters for fields and other content of the page are inherited from the general configuration of the form, the configuration of the page, or the configuration of the parent container, if it exists.
The global display parameters for the entire form are specified in the form properties box. The Rendering tab lets you select the position of labels.
This position can be overloaded for each page, each container, and each field, via the Advanced tab.
The following alignments are supported:
- Inherited: the alignment is inherited from the parent element (default value), i.e. the parent container if any, or else the page.
- Left/Right: the label is positioned to the right or to the left of the field,
- Above/Below: the label is positioned above or below the field,
- Hidden: the label is not displayed.
Campaign
- Campaign v7 documentation
- Release notes
- Get started
- Start with Adobe Campaign
- Profile management
- Create and manage lists
- Import and export data
- Filter data
- Create queries
- Permissions
- Data packages and enumerations
- CRM connectors
- Create and send messages
- Get started with messages
- Send emails
- Send SMS
- Send LINE messages
- Send push notifications
- Send direct mail
- Use delivery templates
- Personalize deliveries
- Use seed addresses
- A/B testing
- Services and subscriptions
- Monitor deliveries
- Get started with delivery monitoring
- Access the list of deliveries
- Delivery dashboard
- Delivery performances best practices
- Delivery troubleshooting
- Delivery statuses
- Understand delivery failures
- Understand quarantine management
- Track messages
- Track personalized links
- Configure URL tracking options
- Access the tracking logs
- Test tracking
- Tracking troubleshooting
- Deliverability management
- Content management module
- Orchestrate marketing campaigns
- Response manager
- Design and share reports
- Design web content
- Create online surveys
- Integrate with Adobe Experience Cloud
- Automate with workflows
- Manage Offers
- Transactional Messaging
- Integrate with social media
- Installation and configuration guide
- Architecture principles
- Deployment types
- Security and privacy settings
- Install Campaign (on-premise)
- Configure Campaign
- Connect to Campaign
- Connect Campaign to external systems
- Configure external accounts
- Configure Federated Data Access
- Get started with Federated Data Access
- Best practices and limitations
- Configuration guidelines
- Configuration steps
- Configure Amazon Redshift
- Configure Azure Synapse
- Configure Google BigQuery
- Configure Hadoop
- Configure Microsoft SQL Server
- Configure Netezza
- Configure Oracle
- Configure PostgreSQL
- Configure SAP HANA
- Configure Snowflake
- Configure Sybase IQ
- Configure Teradata
- Configure Vertica Analytics
- Remote access rights
- Connect to the database
- Create the data schema
- Define data mapping
- Appendices
- Monitoring guide
- Developers guide
- Technotes
- Campaign Control Panel