How to Integrate Contact Forms

This step-by-step tutorial shows you how to add and integrate contact forms with your ShahiLandin landing pages.

What You’ll Learn

By the end of this tutorial, you’ll know how to:

1. Add HTML forms to landing pages
2. Integrate Contact Form 7
3. Integrate Gravity Forms
4. Integrate WPForms
5. Connect forms to email marketing
6. Track form conversions

Time Required: 10-20 minutes
Difficulty: Beginner to Intermediate
Prerequisites: Published landing page

Method 1: Basic HTML Form


The simplest approach for basic forms.

Step 1: Create HTML Form


Edit your landing page and add this HTML:

`html

Get Your Free Guide



Send My Free Guide



`

Step 2: Set Up Form Backend


Choose a form processing service:

Option A: Formspree (Free & Easy)


7. Visit formspree.io
8. Sign up for free account
9. Create new form
10. Copy your form endpoint: https://formspree.io/f/abc123xyz
11. Replace in your form’s action attribute

Option B: FormSubmit (No Signup Required)


Replace form action with:
`html

`
Emails will be sent to your@email.com.
Option C: Custom PHP Handler

If your host supports PHP, create form-handler.php:
`php
SERVER[“REQUESTMETHOD”] == “POST”) {
$name = striptags(trim($POST[“name”]));
$email = filtervar(trim($POST[“email”]), FILTERSANITIZEEMAIL);
$phone = striptags(trim($POST[“phone”]));
$message = trim($_POST[“message”]);
$to = “you@yourdomain.com”;
$subject = “New Lead from Landing Page”;
$email_content = “Name: $name\n”;
$email_content .= “Email: $email\n”;
$email_content .= “Phone: $phone\n\n”;
$email_content .= “Message:\n$message\n”;
$headers = “From: $name <$email>“;
if (mail($to, $subject, $email_content, $headers)) {
header(“Location: /thank-you”);
} else {
echo “Error sending email.”;
}
}
?>
`
Update form action: action="/form-handler.php"
Step 3: Add Success Message

Add JavaScript for better UX:
`html

`
Method 2: Contact Form 7 (Recommended)

Most popular WordPress form plugin – free and powerful.
Step 1: Install Contact Form 7

Go to Plugins → Add New
Search for “Contact Form 7”
Click Install Now
Click Activate
Step 2: Create a Form

Go to Contact → Contact Forms
Click Add New
Enter form name: “Landing Page Lead Form”
Step 3: Design Your Form

Default form template:
`
Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Subject
[text your-subject]
Your Message
[textarea your-message]
[submit “Send”]
`
Customize for landing page:
`
[text* your-name placeholder “Your Name”]
[email* your-email placeholder “Your Email Address”]
[tel your-phone placeholder “Phone Number (optional)”]
[checkbox your-consent uselabelelement “I agree to receive marketing emails”]
[submit class:cta-button “Get My Free Guide”]
`
Step 4: Configure Email Settings

Click Mail tab:
To: you@yourdomain.com
From: [your-name] <[your-email]>
Subject: New Lead from Landing Page: [your-subject]
Message Body:
`
From: [your-name] <[your-email]>
Phone: [your-phone]
Consent: [your-consent]
Message:
[your-message]
—
This e-mail was sent from a contact form on YourSite (https://yoursite.com)
`
Click Save.
Step 5: Add Form to Landing Page

Copy the shortcode: [contact-form-7 id="123" title="Landing Page Lead Form"]
Edit your landing page
In HTML editor, add where you want the form:
`html
Get Started Today


`
Step 6: Style the Form

Add to CSS editor:
`css
/ Contact Form 7 Custom Styles /
.wpcf7 {
max-width: 600px;
margin: 0 auto;
}
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 input[type=”tel”],
.wpcf7 textarea {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.wpcf7 input[type=”submit”] {
background: #0066cc;
color: white;
padding: 15px 40px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
width: 100%;
}
.wpcf7 input[type=”submit”]:hover {
background: #0052a3;
}
.wpcf7-not-valid-tip {
color: #ff0000;
font-size: 14px;
}
.wpcf7-response-output {
border: 2px solid #00a000;
background: #e6ffe6;
padding: 15px;
margin-top: 15px;
border-radius: 5px;
}
`
Step 7: Track Form Submissions

Add conversion tracking:
`html

`
Method 3: Gravity Forms (Premium)

Professional forms with advanced features.
Step 1: Install Gravity Forms

Purchase from gravityforms.com
Download plugin
Go to Plugins → Add New → Upload Plugin
Upload and activate
Enter license key
Step 2: Create Form

Go to Forms → New Form
Enter form name: “Landing Page Lead Capture”
Drag and drop fields:
– Name (required)
– Email (required)
– Phone
– Message (paragraph text)
– Submit button
Step 3: Configure Notifications

Click Settings → Notifications
Edit Admin Notification:
– Send To: your@email.com
– Subject: New Lead: {Name:3}
– Message: Use merge tags to include form data
Step 4: Set Up Confirmations

