Building an e-commerce website has been an exciting journey. We have set up the foundation, added products, and integrated WooCommerce so customers can shop from us.
Now, it is vital to ensure customers can reach out with questions, and that’s where the Contact Us page comes in.
The current Contact Us page includes our address and contact details but needs improvement to make the contact form functional.
By using the WPForms plugin, we can create a dynamic and customisable contact form. Additionally, we’ll add videos or social media links on the homepage to promote our products effectively.
Key Takeaways
- Creating a functional contact form is essential.
- WPForms helps customise and improve user interaction.
- Homepages can be enhanced by adding videos and social media links.
E-commerce Website Development Report
Current Website Status
My e-commerce site is almost ready. The basics are all in place. The website looks great, and the products are uploaded. With WooCommerce running, customers can already make purchases.
However, there’s one important feature that’s not fully functional yet — the contact form. It’s there, looking nice, but it doesn’t work. I’m working on fixing this by using a plugin that will make it operational.
Overview of Contact Add-Ons
To make the contact form operational, I’m using WPForms, a WordPress plugin. I installed and activated the WPForms Light version, which is free and has all the basic tools I need right now.
This tool has a helpful wizard that will guide me in creating the forms. The contact form will have fields for names, emails, and comments. There’s also a choice to add extra options, like asking how people heard about us.
Once I add these to the contact page, I’ll have a working form that lets me receive emails from customers. WPForms can do a lot more if I use the paid version, but for now, the free one works just fine.
Configuring the Get in Touch Page
Navigating to the WordPress Admin Area
I begin by accessing the WordPress admin area. This is the control centre for managing the website’s backend.
Installing a New Contact Form Add-On
Next, I go to the plugins section to add a new add-on. I search for “WP Forms” in the top right-hand corner to find the correct addition, and then click to install it.
Utilising the WP Forms Basic Edition
I’m using the WP Forms basic edition, which is free. It provides essential features needed for now. If interested, more complex features are available with the paid edition.
Choosing and Adjusting a Get in Touch Form Model
After installing WP Forms, I choose a simple form model. This standard model includes fields for name, email, and message. I can customise it by adding extra fields like a multiple-choice question.
Adding the Get in Touch Form to the Webpage
To add the form to the page, I switch to the “Embed” option. I choose an existing page and replace the old form with the new one.
By using the blocks editor, I include the form and adjust the layout to fit nicely in the given space.
Further Customisation of Contact Forms
Adding Extra Fields to the Form
To improve the contact form on my website, I decide to add more fields. This way, I can gather extra information from users.
The WPForms plugin makes this simple with its drag-and-drop feature. By selecting the options I need, I can easily customise the form.
For instance, I add a multiple-choice question titled “How did you hear about us?” with options like website, Google, and social media.
Storing and Placing the Updated Form
Once the form is ready, I save it and move on to embedding it into my website. The WPForms plugin allows choice between creating a new page or using an existing one for the form.
I choose to insert it into my current contact page. By utilising the block editor, I replace the old form with the new one.
I ensure the contact form appears properly by adding it via the block editor’s options. With a quick save, my contact page is now set up with the updated form.
Promoting Products on the Main Page
Revamping the Non-working Video Area
On the homepage, there is a section meant for a video, but currently, it’s not functioning.
My plan is to replace this with a working video or fill it with social media displays for product promotion. To achieve this, I’ll use a reliable plugin that seamlessly integrates with my existing layout and enhances the user experience.
Having engaging content here can help attract and keep visitors interested.
Linking Social Media with the Smash Balloon Tool
Next, I’m going to spice up the homepage with some social media action using the Smash Balloon plugin. By doing this, I can showcase my social media activities directly on the site.
This tool allows me to pull in and display recent posts, creating a dynamic element right on the homepage. It’s a great way to keep the content fresh and engage visitors with up-to-date social interactions.