Applying a custom design to forms in DesignDiverso Automata allows you to create visually appealing and on-brand form designs that align with your website and overall branding.
Here’s a step-by-step tutorial to apply a custom design to forms in DesignDiverso Automata, along with some useful tips. 

 Step 1: Create or Edit a Form in DesignDiverso Automata:

  • In Mautic, go to the “Forms” section.
  • Select an existing form that you want to customize or create a new form from scratch.

 

Step 2: Customize the Form Layout:

  • Within the form editor, navigate to the “Layout” tab.
  • Use the available options to adjust the layout settings, such as the number of columns, field alignment, and spacing.
  • Preview the changes to ensure the form layout meets your requirements.

 

Step 3: Customize the Form Style:

  • Go to the “Style” tab in the form editor.
  • Modify the form style using the available options, such as font settings, colors, borders, and backgrounds.
  • Apply your brand’s color palette and typography to maintain consistency with your website and overall branding.

 

Step 4: Edit Field Styles:

  • Within the form editor, select a form field you want to customize.
  • Use the field options panel to adjust the field’s appearance, such as changing the label style, input field size, or adding custom CSS classes.

 

Step 5: Add Custom CSS:

  • If you want to apply more advanced customizations, you can add custom CSS to the form.
  • In the form editor, navigate to the “Custom CSS” tab.
  • Enter your custom CSS code to target specific elements or override default styles.
  • Preview and test the form to ensure the custom CSS changes are applied correctly.

 

Step 6: Save and Publish the Form:

  • After customizing the form design, save your changes.
  • If you’re editing an existing form, make sure to update the form on your website by embedding the updated form code.

 

Useful Tips for Customizing Form Designs in DesignDiverso Automata:

  1. Maintain consistency: Ensure that the form design aligns with your overall brand guidelines and website design.
  2. Keep it user-friendly: Opt for a clean and intuitive design that doesn’t overwhelm or confuse visitors.
  3. Mobile responsiveness: Test the form design on various devices to ensure it looks and functions well on mobile devices.
  4. Clear and concise labels: Use descriptive and concise labels for form fields to make it easy for users to understand what information is required.
  5. Visual hierarchy: Apply visual hierarchy principles to highlight important elements such as the submit button or required fields.
  6. Test and optimize: Regularly review form performance and make data-driven optimizations to improve conversion rates.

By following these steps and applying the useful tips, you can create customized form designs in DesignDiverso Automata that enhance the user experience and align with your brand’s aesthetics. Remember to test your forms across different devices and optimize them based on user feedback and analytics data.

  We can set this up for you if you are on one of our managed plans. 

 

Do you have any questions? We are happy to help you via    email,    phone or  video call.

Click here to go back to the main help page:

DesignDiverso Automata