Use the free Contact Form Advanced widget. You can add the fields you need, such as drop-down menus, tick boxes, dates and phone numbers, and each time someone sends the form you get an email with their answers. Only file uploads, the calendar and time pickers, and stored submissions need the paid Contact Forms Enhanced add-on. In EverWeb 4.6 and later, forms also have many more field types and styles, and can take payments by card or PayPal: see the 4.6 section below.
When you'd use this
- A landscaper wants a quote form with a drop-down menu for the type of job and a box for the size of the garden.
- A dance school wants a registration form with radio buttons for the class time and a tick box for photo consent.
- A print shop wants customers to attach their artwork (this needs the add-on).
Add the form
- Click Widgets at the top right and drag Contact Form Advanced onto your page.
- With the form selected, open Inspector > Widget Settings (the cog, the last icon).
- In Email Address to Send Form to, type the address that should receive the answers.
Add and arrange fields
The form starts with Name, Email and Message, listed under Form Controls.
- Click Add, type a name such as Type of job, and press Enter. It labels the field on the form and in your email.
- Choose its Control Type from the table below.
- Double-click a field to rename it, drag it to move it, click Duplicate to copy it, or press Delete to remove it.
| You want | Control Type |
|---|---|
| A short answer, such as a name | TextBox |
| A longer message | Text Area |
| An email address (checked for the right format) | |
| A phone number, a number or a web address | Phone Number, Number, URL |
| One choice from a list | Drop Down Menu or Radio Button |
| Several choices | Checkbox or Selection List |
| A date | Date |
| A pop-up calendar or time picker | Calendar or Select Time (add-on) |
| A file from the visitor | File Upload (add-on) |
| Headings and notes inside the form | Header 1, Header 2, Description |
For a list, add the choices in Option List with Add Option (double-click one to change its words), or use Import Text File... for a long list. Alignment set to Two Columns or Three Columns puts tick boxes or radio buttons side by side.
To make a field compulsory, select it and tick Required field. Placeholder Text adds a grey example inside the box.
The Submit button and the thank-you
- Submit Caption changes the button's words, for example Request a quote.
- 'Email Sent' Success Message is what visitors see after sending.
- Forward To Page takes visitors to a page of your website after they send, such as a thank-you page. Make that page first.
Where the answers go
Answers arrive by email. For reliable delivery, set Mail Sending to SMTP Details: see How do I use my own SMTP (outgoing mail) settings with my contact form? Without the add-on, that email is your only copy.
Forms only send from your published website, not Preview, so publish and then test in a private browser window.
Match it to your website
- Form Style: Classic, Modern or Transparent in EverWeb 4.5. EverWeb 4.6 adds many more (see below).
- Fonts and Styles: fonts and colours for the labels, fields, headers and tips.
- Submit Button: tick Use Styled Button to set Background Color, Text Color, Border Radius (rounded corners), Mouseover Background, Mouseover Text Color and Button Font. Alignment set to Full Width gives a wide button for phones.
What needs the Contact Forms Enhanced add-on
| Feature | Without the add-on | With it |
|---|---|---|
| Text, choice and date fields, required fields, thank-you page | Yes | Yes |
| Answers by email | Yes | Yes |
| File uploads, kept in a secure area of your EverWeb account page (the Client Area) | No | Yes |
| Calendar and Select Time | No | Yes |
| Every submission stored online to search, sort and export as CSV | No | Yes |
| Send Confirmation Email to the visitor (also needs reCaptcha) | No | Yes |
| Mail Sending set to EverWeb | No | Yes |
| Signature field (4.6 and later) | No | Yes |
| Taking payments by card or PayPal (4.6 and later) | No | Yes |
Packages differ in submissions and upload space: see What is the Contact Forms Enhanced Add-on?
Accept file uploads
- Buy the add-on and sign in to your account in EverWeb (EverWeb > Settings on a Mac, Edit > Options on Windows).
- Select the form. At the top of Widget Settings, choose your add-on in Contact Form Enhanced Add-on, and type a Contact Form Name, such as Artwork orders.
- Click Add, name the field and set Control Type to File Upload. Visitors see a Choose File button.
- Publish. Download the files in the Client Area under View Form Submissions.
On another web host, your host must allow file uploads. See What are the server requirements of the Contact Forms Enhanced Add-on?
New in EverWeb 4.6
More field types
Choose these in Control Type, as above:
| You want | Control Type |
|---|---|
| Choices as buttons, tags or cards | Segmented Buttons, Choice Chips, Card Select, Image Select, Color Swatches |
| An on/off switch, or a tick to agree to terms | Toggle, Consent |
| Ratings and amounts | Star Rating, Emoji Scale, Rating Scale, Slider, Stepper |
| An address or country | Address, Country |
| A signature (add-on) | Signature |
| A value visitors don't see, such as the page the form is on | Hidden Field |
| A picture, columns or a dividing line inside the form | Image, Columns, Divider |
| A long form split into steps | Step Break |
More looks
Form Style now has many more designs, such as Filled, Outlined, Pill, Underline, Glass, Soft, Card and Elegant. Style Accent Color sets the highlight colour for the Filled, Outlined, Pill and Underline styles.
Take payments with your form (add-on)
With the Contact Forms Enhanced add-on, a form can work as a simple order or registration form: visitors choose options, see a running total, and pay by card through Stripe or through PayPal when they send it. Good for event tickets, class registrations, deposits, simple product orders and donations.
- Select the form and open the Payments section of Widget Settings. Tick Accept Payments.
- Tick Accept Cards (Stripe) and paste your Stripe Secret Key, and/or tick Accept PayPal and paste your PayPal Client ID and PayPal Secret. Get a Stripe API Key... and Get PayPal Credentials... open the right pages. If you turn on both, visitors choose Card or PayPal.
- Choose the Currency (19 are available, including USD, EUR, GBP, CAD and AUD), the Total Label, a Tax Rate (%) if you charge tax, and a Payment Unsuccessful Page.
- Add prices to your options. Fields where visitors pick one option, such as Radio Button, Drop Down Menu, Segmented Buttons, Card Select and Image Select, charge the chosen option. Fields where they pick several, such as Checkbox, Choice Chips and Selection List, add them together. Use Toggle or Consent for a paid extra, and Stepper or Slider for a quantity. Leave Show prices on options ticked to show each price beside its option.
- Test before going live: use a Stripe test key or tick PayPal Sandbox (testing), then switch to your live details.
- Get the padlock (HTTPS) on your website, then publish with File > Publish Entire Site. See My site says 'Not Secure': how to get HTTPS (SSL) on your website.
Checkout happens on Stripe's or PayPal's own secure page, so card details never touch your website. You receive the submission email, record and any uploaded files only once payment is confirmed. If someone doesn't finish paying, the form can still reach you marked as an Unpaid order, so you don't lose the enquiry. For other ways to sell, see Sell products or digital downloads on your EverWeb website: which option to use.
Common problems
| What you see | What to do |
|---|---|
| "Some required fields are missing or are in the wrong format" when everything is filled in | Check each field's Control Type. A Name field set to Email only accepts an email address. Set it to TextBox. |
| No email arrives | See My contact form isn't sending me emails. |
| "An error occurred while sending the contact form" | See An error occurred while sending the contact form. Check the developer console for errors. |
| File Upload switches back to another type, or Calendar or Signature shows a red note | These need the add-on, with EverWeb signed in and the add-on chosen at the top of Widget Settings. If it isn't listed, select another object, then the form again. |
| Visitors land on the wrong page after sending | Choose another page in Forward To Page, then the right one, then File > Publish Entire Site. |
| Spam messages | Tick Use reCaptcha SPAM Protection. See How to add SPAM protection with reCaptcha to Contact Forms. |