How can I change the design of the email input form on my Webflow page so that it has a 1px border on all devices including iPhones and iPads?

Published on
September 22, 2023

To change the design of the email input form on your Webflow page and add a 1px border on all devices, including iPhones and iPads, follow these steps:

  1. Select the email input form element:
  • Navigate to the page where the email input form element is located.
  • Click on the element to select it.
  1. Access the element's settings:
  • In the right-hand sidebar, click on the "Settings" tab (represented by a gear icon) for the selected element.
  1. Set the border style:
  • In the "Styles" section, scroll down to the "Border" settings.
  • Click on the "+" icon next to the "Border" property to expand the settings.
  1. Configure the border width:
  • Click on the dropdown menu next to the "Width" property.
  • Choose "1px" from the available options.
  1. Customize the border color:
  • Click on the color swatch next to the "Color" property.
  • Select the desired color for the border.
  1. Apply changes across devices:
  • To ensure that the changes are applied consistently across all devices and screen sizes, make sure that the "Default" option is selected in the "Device" dropdown menu.
  1. Preview and publish:
  • Review the changes in the Webflow Designer's preview section.
  • If you're satisfied with the new design, click the "Publish" button to make the changes live on your website.

By following these steps, you should be able to modify the design of the email input form and add a 1px border that will be displayed on all devices, including iPhones and iPads.

Additional Questions:

  1. How can I change the form field labels in Webflow?
  2. Can I add a background image to my email input form in Webflow?
  3. How can I style placeholder text in a form input field in Webflow?