JetElements: How to Insert a Contact Form to the Site | Crocoblock (2023)

JetElements: How to Insert a Contact Form to the Site | Crocoblock (1)

This step-by-step tutorial will take you through the process of adding the contact form to your website using Contact Form 7 widget of JetElements plugin.

A contact form is a vital element of any site. That’s why there are so many plugins for contact forms in the WordPress directory. One of the most well-known plugins is Contact Form 7. It allows you to create versatile forms and it is completely responsive and customizable within the Contact Form 7 widget of JetElements plugin.

So, before we start, please, make sure you have Contact Form 7 and JetElements plugin installed and activated.

1 Step — Building a contact form

Open your WordPress Dashboard and go to Contact > Add New.

(Video) Adding Contact Form Using JetElements Addon for Elementor

In the Form tab panel, you can see a form template where there is Your Name field, Your Email field, Subject field, Your Message field, and the Send submit button. This is the classic contact form. You can edit it using the tag-generator tools. If you need any extra help, read a tutorial on Editing Form Template.

JetElements: How to Insert a Contact Form to the Site | Crocoblock (3)

Give your contact form a name by typing it in the Title field. In case you want to customize the Mail template, the Messages, or some Additional Settings, look through the corresponding tabs.

When you are done, scroll down to the bottom of the page and click the “Save” button to save all the changes.

2 Step — Adding the contact form to your page

(Video) JetElements: How to use Subscribe Form widget

Open the page where you want to add your contact form to with Elementor page builder. Find the Contact Form 7 widget, then drag and drop it to the page.

The next step is to select the form template in the drop-down list.

JetElements: How to Insert a Contact Form to the Site | Crocoblock (5)

As you can see the form is totally white.

JetElements: How to Insert a Contact Form to the Site | Crocoblock (6)
(Video) How to create contact forms with JetFormBuilder Free WordPress Plugin

Click the “Edit Section” option and open the Style tab in the left-side menu.

JetElements: How to Insert a Contact Form to the Site | Crocoblock (7)

In the Background accordion block of the Style tab, you can decide if you want the background to be an image, a video, or a gradient. This is an example of what you could create:

JetElements: How to Insert a Contact Form to the Site | Crocoblock (8)

Finally, go back to the Contact Form 7 widget settings, open the Style tab, and style up the contact form. For example, like that:

JetElements: How to Insert a Contact Form to the Site | Crocoblock (9)
(Video) Adding Content with JetElements Modules Using Elementor

In the end, click the “Publish” button at the very bottom of the Elementor panel.

So now you should be afraid of nothing when it comes to creating a contact form!


How do you insert a contact form? ›

So, create a new page or open to edit an existing page where you want to add the contact form. If you're using the Classic editor, in your post or page editor, go to the Add Form button and click it. A popup box will appear. Select the contact form you want to add and click the Add Form button.

Why is my contact form not working on my website? ›

There are many reasons why a form might appear not to work from issues as simple as a typo in the submissions notification email address to issues with your webserver not being allowed to send emails, to issues with code on your website.

Can I embed a contact form into my template file? ›

Yes, but you cannot insert a contact form shortcode into your template file directly. You will need to pass the code…

How do I add a contact form to my website? ›

Installing the contact form on your web site
  1. Unzip the downloaded contact form code.
  2. Edit contactform.php and edit the email address to your email address. ...
  3. Upload the folder contents to your website (to a sub-folder say, /contact)
  4. The contactform.

How do I embed a contact form on my website? ›

To get the code to embed your contact form on your website, go to Settings > Communications > Contact Forms and click the "Embed Code" button in the options on your Contact Form. Choose one of the three embed code options, above, and copy-and-paste that code onto your website.

Do contact forms on websites work? ›

A contact form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner. Behind the scenes, your contact form triggers an email message to be generated and sent to your email inbox.

Should I put a contact form on my website? ›

Contact Forms Offer The Best User Experience

Having a contact form on your website can optimize user experience in a multitude of ways. Contact forms are an efficient way to encourage users to interact with your site, offering the most streamlined means of communication.

