codepen実装時のフォーム作成に関して

Question

状況

現在ポートフォリオを作成しており、新規登録画面をdeviseを用いて実装してあります。
レイアウトを整えるためにcodepenからHTML,CSSを引っ張ってきて実装を考えていました。
deviseではform_foを使用しており、codepenではinputタグを使用している状況です。
deviseでの機能とcodepenでのレイアウトを両立するためにはどうすれば良いのでしょうか。

該当のコード

//new.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
  
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

<div class="main-w3layouts wrapper">
		<h1>Creative SignUp Form</h1>
		<div class="main-agileinfo">
			<div class="agileits-top">
					<input class="text" type="text" name="Username" placeholder="Username" required="">
					<input class="text email" type="email" name="email" placeholder="Email" required="">
					<input class="text" type="password" name="password" placeholder="Password" required="">
					<input class="text w3lpass" type="password" name="password" placeholder="Confirm Password" required="">
					<div class="wthree-text">
						<label class="anim">
							<input type="checkbox" class="checkbox" required="">
							<span>I Agree To The Terms & Conditions</span>
						</label>
						<div class="clear"> </div>
					</div>
					<input type="submit" value="SIGNUP">
				</form>
				<p>Don't have an Account? <a href="#"> Login Now!</a></p>
			</div>
		</div>
		<!-- copyright -->
		<div class="colorlibcopy-agile">
			<p>© 2018 Colorlib Signup Form. All rights reserved | Design by <a href="https://colorlib.com/" target="_blank">Colorlib</a></p>
		</div>
		<!-- //copyright -->
		<ul class="colorlib-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

解決例

inputタグをf.に変換などできるのでしょうか。
今回はCSSの記述量がかなり多いため割愛させていただきます。
（代わりにcodepenのURLを下記に貼り付けさせていただきます）
参照させていただいたcodepenのURL

至らない点等あると思いますが、他に必要事項があれば随時コメントいただけると幸いです。
どうか、お力添えよろしくお願いいたします。

Answer 1

結局はhtmlに変換されるのでerbであればそのままでも使えないわけではないです。
cssも外部ファイルにしてますよね？

Railsの機能が必要な箇所のみ書き換えてください。

Comments

[tomomomo]

回答いただきありがとうございます。
cssに関しては新しくファイルを作っております。

そのままでも使えるというのは、form_forを使う必要がないということですか？
createなどはdeviseのコントローラなどが関係していると思ったのですが、元からあるinputタグでDBに保存まで完結できるということでしょうか？

[m.ts10806]

回答にも書いたようにerbでform_forつかっても、ブラウザ表示時にはformタグに変換されるので同じことになるという話をしています。
もちろん、モデルやオブジェクトと紐づけたいなら同じ出力内容になるように組み替える必要はあります。

[tomomomo]

ユーザ名を登録する場合には
<input class="text" type="text" name="Username" placeholder="Username" required="">
がcodepenでは記述されています。
deviseの場合はform_forの中に
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name, autofocus: true %>
</div>
と記述されています。
codepenではクラスがかなり細かく設定されていると思うのですが、CSSを反映させながらフォームを記述するにはどうしたら良いかわからなくて。。。すみません。

[tomomomo]

回答ありがとうございます。
codepenの方ではモデルの紐付けができていないから今あるテーブルのカラム名を保存することができない状態になっているということですかね。

[m.ts10806]

name属性の属性値がリクエストの際の名となるので、あわせれば良いと思います。
クラスはあくまでclassなので、fでもきちんと設定すれば同じようになるはずです。
https://railsdoc.com/page/text_field
「HTML属性」として:classが使えますね。

[tomomomo]

<%= f.text_field :name, autofocus: true, :class => 'input', :placeholder => 'Username' %><br/>
のようにクラス名をつけることができました。
見た目としては元と同じようにできたのですが、カーソルをフォームに置いたときやクリックした際の微妙な動きが反映されていないみたいでした。
input[type="text"], input[type="email"], input[type="password"] {
font-size: 0.9em;
color: #fff;
font-weight: 100;
width: 94.5%;
display: block;
border: none;
padding: 0.8em;
border: solid 1px rgba(255, 255, 255, 0.37);
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
background-position: -800px 0;
background-size: 100%;
background-repeat: no-repeat;
color: #fff;
font-family: 'Roboto', sans-serif;
}
おそらくこの部分でのtransitionなどが反映されていないのですが、classにinputを追加するだけでは反映されないのでしょうか？
何度もすみません。

[m.ts10806]

属性値はあくまで文字列なので同じように列挙すればいいだけと思います。
ただ、レイアウトの話だとrails関係ないのでご注意を。
f使ってブラウザに表示させたときの「ソースを表示」で想定のhtmlになっているかを確認してください。

[tomomomo]

かしこまりました。
大変助かりました！