Add and Customize Contact Form in Weebly Site
There are many easy ways to add forms to your Weebly site. You can use default Weebly "Contact Form" element, connect forms from App Center and embed form codes from third parties. Being a native element, Weebly's default "Contact Form" element is easy to integrate and manage the received form submissions easily through the dashboard or iPhone/ Android apps. In this article we will discuss the features of default "Contact Form" element and the ways to customize it.
Add Contact Form in Weebly
"Contact Form" is one of the drag and drop elements grouped under "Basic" group in Weebly site editor. Once you add the contact form on the content area and click on it, the elements column in Weebly editor will be automatically changed to form fields. All form fields are classified into the following three categories:
- Short text box
- Large text box
- Options buttons
- Drop down box
- Check boxes
- File upload for Pro user
- Name, Email, Address and Phone number
- Divider and Spacer
- Title, Text, Image and Embed Code
Like normal element each field can be dragged inside the form element. Clicking on the form element will show three options View entries, form options and save.
Click the form options button to see advanced form options popup as shown in the picture below.
The customizing options available are:
- Form name – Enter name for your form. When you use multiple forms in your site, the submissions can be viewed and identified based on the form name easily.
- Email submission to – This is an email id where you will receive an instant alert whenever there is form submission.
- Confirmation message after submission – The confirmation option allows you to display an automatic response to the user after submitting the form. You can either set a text confirmation message or link any webpage. The text message will be shown within the form area after submission. You can connect any external webpage or your own site or store page in the link option which will be displayed after submission.
- Spacing – Used to adjust the spacing of top and bottom margins of the form element.
- Submit Button – Used to align the submit button left, center or right with respect to your form width. Also you can enter any free text like “Contact” instead of submit on the button element.
Field Level Customization
Clicking inside any of the form field will show a popup box applicable for that field. You can change the field name, make it optional or required, add instructions for filling and adjust the spacing of the field within the form. Making a required field will show a star mark on top of the field name indicating the user that is a mandatory field. Failing to fill the mandatory fields will not allow the form to be submitted and display a message "Please correct the highlighted fields" and the field will be highlighted in red color.
Instructions will help the users on how to fill that particular field and the help message will be displayed whenever the filed is focused.
Some of the fields like "Options Buttons", "Checkboxes" and "Dropdown Box" will have additional options as shown in the picture below. You can enter as many as customized options for user selection or choose it from the predefined options list. The predefined options have long list of choices like Comparison, Gender, U.S States, How Long, How Often, Months of the Year, Days of the Week, etc.
Form Options for Pro User
Pro users will have the following additional form features:
- File upload – This is a pro field which helps the user to submit a form with an uploaded file. This will be a very useful feature so that the user can upload additional document or screenshot which will in turn help you to provide a better support. 20 MB is the maximum file size that can be uploaded in a form.
- Adding Form in Footer – In addition to adding form in site’s content area, Pro users can add a form in the footer area as well. Contact form can be added in the footer which will be displayed in the all the pages of a site.
Viewing Form Entries
Form entries can be viewed in multiple ways and the required response can be sent to the submitter accordingly.
- Click on the form to see “View Entries” button, clicking on which will open a new window with all form submissions.
- You will also receive an email alert whenever there is a form submission.
- View the form submissions right from the dashboard.
- You can also use Weebly iPhone or Android app to view and reply your form entries on the go.
Customizing Tricks for Weebly Contact Form
Adjusting Size of Contact Form
Size of the Weebly form can't be adjusted by default. In order to change the size, place the "Spacer" elements beside form element and adjust the width of the form.
Reducing Spam Form Submissions
One of the biggest problem with Weebly contact form is the spam submissions - spammers and bots will submit spam entries and flood your mail box. Since Weebly does not offer CAPTCHA for contact form, handling spam submissions will be a annoying task for site owners. There are two ways to reduce the spams without modifying the code:
- Add "Checkboxes" on the contact form and make it a required field. You can make the "Field Title" as "I am not a robot" and add one "Options Items" as "I am a human". This will force users to check the box and the form can't be submitted without checking it.
- Similarly use "Option Buttons" and change the "Field Title" to anything like "CAPTCHA Check" or "Human Check" and make it a required field. Add single option item like "I am a human not a robot" or any text you want. Now the user needs to use choose the option in order to submit the contact form.
In both the above options, the automatic bots will fail to choose the checkbox or the option button thus stopping the spam entries.
Changing Background Color of Weebly Contact Form
Many users emailed us and asked for the way to change the background color of the Weebly contact form and here is how to do that. Each contact form will have a form #id after publishing the site. Right click on the contact form on a published site and click on the "Inspect" or "Inspect Element" option and find out the form #id number for your contact form as shown in the below picture. The form #id will be something like "form-1234567890123" and will be unique for each form.
Now go to Weebly editor and add the below CSS code under "Header Code" section of the page on which you have a contact form. Don't forget to replace the form #id with your own #id.
padding: 15px 15px 0 15px;
border: 1px solid rgba(158, 158, 158, 0.22);
If you have more than one forms either you can customize them with different background colors or add all form #IDs like #ID1, ID2 and have the same styles for all the forms. If you have more forms then add the CSS under "Settings > SEO > Header Code" section or under "main_style.css" file.