How to Add and Customize a Contact Form to Your Exported Startup Template

Because of all the styling we’ve put into our forms to make them fit in the overall design of the page, the best way to add a form to your template is by using the Startup app. You can still add a form from scratch, but styling it might be a bit of a headache.

If you’ve already exported your code and edited it, and thus don’t want to replace it with another exported template, you can just add a form to another template, export it and then paste the form’s markup into your main template. It is better to start with a prewritten form and then make changes to it, than to code the whole thing up yourself.

Add Contact Form to Exported Startup Template

Add and Customize a Form

Starting with a prewritten form also gives you an idea of the available CSS styles you can use on the form. We use a combination of classes from the Bootstrap CSS framework as well as our own defined classes.

Once you have a form, you can customize it by changing its text, removing and adding fields. To add a field, you can start by copying another field from the form and changing its name, type, placeholder, classes, etc. If the field is not aligned properly on the form, you can tinker with its classes to change its positioning. Take a look at our classes guide for an understanding of what the classes do.

The forms have animation added to them. If you look at the two fields below from different forms, you will notice data-aos-X attributes on the div tags enclosing the fields.

<div class="col-md-6 col-sm-7" data-aos-duration="600" data-aos="fade-down" data-aos-delay="0">
  <input type="email" name="email" placeholder="Your email" class="mb-20 w-full input lg border-gray focus-action-1 color-heading placeholder-heading text-center text-md-left" required />
</div>

<div data-aos-duration="600" data-aos="fade-down" data-aos-delay="0">
  <div class="mb-10 f-14 semibold text-uppercase sp-20">Name</div>
  <input type="text" name="name" placeholder="Your name" class="mb-25 w-full input lg border-gray focus-action-1 color-heading placeholder-gray text-center text-sm-left" required />
</div>

We use the Animate On Scroll Library for animations on our templates. You can take a look at our animations help document for a comprehensive guide on how to customize your template’s animations, but here is a summary of what you need to know for the forms: We mostly use the following three attributes in our forms:

• data-aos: This specifies the type of animation, e.g. fade-right, flip-down, slide-up, zoom-in-left, etc. Here is a list of all possible variations.
• data-aos-delay: A value from 50 to 3000 that indicates the amount of time, in milliseconds, that will pass before the animation runs, when the element is scrolled to. The value for this should be in steps of 50ms.
• data-aos-duration: A value from 50 to 3000 that indicates the amount of time, in milliseconds, the animation will take to run. The value for this should be in steps of 50ms.

Receive Data From a Form

We’ve included a PHP script in the form-handler.php file that allows you to send data collected from the forms to your email. You can also integrate Mailchimp in the template and send user details to Mailchimp to subscribe users to a newsletter. We have a separate help document for the Mailchimp integration.

First of all, make sure that your <form></form> tag has the method="post" and action="form-handler.php" attributes.

<form action="form-handler.php" method="post">

To send form data to your email, first make sure that your hosting provider has support for PHP and the php mail() function, otherwise the script won’t work.

Then set your email address in the form-handler.php file

// Email to receive message - PUT YOUR EMAIL HERE
$to = "my@email.com";

The following are optional, but you should still customize them with your details:

// email "subject"
$title = 'New message from my Landing page';
// email field "From" - name of sender (e.g. your first & last name)
$from_name = "John Jonson";
// email field "From" - email of sender (e.g. "robot@domain.com")
$from_email = "robot@domain.com";

In the forms generated by the Generator app, we’ve tried to anticipate the type of information you might want to collect from your clients. We’ve added code in the form-handler.php file that will collect data from input fields that have the following names:

• name
• firstname
• lastname
• phone
• email
• username
• username2
• password
• password2
• budget
• company_size
• card
• exp
• cvv
• zip
• country
• city
• address
• message
• send_copy
• remember
• rules
• method
• coupon

If you add a field to your form that doesn’t use any of the above names, you have to add its processing code in the form-handler.php file, otherwise its data won’t be sent. For example, if you add a field with the name this_detail:

<input name="this_detail" />

Then you have to add the following to the PHP script:

/* FORM FIELDS */

if(!empty($_POST['this_detail'])){ $message .= "<b>This Detail:</b> ".$_POST['this_detail'].'<br />'; }

/* END OF FORM FIELDS */