How to create simple contact form plugin in WordPress step by step? ›

Install a Contact Form Plugin in WordPress

You can install this plugin on your site by logging into your WordPress dashboard and going to Plugins » Add New. Then, in the search field, type 'WPForms', and click on the 'Install Now' button. This will automatically install the plugin on your site.

Why is my contact form not working WordPress? ›

First, make sure that your form is set up correctly and that all the required fields are filled out. Next, check your email settings to make sure that you are using the correct email address and password. Finally, if you are still having trouble, contact your WordPress host or plugin provider for help.

How to create custom contact form in WordPress without plugin? ›

To add a contact form without a plug-in, you'll need to embed the form into your WordPress site. This involves copying an auto-generated string of code and pasting it into the text editor for your WordPress web page.

How do I attach a document to a template? ›

To attach a Word template to a document template
  1. Click Choose File, and then search for and select the new Word file.
  2. Click Attach File, and then click Done.

Which plugin is best for contact form? ›

Best WordPress Contact Form Plugins in 2023
  • Gravity Forms – Starting at $59 per year.
  • Ninja Forms – Free (Memberships Start at $99 per year)
  • Everest Forms — Free (Premium Start at $49 per year)
  • Metform – Free (Premium starting at $39 per year)
  • HappyForms – Free.
  • Contact Form 7 – Free.
  • HubSpot All-In-One Marketing.
Dec 9, 2022

How do I connect contact form to database? ›

For this you need to follow the following steps:
  1. Step 1: Filter your HTML form requirements for your contact us web page. ...
  2. Step 2: Create a database and a table in MySQL. ...
  3. Step 3: Create HTML form for connecting to database. ...
  4. Step 4: Create a PHP page to save data from HTML form to your MySQL database. ...
  5. Step 5: All done!

How do I add a Captcha to a contact form on my website? ›

Set up reCAPTCHA in a Contact Form or Subscribe Form module:​
  1. Open either module for editing and click the Captcha tab.
  2. For the reCAPTCHA field setting, click Show.
  3. For Validate type, choose the validation type you want.
Feb 1, 2021

How do I link a contact form to an email in HTML? ›

To send an email using HTML forms, you need to add the email id to the action attribute of the form. In that, add email proceeding with mailto: i.e.

Can I embed a PDF form in my website? ›

You can either build online fillable forms from scratch, convert your PDF files to web forms, or convert your PDF files to online fillable forms. Once published, you can get each embeddable code and put them on your website.

What is autofill contact forms? ›

Autofill is a function on a browser or program that can automatically fill in fields with saved data. Online forms that allow autofill are especially useful to save users' time for common fields like Name, Email, and Address, but they can also be used to autofill information like passwords and credit card numbers.

How do I open a pop up form with a button click? ›

How to Open Popup on Button Click- Step by Step Tutorial
  1. Step 1: Select a Business Objective & Popup Template. ...
  2. Step 2: Personalize Your On-Click Open Popup. ...
  3. Step 3: Set up Display Rules. ...
  4. Step 4: Integrate with an Email Service Provider (Optional) ...
  5. Step 5: Add Button with the Embed Code. ...
  6. Step 7: Get The Button Embed Code.

What do you put in a contact form? ›

What Fields Should You Include on Your Contact Form?
  1. First and Last Name. Obviously, getting the contact's name is the most important field to include on a contact form. ...
  2. Email Address. Yet another obvious, essential element to collect in a contact form. ...
  3. Company Name. ...
  4. Reason for Reaching Out.
Jul 23, 2020

How do I fill a website with content? ›

Steady content writing can be done.
Four Tricks to Fill Up Your Website With Content
  1. Plan out the content.
  2. Use brain/habit research to your advantage.
  3. Chunk and schedule.
  4. Post consistently.
Apr 10, 2018

What is the best way to create a form online? ›

