Display and Edit Form Submissions with Bit Form Views

With the Display Form Data feature in Bit Form, you can easily view and manage submitted responses. Customize how form data is displayed, set permissions for who can view or edit responses, and maintain full control over your form submissions.

To use this feature, open your form and navigate to the settings. On the left-hand side, click on “Data Views & Edit” to access the options for displaying and managing your form responses.

Views And Edit Access

Here, you can manage and assign specific roles for editing form entries. You can set which roles can edit their own entries, which can edit others’ entries, prevent roles from editing entries, and prevent roles from editing others’ entries. Once you’ve selected the roles, toggle on “Allow Users to Edit Form Entries.”

Bit Form Views

Here, you can create custom views and customize them to your preferences, allowing you to display form data in a way that best suits your needs.

To create a view, click on Create First View. Once you do, a new view will be automatically created.

You can assign a name to your view for easy identification.

Setting

Table Caption

Here, you can add a Table Caption to provide a brief description or title for your table.

Column Mapping

In Column Mapping, you can customize the column header name, adjust the column width, and choose which form fields you want to display. You can also add multiple form fields to show in a single column. Click the plus (+) icon to map more columns.

Action Column

In the Action Column, you can set the column title and its width. This column will display options for Edit and View. If you don’t want an Action Column, you can turn it off by simply disabling it.

Edit Button

Here, you can customize the Edit button in the Action Column. If you don’t want it, you can turn it off by simply disabling it.

• Redirect Page: Specify which page you want to redirect to after clicking the Edit button to modify the entries.
• Redirect Link: Enter the URL of the page where you want users to go after they click the Edit button to edit entries.
• Button Text: You can customize the text that appears on the Edit button by entering your desired button label here.

View Button

Here, you can customize the View button in the Action Column. If you prefer not to include it, you can easily disable it.

• Redirect Page: Specify which page you want to redirect to after clicking the view button to view the entries.
• Redirect Link: Enter the URL of the page where you want users to go after they click the view button to view entries.
• Button Text: You can customize the text that appears on the view button by entering your desired button label here.

Details Page

Here, you can customize how the single post details will be displayed.

Style

You can also customize your view by adding custom CSS. To do this, simply click on “Style” next to “Settings.”

Table Wrapper

In the Table Wrapper section, you can adjust settings like padding, color, background, border, font size, font style, font weight, margin, and text alignment. To see more CSS options, simply click the Plus (+) icon.

Caption

In the Caption section, you can customize various styles like font size, padding, font weight, text alignment, background, border, color, font style, and margin. Click the plus (+) icon to see more CSS options.

Search Box

To search entries, you can use the Search Box, which can also be customized. You can adjust the border, width, background color, padding, font size, color, font style, font weight, margin, and text alignment. Click the plus (+) icon to access more CSS options. You can customize the Search Box in three modes: Default mode, Focus mode, and Focus Visible mode.

Table

Here, you can customize the Table to your preference. Adjust the width, border, background, color, font size, font style, font weight, margin, padding, and text alignment. Click the plus (+) icon to view more CSS customization options.

Column Header

In the Column Header section, you can fully customize the appearance of the header. Adjust the color, background, border, font size, font style, font weight, margin, padding, and text alignment to suit your preferences. Click the plus (+) icon to view more CSS customization options.

Table Rows

In the Table Rows section, you can personalize the appearance of your table rows. Customize the default state, hover state, and even or odd rows (nth child). You can modify the border, background, color, font size, font style, font weight, margin, padding, and text alignment to fit your needs. Click the plus (+) icon to view more CSS customization options.

Edit Button

In the Edit Button section, you can fully personalize the button according to your preferences. You can adjust its default state, hover state, focus state, and focus visible state. Customization options include changing the color, background color, font weight, text alignment, padding, font size, border, font style, and margin to match your desired design. Click the plus (+) icon to view more CSS customization options.

View Button

In the View Button section, you can customize the button to fit your style. You can modify its default state, hover state, focus state, and focus visible state. Customization options include changing the color, background color, font weight, text alignment, padding, font size, border, font style, and margin to create the perfect look for your button. Click the plus (+) icon to view more CSS customization options.

Pagination Button

In the Pagination Button section, you can personalize the button to match your design preferences. You can adjust its default state, hover state, focus state, and focus visible state. Customization options include changing the background color, text color, font weight, text alignment, padding, font size, margin, border, and font style. Click the plus (+) icon to view more CSS customization options.

Page Select Box

In the Page Select Box, you can personalize its appearance according to your preferences. You can change its default state, hover state, focus state, and focus visible state. Customization options include adjusting the padding, width, font size, text color, background color, border, font style, font weight, margin, and text alignment. Click the plus (+) icon to view more CSS customization options. This allows you to achieve a look that matches your overall design.

When you make any changes to your settings or styles, you can see a live preview on the right side. This feature is very helpful for ensuring your adjustments look just the way you want them.

Update

Once you’ve finished your customization, click the update button.

Embed Short Code

Next, embed the shortcode into the page where you want to view and edit entries.