Make required contact us sections all red when not filled out

Store Design
, , , ,
1

Hi guys,

Website: seraneeva.com

I’ve been stuck on this for a while.

Could someone help me change my contact us page so that when a user hits “send” prior to filling out the required fields (first and last name, email, and message) a red box pops up in all of the sections with a message below, exactly like the attached image?

Screenshot 2024-05-29 at 10.24.59 AM.png
Screenshot 2024-05-29 at 10.24.59 AM.png1410×1294 48.4 KB

2

Are you using an app for the contact form or coding it in?

3

No app, I used the contact form template already in the theme

4

Hey @flammagreg to display a popup with a message when the user tries to submit the form without filling out the required field

follow these steps

1 . Add error message spans in the form:

  • Navigate to your Shopify admin panel.
  • Go to Online Store > Themes.
  • Click on Actions > Edit Code for the theme you are currently using.
  • In the left sidebar, find and click on Templates and then select page.contact.liquid.
    Add the error message spans within the input wrapper divs for each required field in your page.contact.liquid file like this

    
    
    This field is required.

    
    
    This field is required.

    
    
    This field is required.

    
    
    This field is required.

​

2. Add the popup HTML:
Add the popup HTML somewhere within your page.contact.liquid file, preferably just before the closing tag


    

Please fill out all required fields.

3 . Add JavaScript for validation and popup:

  • Go to your Shopify admin panel again
  • Go to Online Store > Themes.
  • Click on Actions > Edit Code
  • Click on Assets and then select theme.js or create a new one but make sure to link it
document.getElementById('ContactForm').addEventListener('submit', function(event) {
    event.preventDefault();
    let valid = true;
    const firstName = document.getElementById('form_first-name');
    const firstNameError = document.getElementById('firstNameError');
    if (!firstName.value.trim()) {
        firstName.classList.add('input-error');
        firstNameError.style.display = 'block';
        valid = false;
    } else {
        firstName.classList.remove('input-error');
        firstNameError.style.display = 'none';
    }

    const lastName = document.getElementById('form_last-name');
    const lastNameError = document.getElementById('lastNameError');
    if (!lastName.value.trim()) {
        lastName.classList.add('input-error');
        lastNameError.style.display = 'block';
        valid = false;
    } else {
        lastName.classList.remove('input-error');
        lastNameError.style.display = 'none';
    }

    const email = document.getElementById('form_email-address');
    const emailError = document.getElementById('emailError');
    if (!email.value.trim()) {
        email.classList.add('input-error');
        emailError.style.display = 'block';
        valid = false;
    } else {
        email.classList.remove('input-error');
        emailError.style.display = 'none';
    }

    const message = document.getElementById('form_message');
    const messageError = document.getElementById('messageError');
    if (!message.value.trim()) {
        message.classList.add('input-error');
        messageError.style.display = 'block';
        valid = false;
    } else {
        message.classList.remove('input-error');
        messageError.style.display = 'none';
    }

    if (!valid) {
        document.getElementById('formPopup').style.display = 'block';
    } else {
        this.submit();
    }
});

document.getElementById('popupCloseBtn').addEventListener('click', function() {
    document.getElementById('formPopup').style.display = 'none';
});
​

4 . Add CSS for error styling and the popup:

Add this CSS to style your popup

  • admin panel
  • Online Store > Themes.
  • Actions > Edit Code
  • click on Assets and then select base.css
  • style your popup
.error-message {
    display: none;
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}
.input-error {
    border: 1px solid red;
}
.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid red;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.popup p {
    margin: 0;
    font-size: 1em;
    color: red;
}
.popup-close {
    display: block;
    text-align: right;
    margin-top: 10px;
}
.popup-close button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}
​

hope this helps