The 9 best online form builder apps
  1. Google Forms for quickly creating powerful forms for free.
  2. Microsoft Forms for analyzing form results in Excel.
  3. Jotform for building a form from a template.
  4. Formstack for regulated industries and advanced analytics.
  5. Typeform for conversational forms.
  6. Paperform for creating order forms.

Where should contact info be on a website? ›

Your name, street address, phone number and email address should be in an easy-to-find place on every page of your website. That's because many visitors will be arriving via the search engines through internal pages. Place those important details at the top or bottom of the page, or along one of the margins.

What is the purpose of a contact form on a website? ›

What is the purpose of a contact form? Contact forms essentially have two main purposes: lead generation and a communication channel for existing clients. Website contact forms help generate leads by making it easy for a potential customer to submit a question or comment.

How do I customize a contact form in WordPress? ›

In the left-hand admin panel, click Contact Style and select the Add New option. The Contact Form 7 Style plugin page has a very detailed demo video on how to style a form. You can change the margins, background color, border color, button color, text box color, and much more.

How do I create a fillable form in WordPress? ›

How to Create a Form in WordPress
  1. Choose a WordPress form plugin.
  2. Install the plugin on your WordPress website.
  3. Create a new form.
  4. Add form fields to your form.
  5. Embed the form into a page or post on your website.
Oct 11, 2021

How do I create a dynamic contact form in WordPress? ›

Repeater fields

This is the most simple way to create a dynamic form. By using a repeater field, you give the user the power to add fields (or groups of fields) to a form as needed. There are many reasons why you would want to do this.

How do I make WPForms pop up? ›

Head to your WordPress dashboard and go to Popup Maker » Add Popup, and you'll see the popup editing screen appear. On this screen, you'll want to enter a name for your popup. Plus, you can also enter an optional display title as we did in this example. Your visitors will be able to see this optional display title.

What is the best free contact form for WordPress? ›

Best FREE Form Builder Plugins for WordPress
  • WPForms.
  • Formidable Forms.
  • Everest Forms.
  • Contact Form 7.
  • Jetpack Forms.
  • Ninja Forms.
Jan 3, 2023

How do I apply a template to an existing PDF? ›

Open the document you want to apply the template to. Select Tools > Templates > Apply Template to Page. From the Select Template dialog box, choose a template from the list, then click Select.

How do I apply a template to a PDF? ›

Select File, New Document to start a new document.
  1. On the New dialog, the Page background section offers two tabs: Style and Template. ...
  2. Click the template to select it. ...
  3. PDF Annotator will immediately create a new document for you, based on the template you chose. ...
  4. Adding more pages to a template based PDF.

How do you make a form engaging more? ›

6 Tricks to Create a Visually Engaging Form
  1. Choosing a Canvas.
  2. Start at the Top.
  3. Break Visual Monotony.
  4. Now We're Talking (Looking?)
  5. Simplicity of Image.
  6. Don't Forget the Words.

Is WPForms the best? ›

WPForms is the best form builder plugin for WordPress. The free version, WPForms Lite, is 100% free forever. It lets you build different types of WordPress forms quickly and easily using a drag-and-drop interface.

Which is better contact form 7 or WPForms? ›

Which is better between Contact Form 7 and WPForms? WPForms is a more modern contact form with numerous features that create a form seamlessly. In terms of features, this contact form is better. However, if you want something effective and free, Contact Form 7 is the better option.

How do I submit form data to server? ›

To post HTML form data to the server in URL-encoded format, you need to make an HTTP POST request to the server and provide the HTML form data in the body of the POST message in key=value format. You must also specify the data type using the Content-Type: application/x-www-form-urlencoded request HTTP header.

How do you submit a form to a database? ›

Moving information from an HTML form into a database is a two-step design process. First, create an entry HTML form capable of passing information to a secondary file. Next, create a Hypertext Preprocessor (PHP) file to accept the data and insert it into the database.

How do I connect my website to a database? ›

How to link databases to a website?
  1. Prepare your database user account details. Details about your database account will be necessary to set up the connection to the website. ...
  2. Connect to your database. ...
  3. Query your data. ...
  4. Output your data. ...
  5. Test your script and present the data.
