Create A Forminator 1-Line Opt-In Form

Forminator is our favorite WordPress forms plugin. Follow these steps to create a responsive 1-Line Opt-In Form using Forminator.

1. Login to your WordPress site admin.
2. Go to Forminator Pro > Forms
3. Click to Create a form.
4. Select the Blank template and click the Continue button (bottom-right).
5. Click Insert Fields.
6. Select both Email and Hidden Field then click the Insert Field button (bottom-right).
7. Click the Email field, then enter “Email” into the Label field.
8. Delete/Remove text in the Placeholder field.
9. Click the Settings tab (for the Email field).
10. Click the Required tab under the Require section.
11. Enter “Email” is required. into the Error message field.
12. Click the Validate Field tab under the Validate section.
13. Enter “You must enter a valid email address.” in to Validation message field.
14. Click the Apply button (bottom-right).
15. Click the Hidden Field.
16. Enter Source into the Label field.
17. Select Custom Value on the Default Value menu.
18. Enter a value into the Custom Value field. We used newsletter-opt-in for this example to specify that this opt-in was specifically for newsletter subscriptions.
19. Click the Apply button (bottom-right).
20. Click the Appearance link (left-side-menu).
21. Click the Flat tab under the Design Style section.
22. Click the Custom tab under the Colors section to edit form and form button colors. We use these settings to customize form button colors for example.
23. Click the Custom tab under the Fonts section to edit form font styles. We use these settings to customize field label and button font styles for example.
24. Click Enable custom CSS under the Custom CSS section.
25. Copy the custom CSS code below and paste it into the Custom CSS field.
26. Click the Update button (top-right) to save your edits.
27. Click the Preview button (top-right) to preview the form.

Custom CSS Code

Use the code below to complete Step 25 (above).

Forminator has a “Page Break” module that can be inserted into a form to break form content into separate “page” steps. This feature can be used to create Typeform style paginated surveys.

The code below styles the form and submit button to appear on 1-line. The code is responsive so the form breaks onto 2-lines on smaller screens (mobile phones). It works with Forminator Page Break forms. It also features code that removes the shadow on form “Submit” buttons and on “Back,” and “Next” buttons that appear on form break screens.

The CSS Code:

/* Hide Email Field Label */

label.forminator-label {

display: none;

}

/* Create 1-Line Form + Set Email Field Width On Large Screens */

@media (min-width: 783px) {

div.forminator-row, div.forminator-row forminator-row-last {

float: left;

}

div.forminator-row {

width: 40%;

}

}

/* Set Email Field Width On Small Screens */

@media (max-width: 783px) {

div.forminator-row {

width: 100%;

}

}

/* Hide Drop Shadow On From Buttons */

button.forminator-button.forminator-button-submit, button.forminator-button.forminator-button-next, button.forminator-button.forminator-button-back {

-webkit-box-shadow: none !important;

-moz-box-shadow: none !important;

box-shadow: none !important;

}

/* Set Field Error Messages Line Height */

span.forminator-error-message {

line-height: 1.2em !important;

}

Enjoy!