EKM Homepage eCommerce Blog by EKM
EKM Homepage eCommerce Blog by EKM
Blog menu

How to create a stylish contact form for your shop

In this guide I’ll talk you through all the steps needed to achieve a great looking contact form and how you can modify it to fit your needs as well as the look of your shop.

To begin with, head over to your shop’s ‘Design’ section and click the ‘Webpages’ button. If you don’t already have one, create a ‘Contact Us’ webpage using the ‘Add Webpage’ button on screen. Once your webpage is created you should see the ekmPowershop editor on screen and in the top left corner you’ll find a ‘Source’ button. Clicking this button allows you to paste in HTML content which will be read by the editor and output on your shop.

Our next step is to paste in the HTML code for the form. Click this link to view the code that I’ve prepared in advance for you. Copy (Ctrl+A then Ctrl+C) this HTML code and paste it (Ctrl+V) into the editor that we opened up earlier (ensure that you’ve clicked the ‘Source’ button first). Once pasted your screen should look somewhat like the screenshot below:

editor

Click the source button again to reveal your new contact form. The form consists of the following:

  • A drop down menu at the top to select a topic
  • A text box for name (required field)
  • A text box for email address (required field)
  • A text box for telephone number
  • An expandable text box for the message (required field)
  • A CAPTCHA (must be turned on in your shop’s settings)
  • A submit button

form

All of elements mentioned above can be personalised so that their colours fit the look of your shop. As standard, the form uses various shades of grey which make it quite neutral and suitable for most shops. However, if you want to personalise the colours you’ll need to edit the form’s CSS and swap out the colour hex codes with the colours that you’d like to use.

Editing the colours

If you take a look at the code that you’ve pasted into the editor you’ll see the following segment at the top:

<style>
/* Main form container & row */
.contact-form { background: #eee; padding: 30px; width:470px; border-radius: 5px; border:1px solid #ddd; font-family: sans-serif; display: inline-block; }
.contact-form .frm-row { margin-bottom: 20px; }
.contact-form .frm-row.nomargin { margin-bottom: 0px;}
/* Label settings, width and colour for required span */
.contact-form .frm-row label { display: inline-block; width:150px; font-size: 14px; margin-top:5px;}
.contact-form .frm-row label span { color:#C71D25; font-weight: bold;}

/* Input settings */
.contact-form .frm-row input[type=”text”], .contact-form .frm-row select, .contact-form .frm-row textarea { padding: 10px; border-radius: 5px; border:1px solid #ddd; display: inline-block; vertical-align: top;}
.contact-form .frm-row input[type=”text”] { width:290px; }
.contact-form .frm-row textarea { height: 100px; width:290px; }
.contact-form .frm-row select { width:312px; }
.contact-form .frm-row.captcha { float:right; }
.contact-form .frm-row.submit { text-align: right; clear:both;}
.contact-form .frm-row.submit input { background: #333; border:none; border-radius: 5px; color:#FFF; padding: 10px 20px; cursor: pointer; }
.contact-form .frm-row.submit input:hover { opacity: 0.7;}
</style>

I’ve highlighted all references to colours in red above and I’ll list what the colours control, in the order that they appear, below:

#eee – the overall form background colour

#ddd – the thin 1 pixel border around the form

#c71d25 – the colour of the asterisks

#ddd – the thin border around the text areas

#333 – the colour of the submit button

#fff – the colour of the text on the submit button

To change these colours you first need to identify what colour you want to replace them with using a colour picker. Once you have your chosen colour simply replace the hex value in the code.

Editing the email subject

All emails from this form will be sent to the shop owner email address that you’ve specified in your shop’s settings. However, to differentiate these emails from any other emails that you’d normally receive, you can customise the email subject line. To do this you’ll need to edit the following section of code which I’ve highlighted in red:

<input name=”subject” type=”hidden” value=”An enquiry from your shop” />

Editing the CAPTCHA

A CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a small test which appears towards the end of a form. Its purpose is to ask a user to verify that they are a human (as opposed to a bot) by copying a sequence of letters and numbers which appear in an image. This in turn significantly reduces the amount of spam that gets sent to a website owner through the form on their site.

You’ll likely be familiar with CAPTCHAs as they’re commonplace across the web. An example of what a CAPTCHA looks like on ekmPowershop is below:

CAPTCHAThere is a CAPTCHA tag for ekmPowershop which is already embedded in the code provided to you earlier. However, to ensure that this CAPTHCA is output on your form you’ll need to head over to your shop’s Settings menu before clicking ‘Outgoing Emails’ and then clicking the toggle next to ‘Enable Captcha On Contact Form’. If you then revisit your contact form you should see it appear.

The standard CAPTCHA form on ekmPowershop is the red one above but this can be modified to a variety of colours and styles. Take a look at our CAPTCHA support guide for assistance changing its style.

What are you waiting for?

Your own successful online shop is just a click away