1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Optimise Contact Form UX

Discussion in 'Free Divi Community Forum' started by RobertaCin, Apr 30, 2020.

  1. RobertaCin

    RobertaCin Member

    Dear Divi Helpers,

    I would like to optimise the UX of a contact form I have created https://sailover.net/contatti/ (sorry, website is not yet in EN)

    The issues I would like to address are:

    1. In the 3rd field (1st in the second row) I limited the number of number /characters it is possible to enter. Can I attach a message to the field in case people try to enter more characters? Is it possible to attach a similar message to any field where the user is entering wrong characters?

    2. If the user tries to send/complete the form with some fields not completed Error Fields become red but the browser stays where the user is. Is it possible to put a sort of anchor to make the browser jump to the top of the form?

    3. Is it possible to customise consequently the message to support the user filling correctly the form once the browser jumps on top of the form? At the moment a notice appears there saying which fields must be completed but the fact that they are in grey doesn't make it visible and I would like to customise the message itself.
    Example message:
    Compila i seguenti campi:
    - Ospiti a bordo

    I would like to make it red with this line of css
    .et-pb-contact-message {
    color: #fd4747; }
    but this makes also red other elements.

    4. If the user tries to complete the form without accepting the first of the two acceptance values needed there is no error message saying that he/she needs to check the box. Is it possible to add it and customise it? For example, adding a message above the field making the same jump described above.

    thanks a lot in advance!


    Just so you know I also thought it could be better to make the error in the field a bit thicker:
    .et_pb_contact p .et_contact_error {
    border: 3px solid red!important;
    }
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    I doubt that there's any way for you to alter the UX behavior. Best way is to look for other Wordpress contact form plugin that does what you want.
    You should be able to set the checkbox field to be required, so that they need to tick the checkbox before sending.
    Try this instead:
    Code:
    Log In or Sign Up to view this code.