Click Settings → Confirmations
Choose confirmation type:
– Text: Show success message
– Page: Redirect to thank you page
– Redirect: External URL
Example text confirmation:
`
Thank you for your interest! Your free guide has been sent to {Email:4}.
We’ll also follow up with you shortly.
`
Step 5: Add to Landing Page

Copy shortcode: [gravityform id="1" title="false" description="false"]
Add to landing page HTML:
`html
Get Your Free Consultation


`
Step 6: Custom Styling

`css
/ Gravity Forms Custom Styles /
.gform_wrapper {
max-width: 600px;
margin: 0 auto;
}
.gform_wrapper input[type=”text”],
.gform_wrapper input[type=”email”],
.gform_wrapper input[type=”tel”],
.gform_wrapper textarea {
width: 100% !important;
padding: 12px !important;
border: 1px solid #ddd !important;
border-radius: 5px !important;
}
.gformwrapper .gformbutton {
background: #ff6600 !important;
color: white !important;
padding: 15px 40px !important;
border: none !important;
border-radius: 5px !important;
font-size: 18px !important;
}
.gformwrapper .validationerror {
background: #ffe6e6;
border: 2px solid #ff0000;
padding: 15px;
border-radius: 5px;
}
`
Step 7: Track Conversions

Add to functions.php:
`php
addaction(‘gformaftersubmission1′, function($entry, $form) {
if (issingular(‘shahilanding’)) {
?>

`
Method 4: WPForms (Freemium)

User-friendly drag & drop form builder.
Step 1: Install WPForms

Go to Plugins → Add New
Search “WPForms”
Install WPForms Lite (free) or WPForms (premium)
Activate
Step 2: Create Form

Go to WPForms → Add New
Select template: Simple Contact Form or Newsletter Signup
Drag fields from left panel:
– Name
– Email
– Phone
– Message
Click Save
Step 3: Configure Settings

General:
Form Name: “Landing Page Lead Form”
Submit Button Text: “Get Started”
Notifications:
Send To Email: your@email.com
Email Subject: New Lead from {field_id=”1″}
Confirmation:
Type: Message or Page redirect
Message: “Thanks! Check your email for the guide.”
Step 4: Add to Landing Page

Copy shortcode: [wpforms id="123"]
`html
Download Your Free Guide
`
Step 5: Custom Styling

`css
/ WPForms Custom Styles /
.wpforms-container {
max-width: 600px;
margin: 0 auto;
padding: 40px 20px;
}
.wpforms-field input[type=”text”],
.wpforms-field input[type=”email”],
.wpforms-field input[type=”tel”],
.wpforms-field textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.wpforms-submit {
background: #28a745 !important;
color: white !important;
padding: 15px 40px !important;
border: none !important;
border-radius: 5px !important;
font-size: 18px !important;
width: 100%;
}
.wpforms-confirmation-container {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
border-radius: 5px;
text-align: center;
}
`
Step 6: Track Conversions

`html

`
Connecting to Email Marketing

Mailchimp Integration

With Contact Form 7:

Install Contact Form 7 Mailchimp Extension
Go to form settings → Mailchimp tab
Connect account and select list
Map form fields to Mailchimp fields
With Gravity Forms:

Install Gravity Forms Mailchimp Add-On
Settings → Mailchimp → Connect account
In form settings → Mailchimp → Create feed
Map fields
With WPForms:

WPForms → Settings → Integrations
Mailchimp → Click Add Connection
Enter API key
In form builder → Settings → Mailchimp
Convert Kit Integration

Similar process – install addon for your form plugin.
Custom API Integration

Add to landing page:
`html

`
Multi-Step Forms

For complex lead capture.
Example: 3-Step Form

`html
Step 1: Tell us about yourself

Continue
Step 2: Your goals
Increase SalesGenerate LeadsBuild Brand
Continue
Step 3: Contact info

Get My Free Guide
`
Best Practices

Form Design Tips

✅ Keep it short: 3-5 fields maximum
✅ Clear labels: Tell users what to enter
✅ Required fields only: Don’t ask for unnecessary info
✅ Strong CTA: “Get My Free Guide” not “Submit”
✅ Mobile-friendly: Large tap targets, easy to fill
✅ Privacy assurance: “We’ll never spam you”
✅ Visual hierarchy: Make important fields prominent
Conversion Optimization

Remove navigation (Canvas mode)
Single focused goal
Social proof near form
Urgency/scarcity
Benefit-focused copy
Trust badges
Testing Checklist

Before launching:
✅ Test form submission
✅ Verify email received
✅ Check on mobile
✅ Test validation errors
✅ Confirm thank you message
✅ Track conversion in analytics
Summary

You’ve learned how to:
✅ Add basic HTML forms
✅ Integrate Contact Form 7
✅ Integrate Gravity Forms
✅ Integrate WPForms
✅ Connect to email marketing
✅ Track form conversions
✅ Style forms for landing pages
✅ Create multi-step forms
Your landing pages now capture leads effectively!
Related Tutorials

How to Set Up Conversion Tracking
How to Create Your First Landing Page
How to Run A/B Tests

—

Need Help? Contact support or check documentation.