Mar 18, 2022

How do Beginners put on contacts? ›

There are six key steps to putting in contacts easily and safely.
  1. Wash your hands. ...
  2. Clean the contact lens. ...
  3. Hold the contact lens right-side out on the tip of your finger. ...
  4. Hold your eye open (gently!) ...
  5. Place the contact lens in your eye. ...
  6. Make sure the contact lens feels comfortable.
Feb 9, 2022

Is there a way to fill out forms on my phone? ›

You can fill out PDF forms in Google Drive on your Android device. On your Android device, open the Google Drive app. Tap the PDF you want to fill out. At the bottom, tap Fill out form.

How do I set up contact form in mail? ›

How to Install Contact Form 7
  1. Install the Contact Form 7 plugin from the WordPress plugin repository.
  2. Customize Contact Form 7 settings.
  3. Contact form in Contact Form 7.
  4. Configure your WordPress contact form.
  5. Create a new contact form in Contact Form 7.
  6. Save your new WordPress contact form.
Sep 29, 2022

How do I fill in an application form on my phone? ›

You can fill in PDF forms in Google Drive on your Android device.
  1. On your Android device, open the Google Drive app.
  2. Tap the PDF that you want to fill in.
  3. At the bottom, tap Fill in form. ...
  4. Enter your information in the PDF form.
  5. In the top right-hand corner, tap Save.

Why is it so hard to put contacts in? ›

Why are my contacts so hard to put in? If you're having trouble putting your soft contact lenses in, it's often because you blink before the lens touches your eye. That's perfectly normal, as it takes a little practice to overcome the fear of inserting contact lenses.

How long does it take to get used to contacts for the first time? ›

Before you leave your eye care practitioner's office, he or she will give you instructions for use and care of your new contacts. It can take between 10 to 12 days to fully adjust to your lenses.

What is the best app for filling out forms? ›

The free Adobe Fill & Sign app lets you fill, sign, and send any form fast. You can even snap a picture of a paper form and fill it in on your phone or tablet.

How do I upload a document to an online application from my phone? ›

Upload & view files
  1. On your Android phone or tablet, open the Google Drive app.
  2. Tap Add .
  3. Tap Upload.
  4. Find and tap the files you want to upload.
  5. View uploaded files in My Drive until you move them.

What app can I use to fill out a form on my phone and send it through my email? ›

Adobe Fill & Sign mobile app

With our mobile app for iPhone and Android, snap a picture of a paper form, fill it out, sign it, and send it from your phone or tablet. Now that's convenient.

How do I upload a PDF from my iPhone to my website? ›

Send a PDF directly from your iPhone.
  1. Navigate to the Files app.
  2. Open your desired document.
  3. In the bottom left-hand corner of the screen, tap the share icon.
  4. Select how you want to share your PDF.


1. How to Add a Contact Form in Elementor
2. How to Customize Contact Form 7 with Elementor? Style contact form Elementor free and JetElements
3. How To Add Contact Form (Created Using Contact Form 7) To Your Wordpress Page Using Elementor?
(LearnToday Digital)
4. How to Add Contact Form 7 into sidebar of WordPress website
(Gem Webb)
5. How to Create a Contact Form for your Website Using Contact Form 7 - Complete Tutorial & Styling
(Cool Digital)
6. How to put the shortcode to Contact Form 7 in Elementor
(Eric DeLuca)
Top Articles
Latest Posts
Article information

Author: Dong Thiel

Last Updated: 21/05/2023

Views: 6843

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Dong Thiel

Birthday: 2001-07-14

Address: 2865 Kasha Unions, West Corrinne, AK 05708-1071

Phone: +3512198379449

Job: Design Planner

Hobby: Graffiti, Foreign language learning, Gambling, Metalworking, Rowing, Sculling, Sewing

Introduction: My name is Dong Thiel, I am a brainy, happy, tasty, lively, splendid, talented, cooperative person who loves writing and wants to share my knowledge and understanding with you.