Help! My Shopify Contact Form is Tiny: Making it Bigger & Actually Work!

Resizing Your Shopify Contact Form: A Community Fix

We've all been there, staring at a website contact form that looks like it was designed for ants! It's frustrating when you want to make it easy for customers to reach out, but the form just isn't prominent enough. I recently saw a thread in the Shopify community where a store owner, smander, was dealing with exactly this problem. Let's dive into how to tackle this issue and make sure your contact form is both visible and functional.

The Problem: Small Contact Form & Email Delivery Issues

Smander's original post highlighted two key issues: the default Shopify contact form stopped working (emails weren't being received), and a newly installed forms app resulted in a contact form that was way too small. This is a double whammy! You need a working form, and you need it to be appropriately sized.

Smander wrote:

Hey guys,

My standard contact form with shopify no longer works (not receiving emails) I was online with tech for hours and we couldn’t get it to work so I download the app Forms. This is the contact form but it’s so small. Is there a way to change the length size of it?

The Solution: Custom CSS to the Rescue!

Thankfully, another community member, Maximus3, jumped in with a CSS-based solution. This approach allows you to directly modify the width of the contact form within your Shopify theme. Here's the code provided:

#shopify-block-AYWd4dTdKcVpJVk9jZ__forms_inline_XUkxpe {

width: 100%;

}

Now, how do you actually use this? Maximus3 explained the steps:

1. Go to your Shopify theme editor.
2. Click on the specific section where the contact form is located.
3. In the left-hand column, make sure the app section is selected.
4. Scroll down until you find "Custom CSS".
5. Paste the provided CSS code into the Custom CSS box.

Important Considerations & Troubleshooting

• CSS Specificity: The #shopify-block-AYWd4dTdKcVpJVk9jZ__forms_inline_XUkxpe selector is very specific. If it doesn't work, double-check that the ID matches the actual HTML ID of your contact form block. You can use your browser's developer tools (usually accessed by pressing F12) to inspect the element and find the correct ID.
• Email Delivery Issues: Smander mentioned the original Shopify contact form wasn't delivering emails. This can be tricky! Common causes include:
  • SPF Records: Make sure your domain's SPF record includes Shopify's email servers. This helps prevent your emails from being marked as spam.
  • Form Configuration: Double-check the email address configured in the form settings.
  • App Conflicts: Sometimes, other apps can interfere with form submissions. Try temporarily disabling other apps to see if that resolves the issue.
• Consider Alternative Apps: While the CSS fix addresses the size issue, if you're still having trouble with email delivery, explore other form apps in the Shopify App Store. Some popular options offer advanced features like conditional logic and integrations with email marketing platforms.

So, there you have it. By using custom CSS, you can quickly adjust the size of your contact form to better fit your website's design and improve user experience. And remember, if you're facing email delivery problems, don't be afraid to dig into your DNS settings or explore alternative form apps. The Shopify community is a great resource, so don't hesitate to ask for help!