Recently, I made some adjustments to the website I've been working on. Initially, it was created using HTML, CSS, and Javascript. There was a section for email subscriptions which originally only had an HTML input field. However, as we started developing the backend, I decided to switch to using form_for in Ruby on Rails. Unfortunately, the end result didn't turn out as expected.
Here is the intended design: https://i.sstatic.net/fQWhR.jpg
Below is the original HTML:
<div><p id='textbox'>[TEXT HERE]<br>
<input class='subscribe' type='text' placeholder='Email'>
<input class='subscribe' type='submit' value='Join Us'></p>
</div>
This is the corresponding CSS styling:
/* subscribe button */
.subscribe {
border: 0;
padding: 10px;
font-size: 18px;
display: inline;
margin: 20px;
border-radius: 6px;
border-decoration: none;
margin-left: auto;
margin-right: auto;
}
.subscribe[type="text"] {
margin-right: 0.5em;
}
.subscribe[type="submit"] {
background: #abd6a5;
border: 2px solid #abd6a5;
color: white;
}
.subscribe[type="submit"]:hover {
-webkit-transition: all ease-in-out .6s;
-moz-transition: all ease-in-out 0.6s;
-ms-transition: all ease-in-out 0.6s;
-o-transition: all ease-in-out 0.6s;
transition: all ease-in-out .6s;
background: rgba(171, 214, 165, 0.5);
}
After replacing the input with form_for, the layout looks like this: https://i.sstatic.net/ZA4cC.jpg
Snippet from the html.erb file:
<div><p id='textbox'>[TEXT HERE]<br>
<%= form_for(@signup) do |f| %>
<%= f.text_field :email, :placeholder => 'Email', class: 'subscribe', type: 'text' %>
<%= f.submit 'Join Us', class: 'subscribe', type: 'submit' %>
<% end %>
</p>
</div>
I did not make any changes to the CSS file. The problem now is that the form appears to be outside of the paragraph section. Is there something wrong with my approach or is there a way to rectify this issue?
Thank you for your assistance!